How Can I Improve the Responsiveness of My Grade Calculator Form?

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:

  1. Responsiveness: The table and input fields do not scale well on smaller screens, making it hard to input data on mobile devices.
  2. Button Functionality: Sometimes the “Add Row” and “Remove Row” buttons do not work as expected.
  3. 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!

A good start would be to validate the HTML. You appear to have a page within a page, with a new <doctype> starting half way through the page.
When code formatting is this far wrong all bets are off for things behaving as expected.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fgradescalc.com%2F

Remove padding from body and it looks reasonably OK with 320 pixels browser width (said to be the smallest smartphone width):

grade1

Ok but button Functionality not correct. I’m still unable to fix it.

Thanks for sharing this. I am checking in details and fixing the issue. If still facing the issue I will post in reply.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.