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

Last Updated : 23 Jul, 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.

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>

Output:

How to create a Spy Number Checker Card using JavaScript and Tailwind CSS ?

subramanyasmgm

Improve

Article Tags :

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

Approach to create GPA Calculator Card:

Similar Reads

Thank You!

What kind of Experience do you want to share?