Average grade calculator with HTML+CSS+JavaScript

This project is a simple web application designed to calculate the average grade for eight modules in the course “Technician in Microcomputer Systems and Networks.” Below, each file will be explained and we will see how they are linked together.

File “index.html”

This is the backbone of the application. It defines the content and layout of the web page.

  • Page header:
    • Sets the title as “Average Grade Calculator.”
    • Links the CSS (style.css) for styling and JavaScript (script.js) for interactivity.
  • Main content:
    • A table lists eight modules, each with a grade and two buttons (- and +) to decrease or increase the grade.
    • An average grade is calculated and displayed at the bottom of the table.
  • Key elements:
    • Each grade cell has a unique ID (module1, module2, …, module8) to identify it.
    • Buttons use onclick attributes to trigger JavaScript functions (increaseGrade and decreaseGrade).
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Define the character encoding for the document -->
  <meta charset="UTF-8">
  <!-- Set the viewport to ensure the page is mobile-friendly -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Link to an external stylesheet -->
  <link rel="stylesheet" href="style.css">
  <!-- Page title -->
  <title>Average Grade Calculator</title>
</head>

<body>
  <!-- Main heading of the page -->
  <h1>Technician in Microcomputer Systems and Networks - Grade calculator</h1>

  <!-- Table to display modules, grades, and actions -->
  <table>
    <!-- Table header -->
    <thead>
      <tr>
        <th>Module</th>
        <th>Grade</th>
        <th>Actions</th>
      </tr>
    </thead>
    <!-- Table body -->
    <tbody>
      <!-- Each row corresponds to a module -->
      <tr>
        <td>Assembly and Maintenance of Computers</td>
        <td id="module1">0</td>
        <td>
          <!-- Buttons to decrease and increase the grade -->
          <button onclick="decreaseGrade('module1')">-</button>
          <button onclick="increaseGrade('module1')">+</button>
        </td>
      </tr>
      <tr>
        <td>Single-user Operating Systems</td>
        <td id="module2">0</td>
        <td>
          <button onclick="decreaseGrade('module2')">-</button>
          <button onclick="increaseGrade('module2')">+</button>
        </td>
      </tr>
      <tr>
        <td>Office Automation Applications</td>
        <td id="module3">0</td>
        <td>
          <button onclick="decreaseGrade('module3')">-</button>
          <button onclick="increaseGrade('module3')">+</button>
        </td>
      </tr>
      <tr>
        <td>Network Operating Systems</td>
        <td id="module4">0</td>
        <td>
          <button onclick="decreaseGrade('module4')">-</button>
          <button onclick="increaseGrade('module4')">+</button>
        </td>
      </tr>
      <tr>
        <td>Local Networks</td>
        <td id="module5">0</td>
        <td>
          <button onclick="decreaseGrade('module5')">-</button>
          <button onclick="increaseGrade('module5')">+</button>
        </td>
      </tr>
      <tr>
        <td>Computer Safety</td>
        <td id="module6">0</td>
        <td>
          <button onclick="decreaseGrade('module6')">-</button>
          <button onclick="increaseGrade('module6')">+</button>
        </td>
      </tr>
      <tr>
        <td>Network Services</td>
        <td id="module7">0</td>
        <td>
          <button onclick="decreaseGrade('module7')">-</button>
          <button onclick="increaseGrade('module7')">+</button>
        </td>
      </tr>
      <tr>
        <td>Web Applications</td>
        <td id="module8">0</td>
        <td>
          <button onclick="decreaseGrade('module8')">-</button>
          <button onclick="increaseGrade('module8')">+</button>
        </td>
      </tr>
    </tbody>
    <!-- Table footer to display the average grade -->
    <tfoot>
      <tr>
        <td>Average</td>
        <td id="result" colspan="2">0</td>
      </tr>
    </tfoot>
  </table>
  
  <!-- Link to the JavaScript file for functionality -->
  <script src="script.js"></script>
</body>

</html>

File “script.js”

