angel/AP-Computer-Principles-Archive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "lab"

Browse Source
This commit is contained in:
angel
2025-10-27 12:26:29 -05:00
parent 6083fced21
commit 53cdaa3037
5 changed files with 121 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
lab/GradeCalculator.js Normal file
View File

@@ -0,0 +1,32 @@
function calcthis() {
let name = document.getElementById("name").value;
let grade = parseInt(document.getElementById("meow").value); // Convert grade to an integer
let resultElement = document.getElementById("result"); // Assuming an element with id "result" to display output
let finalLetterGrade;
if (grade >= 90 && grade <= 100) {
finalLetterGrade = 'A';
} else if (grade >= 80 && grade <= 89) {
finalLetterGrade = 'B';
} else if (grade >= 70 && grade <= 79) {
finalLetterGrade = 'D';
} else if (grade >= 0 && grade <= 69) {
finalLetterGrade = 'F';
// } else if (grade >= 0 && grade <= 9) {
// finalLetterGrade = 'atp jst drop out gng 😭✌️ '
} else {
finalLetterGrade = 'Invalid Grade';
}
if (resultElement) {
if (finalLetterGrade === 'Invalid Grade' || name === '') {
alert("Please check your inputs")
} else {
resultElement.textContent = ` ${name} your letter grade is ${finalLetterGrade}`;
}
} else {
console.error("Element with id 'result' not found to display output.");
}
}

6
lab/GradeCalculator.ts Normal file
View File

@@ -0,0 +1,6 @@
function calcthis() {
let afsdlk = document.getElementById("name").value!;
let dlkafs = document.getElementById("meow").value!;
}
// This script gets input from text boxes

BIN
lab/Letter Grade Calculator.docx Normal file
View File

Binary file not shown.

29
lab/index.html Normal file
View File

@@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Letter Grade Calcualtor App</title>
<link href="/lab/styles.css" rel="stylesheet" />
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous"> -->
</head>
<body>
<div class="fgd">
<!-- top header -->
<h1>Letter Grade Calculator</h1>
</div>
<div class="fsd">
<!-- body for the app -->
<h2>Instructions</h2>
<p>Type in your numeric grade and I you will get your correcponding letter grade.</p><br>
<label>Student Name:</label> <input type="text" id="name" placeholder="Bill Gates"/> <br> <br>
<label>Numeric Grade:</label> <input type="number" max="100" id="meow" placeholder="74"/> <br><br>
<button onclick="calcthis()">Get My Letter Grade</button><br><br> <br>
<div class="result">
<p id="result"></p>
</div>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script> -->
<script src="/lab/GradeCalculator.js"></script>
</body>
</html>

54
lab/styles.css Normal file
View File

@@ -0,0 +1,54 @@
body {
background-color: #205499;
color: rgb(255, 255, 255);
font-family: Arial, Helvetica, sans-serif;
margin: 0;
margin-top: 10px;
}
input {
background-color: rgb(14, 32, 134);
border: none;
padding: 0.2rem;
color: white;
border-radius: 0.2rem;
}
button {
padding: 0.2rem;
border-radius: 0.2rem;
border: none;
}
::-webkit-input-placeholder {
color: rgba(0, 162, 255, 0.808);
}
.fsd {
width: fit-content;
margin: auto;
padding: 20px;
background-color: #1d69ce;
border: 10px solid #154583;
border-radius: 0.5rem;
}
.fgd {
background-color: #1d69ce;
text-align: center;
padding-bottom: 0.005rem;
padding-top: 0.005rem;
margin-bottom: 30px;
font-size: 1.4rem;
}
.result {
background-color: #0f75fa;
padding: 0px 5px;
margin-left: 10px;
margin-right: 10px;
border: 4px solid #154583;
color: rgb(255, 255, 255);
border-radius: 0.5rem;
}
#result{
font-size: 2rem;
margin: 15px 0px;
}