GPA Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GPA Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        #courses div {
            margin-bottom: 10px;
        }
        input {
            margin-right: 10px;
        }
        button {
            margin-top: 10px;
        }
        .error {
            color: red;
            font-size: small;
        }
    </style>
</head>
<body>
    <h1>GPA Calculator</h1>
    <div id="courses"></div>
    <button id="addCourse">Add Course</button>
    <button id="calculate">Calculate GPA</button>
    <p id="result"></p>

    <script>
        // GPA scale
        const gradePoints = {
            'A': 4.0,
            'A-': 3.7,
            'B+': 3.3,
            'B': 3.0,
            'B-': 2.7,
            'C+': 2.3,
            'C': 2.0,
            'C-': 1.7,
            'D+': 1.3,
            'D': 1.0,
             "F":  0
         };

         // Function to add a new course input
         function addCourse() {
             const coursesDiv = document.getElementById('courses');
             const courseDiv = document.createElement('div');
             courseDiv.innerHTML = `
                 <input type="text" placeholder="Grade (e.g., A, B+, C)" class="grade">
                 <input type="number" placeholder="Credit Hours" class="credits" min="0" step=".5">
                 <span class='error' style='display:none;'></span>`;
             coursesDiv.appendChild(courseDiv);
         }

         // Function to calculate GPA
         function calculateGPA() {
             const grades = document.querySelectorAll('.grade');
             const credits = document.querySelectorAll('.credits');
             let totalPoints = 0;
             let totalCredits = 0;

             // Clear previous error messages
             document.querySelectorAll('.error').forEach(error => error.style.display = 'none');

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

                 if (gradePoints[grade] !== undefined && !isNaN(credit) && credit > 0) {
                     totalPoints += gradePoints[grade] * credit;
                     totalCredits += credit;
                 } else {
                     // Show error message if invalid input
                     const errorSpan = credits[i].nextElementSibling; 
                     errorSpan.textContent = "Invalid entry";
                     errorSpan.style.display = '';
                 }
              }

              const gpaResultText =
                  totalCredits >  0 ? `Your GPA is : ${(totalPoints / totalCredits).toFixed(2)}` : "No valid data entered.";
  
              document.getElementById('result').textContent = gpaResultText;

              // Clear inputs after calculation option (uncomment if desired)
              /*grades.forEach(g => g.value=''); 
                credits.forEach(c=> c.value=''); */
          }

          // Initial course input
          addCourse();

          // Event listeners
          document.getElementById('addCourse').addEventListener('click', addCourse);
          document.getElementById('calculate').addEventListener('click', calculateGPA);
      </script>

</body></html>
Scroll to Top