This JavaScript file contains the logic for updating the grades and calculating the average.

  1. Global variable:
    • sum: Tracks the total sum of all grades.
  2. Functions:
    • increaseGrade(moduleId):
      • Checks if the grade is less than 10.
      • Increases the grade by 1 and updates the total sum.
      • Recalculates the average by calling calculateAverage.
    • decreaseGrade(moduleId):
      • Checks if the grade is greater than 0.
      • Decreases the grade by 1 and updates the total sum.
      • Recalculates the average.
    • calculateAverage():
      • Divides the total sum by the number of modules (8).
      • Displays the result in the table footer with two decimal places.
// Variable to store the total sum of grades
let sum = 0;

/**
 * Increases the grade for the given module if it's less than 10.
 * Updates the total sum and recalculates the average.
 */
function increaseGrade(moduleId) {
    // Get the current grade for the module and check if it's below 10
    if (document.getElementById(moduleId).innerText < 10) {
        // Increment the grade for the module
        document.getElementById(moduleId).innerText++;
        // Increment the total sum
        sum++;
        // Recalculate and update the average
        calculateAverage();
    }
}

/**
 * Decreases the grade for the given module if it's greater than 0.
 * Updates the total sum and recalculates the average.
 */
function decreaseGrade(moduleId) {
    // Get the current grade for the module and check if it's above 0
    if (document.getElementById(moduleId).innerText > 0) {
        // Decrement the grade for the module
        document.getElementById(moduleId).innerText--;
        // Decrement the total sum
        sum--;
        // Recalculate and update the average
        calculateAverage();
    }
}

/**
 * Calculates and updates the average grade.
 * Assumes there are 8 modules.
 */
function calculateAverage() {
    // Calculate the average and display it with 2 decimal places
    document.getElementById('result').innerText = (sum / 8).toFixed(2);
}

File “style.css”

This file styles the HTML elements to make the interface visually appealing.

  • Body styling:
    • Sets a clean sans-serif font for readability.
  • Table styling:
    • Makes the table full-width and centers its content.
    • Adds borders around cells for clarity.
    • Header rows (<thead>) have a dark green background with bold, white text for contrast.
  • Buttons:
    • Styled with a green background, rounded corners, and hover effects to darken the color.
/* Global font settings: use a sans-serif font for the entire page */
body {
    font-family: Arial, sans-serif; /* Set a clean sans-serif font */
}

/* Basic styles for the table */
table {
    width: 100%; /* Make the table take up the full width of the window */
    border-collapse: collapse; /* Remove spacing between table cells */
    text-align: center; /* Center align text within table cells */
}

/* Add a border to table headers and cells */
th, td {
    border: 1px solid black; /* Solid black border around cells */
}

/* Table header styles */
thead th {
    background-color: #006b5f; /* Set a dark green background color */
    color: #ffffff; /* Use white text for contrast */
    font-weight: bold; /* Make text bold */
    padding: 15px; /* Add padding for better spacing */
}

/* Table cell styles */
td {
    padding: 12px; /* Add padding inside cells for better readability */
    vertical-align: middle; /* Vertically center align cell content */
    text-align: center; /* Default horizontal alignment is centered */
}

/* Align the text in the first column to the left */
td:first-child {
    text-align: left; /* Left-align only the first cell in each row */
}

/* Button styles */
button {
    background-color: #009879; /* Use a soft green background */
    color: white; /* Set white text for contrast */
    border: none; /* Remove the default border */
    padding: 5px 10px; /* Add padding inside the button */
    cursor: pointer; /* Show a pointer cursor on hover */
    border-radius: 5px; /* Add rounded corners */
}

/* Change button appearance when hovered */
button:hover {
    background-color: #007a63; /* Darken the button background on hover */
}

How the files work together

  1. Initial page load:
    • The grades are set to 0.
    • The average is displayed as 0.
  2. User interaction:
    • Clicking + increases the grade of the selected module (up to 10).
    • Clicking - decreases the grade (down to 0).
  3. Real-time update:
    • The JavaScript functions dynamically adjust the grades and calculate the new average without refreshing the page.

The result

You can click here to see how this average grade calculator works.