How to create GPA Calculator Card using JavaScript and Tailwind CSS ?

Last Updated : 04 Mar, 2024

A GPA (Grade Point Average) Calculator using Tailwind CSS, and JavaScript allows users to input the credits and select the grade for each course, and it will calculate the GPA based on these inputs.

Output Preview: Let us have a look at how the final output will look like.

Preview

Approach to create GPA Calculator Card:

Create the basic structure of the web page using HTML and integrate TailwindCSS for styling via CDN links.
Classes such as bg-gray-100, p-8, rounded-lg, and shadow-lg are applied to create a visually appealing interface.
Form elements are styled using classes like border, rounded-md, py-2, px-3, and focus:outline-none to ensure consistent appearance and focus styles.
JavaScript functions are implemented to handle user interactions and perform calculations. The function addCourse() adds a new course to the list with the provided details and updates the GPA display.
The updateGPA() function calculates the GPA based on the entered courses and updates the GPA display accordingly. The getPointsForGrade() function returns the corresponding GPA points for a given grade.
The clearAll() function resets all input fields, clears the course list, and hides the results section.

Example: Implementation of Building a GPA Calculator in Tailwind CSS

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>The GPA Calculator</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
 
<body class="bg-gray-100">
    <div class="flex justify-center 
                items-center h-screen">
        <div class="max-w-md w-full bg-white 
                    p-8 rounded-lg shadow-lg 
                    border-2 border-green-500">
            <h1 class="text-3xl font-bold 
                       text-center mb-8">
                GPA Calculator
            </h1>
            <div id="courses">
                <div class="mb-4">
                    <label for="courseName"
                           class="block text-sm 
                                  font-medium 
                                  text-gray-700">
                        Course Name:
                    </label>
                    <input type="text" id="courseName"
                           name="courseName"
                           class="w-full border border-gray-300
                                  rounded-md py-2 px-3 
                                  focus:outline-none 
                                  focus:border-blue-500">
                </div>
                <div class="mb-4">
                    <label for="grade"
                           class="block text-sm font-medium
                                  text-gray-700">
                        Grade:
                    </label>
                    <select id="grade" name="grade"
                            class="w-full border border-gray-300
                                   rounded-md py-2 px-3 
                                   focus:outline-none 
                                   focus:border-blue-500">
                        <option value="A">A</option>
                        <option value="A-">A-</option>
                        <option value="B+">B+</option>
                        <option value="B">B</option>
                        <option value="B-">B-</option>
                        <option value="C+">C+</option>
                        <option value="C">C</option>
                        <option value="C-">C-</option>
                        <option value="D+">D+</option>
                        <option value="D">D</option>
                        <option value="F">F</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="credits"
                           class="block text-sm font-medium
                                  text-gray-700">
                        Credits:
                    </label>
                    <input type="number" id="credits"
                           name="credits" min="1"
                           class="w-full border border-gray-300
                                  rounded-md py-2 px-3 
                                  focus:outline-none 
                                  focus:border-blue-500">
                </div>
                <button id="addCourse"
                        class="w-full bg-blue-500 text-white
                               rounded-md py-2 px-4 
                               hover:bg-blue-600 
                               focus:outline-none mb-4">
                  Add Course
                </button>
            </div>
            <div id="results" class="hidden">
                <hr class="my-6">
                <h2 class="text-xl font-semibold mb-4">
                    Course List
                </h2>
                <ul id="courseList" class="mb-4"></ul>
                <div class="flex justify-between 
                            items-center mb-4">
                    <span class="font-semibold">GPA:</span>
                    <span id="gpa"></span>
                </div>
                <button id="clear"
                        class="w-full bg-gray-300 
                               text-gray-700 rounded-md 
                               py-2 px-4 hover:bg-gray-400
                               focus:outline-none">
                      Clear
                  </button>
            </div>
        </div>
    </div>
    <script>
        const courseNameInput = document.getElementById('courseName');
        const gradeSelect = document.getElementById('grade');
        const creditsInput = document.getElementById('credits');
        const addCourseButton = document.getElementById('addCourse');
        const clearButton = document.getElementById('clear');
        const courseList = document.getElementById('courseList');
        const gpaDisplay = document.getElementById('gpa');
        const resultsSection = document.getElementById('results');
        addCourseButton.addEventListener('click', addCourse);
        clearButton.addEventListener('click', clearAll);
 
        function addCourse() {
            const courseName = courseNameInput.value;
            const grade = gradeSelect.value;
            const credits = parseInt(creditsInput.value);
            if (!courseName || !grade || isNaN(credits)) {
                alert('Please fill in all fields.');
                return;
            }
            const listItem = document.createElement('li');
            listItem.textContent = 
              `${courseName} - Grade: ${grade} - Credits: ${credits}`;
            courseList.appendChild(listItem);
            updateGPA();
            courseNameInput.value = '';
            gradeSelect.selectedIndex = 0;
            creditsInput.value = '';
        }
        function updateGPA() {
            const courses = courseList.children;
            let totalCredits = 0;
            let totalPoints = 0;
            for (let course of courses) {
                const credits = parseInt(course.textContent
                                                 .split('Credits: ')[1]);
                totalCredits += credits;
 
                const grade = course.textContent
                                    .split(' - ')[1]
                                    .split(' ')[1];
                totalPoints += getPointsForGrade(grade) * credits;
            }
            const gpa = totalPoints / totalCredits;
            gpaDisplay.textContent = gpa.toFixed(2);
 
            resultsSection.classList.remove('hidden');
        }
        function getPointsForGrade(grade) {
            switch (grade) {
                case 'A': return 4.0;
                case 'A-': return 3.7;
                case 'B+': return 3.3;
                case 'B': return 3.0;
                case 'B-': return 2.7;
                case 'C+': return 2.3;
                case 'C': return 2.0;
                case 'C-': return 1.7;
                case 'D+': return 1.3;
                case 'D': return 1.0;
                case 'F': return 0.0;
                default: return 0.0;
            }
        }
        function clearAll() {
            courseNameInput.value = '';
            gradeSelect.selectedIndex = 0;
            creditsInput.value = '';
            courseList.innerHTML = '';
            gpaDisplay.textContent = '';
            resultsSection.classList.add('hidden');
        }
    </script>
</body>
 
</html>