How to Build a Grade Calculator Tool with HTML, CSS, and JavaScript

#html #css #javascript

A grade calculator tool is a practical web application that helps students calculate their weighted course grades based on assignment scores and their respective weights. It’s incredibly useful for:

🎓 Students tracking their academic progress.
📚 Educators verifying grades for assignments or courses.
🧠 Anyone aiming to strategize for a target GPA.

In this beginner-friendly tutorial, you’ll build your own grade calculator inspired by gradecalculator.college using HTML, CSS, and JavaScript — no frameworks or external libraries required. By the end, you’ll have a functional tool where users can input assignment grades and weights, calculate their weighted average, and see their overall course grade.

🛠️ Step 1: Create the HTML Structure
Let’s start with a clean HTML structure. We need:

A form to input assignment names, grades, and weights.
A button to calculate the weighted grade.
A section to display the result.

Here’s the HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn how to build a grade calculator tool with HTML, CSS, and JavaScript to track weighted course grades.">
  <meta name="keywords" content="grade calculator, web development, HTML, CSS, JavaScript, tutorial">
  <meta name="author" content="Your Name">
  <title>Grade Calculator Tool</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Grade Calculator Tool</h1>
    <form id="gradeForm">
      <div id="assignments">
        <div class="assignment">
          <input type="text" placeholder="Assignment Name" class="assignment-name">
          <input type="number" placeholder="Grade (%)" class="grade" min="0" max="100" step="0.01">
          <input type="number" placeholder="Weight (%)" class="weight" min="0" max="100" step="0.01">
          <button type="button" class="remove-btn">Remove</button>
        </div>
      </div>
      <button type="button" id="addAssignment">+ Add Assignment</button>
      <button type="submit" id="calculate">Calculate Grade</button>
    </form>
    <div id="result" class="result">
      <h2>Your Weighted Grade: <span id="weightedGrade">N/A</span></h2>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

What’s happening here?

The form contains a dynamic list of assignments, each with inputs for name, grade (as a percentage), and weight (as a percentage).
The “Add Assignment” button allows users to add more rows.
The “Calculate” button triggers the grade calculation.
The result section displays the weighted average grade.

🛠️ Step 2: Style with CSS
Next, let’s style the calculator to make it intuitive and visually appealing. We’ll use flexbox for layout, ensure inputs are clear, and add responsive design for mobile users.
Here’s the CSS (styles.css):

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  color: #333;
}

form {
  margin-top: 20px;
}

.assignment {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
}

.assignment-name {
  flex: 2;
}

.grade, .weight {
  flex: 1;
}

button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}

.remove-btn {
  background-color: #dc3545;
}

.remove-btn:hover {
  background-color: #b02a37;
}

#addAssignment {
  margin: 10px 0;
  background-color: #28a745;
}

#addAssignment:hover {
  background-color: #218838;
}

.result {
  margin-top: 20px;
}

.result h2 {
  color: #333;
}

@media (max-width: 600px) {
  .assignment {
    flex-direction: column;
  }

  input, button {
    width: 100%;
  }
}

Key styles:

The .assignment div uses flexbox to align inputs and the remove button.
Buttons have distinct colors for add (green), remove (red), and calculate (blue) actions.
The layout switches to a column on mobile devices for better usability.
Inputs are styled for clarity with borders and padding.

🛠️ Step 3: Add JavaScript Functionality
Now, let’s add the logic to make the grade calculator work. We’ll:

Allow users to add or remove assignment rows.
Validate inputs and calculate the weighted average grade.
Display the result with proper formatting.

Here’s the JavaScript (script.js):

const gradeForm = document.getElementById('gradeForm');
const assignmentsContainer = document.getElementById('assignments');
const addAssignmentBtn = document.getElementById('addAssignment');
const weightedGradeSpan = document.getElementById('weightedGrade');

// Add new assignment row
addAssignmentBtn.addEventListener('click', () => {
  const assignmentDiv = document.createElement('div');
  assignmentDiv.classList.add('assignment');
  assignmentDiv.innerHTML = `
    <input type="text" placeholder="Assignment Name" class="assignment-name">
    <input type="number" placeholder="Grade (%)" class="grade" min="0" max="100" step="0.01">
    <input type="number" placeholder="Weight (%)" class="weight" min="0" max="100" step="0.01">
    <button type="button" class="remove-btn">Remove</button>
  `;
  assignmentsContainer.appendChild(assignmentDiv);
});

// Remove assignment row
assignmentsContainer.addEventListener('click', (e) => {
  if (e.target.classList.contains('remove-btn')) {
    e.target.parentElement.remove();
  }
});

// Calculate weighted grade
gradeForm.addEventListener('submit', (e) => {
  e.preventDefault();

  const grades = document.querySelectorAll('.grade');
  const weights = document.querySelectorAll('.weight');

  let totalWeightedGrade = 0;
  let totalWeight = 0;

  for (let i = 0; i < grades.length; i++) {
    const grade = parseFloat(grades[i].value);
    const weight = parseFloat(weights[i].value);

    if (isNaN(grade) || isNaN(weight)) {
      alert('Please fill in all grade and weight fields.');
      return;
    }

    totalWeightedGrade += (grade * weight) / 100;
    totalWeight += weight;
  }

  if (totalWeight !== 100) {
    alert('Weights must sum to 100%.');
    return;
  }

  const weightedGrade = totalWeightedGrade.toFixed(2);
  weightedGradeSpan.textContent = `${weightedGrade}%`;
});

// Prevent form submission on Enter key
gradeForm.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
  }
});

How it works:

Clicking “Add Assignment” dynamically adds a new row with inputs and a remove button.
Clicking “Remove” deletes the respective assignment row.
On form submission, the script collects grades and weights, calculates the weighted average using the formula: Weighted Grade = Σ(Grade * Weight) / 100, and ensures weights sum to 100%.
The result is displayed as a percentage, rounded to two decimal places.
Input validation prevents empty fields or incorrect weight sums.

🚀 Step 4: Test and Deploy

Test locally: Save the three files (index.html, styles.css, script.js) in a folder and open index.html in a browser. Add assignments, input grades and weights, and verify the calculation.
Deploy: Host your tool on platforms like GitHub Pages, Netlify, or Vercel for free.
Enhance: Want to level up? Add features like:
Support for letter grades (A, B, etc.) with automatic conversion to percentages.
A goal-setting feature to calculate required grades for a target course grade.
Persistent storage using localStorage to save assignments.

🌟 Why Build Your Own?
Building a grade calculator is an excellent way to practice dynamic DOM manipulation, form handling, and basic math operations in JavaScript. It’s also a practical tool you can use or share with classmates. For inspiration, check out Grade Calculator, a robust tool for tracking academic performance.
Have questions or ideas to improve this tool? Drop a comment below, and let’s calculate some grades together!

Try the live demo here: Grade Calculator

DEV Community

How to Build a Grade Calculator Tool with HTML, CSS, and JavaScript

Top comments (0)