How to create GPA Calculator Card using JavaScript and Tailwind CSS ? Last Updated : 23 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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.PreviewApproach 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> Output: Comment More infoAdvertise with us Next Article How to create NPV Calculator Card using JavaScript & Tailwind CSS ? S subramanyasmgm Follow Improve Article Tags : JavaScript Similar Reads How to create Calculator Card using Tailwind CSS & JavaScript ? In this article, we'll create a Basic Calculator using the Tailwind CSS and JavaScript. The application allows users to input any numerical data and give the calculated result. We'll utilize Tailwind CSS for styling to create an attractive user interface and JavaScript for the logic. Approach to cre 3 min read How to create NPV Calculator Card using JavaScript & Tailwind CSS ? A Net Present Value (NPV) Calculator is a web-based tool that helps users calculate the net present value of an investment. It typically includes input fields for the initial investment amount, the discount rate, and the expected cash flows. The calculator then calculates the NPV based on these inpu 3 min read EMI Calculator Card using Tailwind CSS and JavaScript An EMI (Equated Monthly Installment) calculator helps users determine the monthly payment amount towards a loan including both the principal amount and the interest. This project will demonstrate how to create a simple yet effective financial tool using the Tailwind CSS framework. Approach to create 3 min read Factorial Calculator Card using Tailwind CSS and JavaScript The Factorial Calculator is a web application designed to calculate the factorial of a non-negative integer entered by the user and instantly compute its factorial upon a button click. If the user wants to start over, they can utilize the "Clear" button. Its design and user-friendly features ensure 3 min read Tip Calculator Card using Tailwind CSS & JavaScript Tip Calculator in Tailwind CSS is a simple and user-friendly tool designed to help users calculate tips for various services. It allows users to input the total bill amount, select a tip percentage, and choose the number of people splitting the bill. The calculator then displays the tip amount, the 3 min read BMI Calculator Card using Tailwind CSS & JavaScript The Body Mass Index (BMI) Calculator can be used to calculate BMI values based on height and weight. BMI is a fairly reliable indicator of body fatness for most people. In this article, we will implement a BMI (Body Mass Index) Calculator using JavaScript with Tailwind CSS framework. Formula to calc 3 min read Like