Hi everyone,
I’ve created a simple grade calculator in HTML and JavaScript for my gradescalc site. It allows users to input their grades and weightage for different assessments and then calculates the final grade percentage and letter grade. While it works fine on desktop, I’m having trouble making it fully responsive, especially on smaller devices.
Here’s the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h2 {
text-align: center;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.add-row, .calculate-grade {
text-align: center;
margin-top: 20px;
}
.add-row button, .calculate-grade button, .remove-row button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin: 5px;
}
button:hover {
background-color: #45a049;
}
.grade-table {
margin-top: 20px;
}
.grade-table th:first-child {
text-align: left;
}
.grade-table input {
width: 90%;
padding: 5px;
}
.grade-table td:last-child input {
width: 60px;
}
.result {
text-align: center;
margin-top: 20px;
font-weight: bold;
}
.grade-result {
margin-top: 10px;
}
.grade-result p {
margin: 5px;
}
.grade-result .letter-grade {
font-size: larger;
}
.A { color: green; }
.B { color: blue; }
.C { color: orange; }
.D { color: red; }
@media screen and (max-width: 600px) {
table, .grade-table input {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Grade Calculator</h2>
<div class="grade-table">
<table id="gradeTable">
<thead>
<tr>
<th>Assessment Type</th>
<th>Percentage Achieved</th>
<th>Weightage (%)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Quiz</td>
<td><input type="number" class="percentage-achieved" min="0" max="100" placeholder="70"></td>
<td><input type="number" class="weightage" min="0" max="100" placeholder="5"></td>
</tr>
<tr>
<td>Assignment</td>
<td><input type="number" class="percentage-achieved" min="0" max="100" placeholder="70"></td>
<td><input type="number" class="weightage" min="0" max="100" placeholder="5"></td>
</tr>
<tr>
<td>Mid Term</td>
<td><input type="number" class="percentage-achieved" min="0" max="100" placeholder="70"></td>
<td><input type="number" class="weightage" min="0" max="100" placeholder="35"></td>
</tr>
<tr>
<td>Final Term</td>
<td><input type="number" class="percentage-achieved" min="0" max="100" placeholder="70"></td>
<td><input type="number" class="weightage" min="0" max="100" placeholder="45"></td>
</tr>
<tr>
<td>Project</td>
<td><input type="number" class="percentage-achieved" min="0" max="100" placeholder="70"></td>
<td><input type="number" class="weightage" min="0" max="100" placeholder="10"></td>
</tr>
</tbody>
</table>
</div>
<div class="add-row">
<button onclick="addRow()">Add Row</button>
<button onclick="removeRow()">Remove Row</button>
</div>
<div class="calculate-grade">
<button onclick="calculateGrade()">Calculate Grade</button>
</div>
<div class="grade-result" id="gradeResult"></div>
<script>
function addRow() {
var table = document.getElementById("gradeTable").getElementsByTagName('tbody')[0];
var newRow = table.insertRow();
newRow.innerHTML = `
<td><input type="text" class="assessment-type" placeholder="Assessment Type"></td>
<td><input type="number" class="percentage-achieved" min="0" max="100" placeholder="70"></td>
<td><input type="number" class="weightage" min="0" max="100" placeholder="Weightage (%)"></td>
`;
}
function removeRow() {
var table = document.getElementById("gradeTable").getElementsByTagName('tbody')[0];
if (table.rows.length > 5) { // Ensure the initial 5 rows are not removed
table.deleteRow(table.rows.length - 1);
}
}
function calculateGrade() {
var table = document.getElementById("gradeTable").getElementsByTagName('tbody')[0];
var totalScore = 0;
var totalWeightage = 0;
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
var percentage = parseFloat(row.querySelector('.percentage-achieved').value);
var weightage = parseFloat(row.querySelector('.weightage').value);
if (!isNaN(percentage) && !isNaN(weightage)) {
totalScore += (percentage * weightage / 100);
totalWeightage += weightage;
}
}
if (totalWeightage === 100) {
var gradePercentage = totalScore;
var letterGrade = calculateLetterGrade(gradePercentage);
var resultDiv = document.getElementById("gradeResult");
resultDiv.innerHTML = `
<p>Final Grade Percentage: ${gradePercentage.toFixed(2)}%</p>
<p class="letter-grade ${letterGrade}">Letter Grade: ${letterGrade}</p>
`;
} else {
alert("Total weightage should be 100%");
}
}
function calculateLetterGrade(gradePercentage) {
if (gradePercentage >= 90) {
return "A";
} else if (gradePercentage >= 80) {
return "B";
} else if (gradePercentage >= 70) {
return "C";
} else if (gradePercentage >= 60) {
return "D";
} else {
return "F";
}
}
</script>
</body>
</html>
Issues I’m facing:
- Responsiveness: The table and input fields do not scale well on smaller screens, making it hard to input data on mobile devices.
- Button Functionality: Sometimes the “Add Row” and “Remove Row” buttons do not work as expected.
- Placeholder Adjustments: I need placeholders for the percentage fields to display “70” and the weightage fields to display “Weightage (%)”. This should also be responsive and adjust based on screen size.
Any advice on how to improve the responsiveness and ensure the buttons work correctly would be greatly appreciated!
Thanks in advance!
