Rakesh9100 · Rakesh9100 · Feb 7, 2024 · Feb 6, 2024 · Feb 6, 2024 · Feb 6, 2024
diff --git a/Calculators/CGPA-Percentage-Calculator/README.md b/Calculators/CGPA-Percentage-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">CGPA ⟷ Percentage Calculator</p>
+
+## Description :-
+
+Quickly convert your CGPA to percentage and vice versa with the CGPA ⟷ Percentage Calculator. On the basis of formula `Percentage = CGPA * 7.1 + 11` and `CGPA = (Percentage - 11) / 7.1` this calculator will help you to convert your CGPA to percentage and vice versa.
+
+Start typing in any field and the value will be calculated automatically.
+
+## Tech Stacks :-
+- HTML
+- CSS
+- JavaScript
+
+## Screenshot :-
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/e33cfdae-2c31-4ff0-9964-82dffa5495e3)
diff --git a/Calculators/CGPA-Percentage-Calculator/index.html b/Calculators/CGPA-Percentage-Calculator/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>CGPA ⟷ Percentage | Calcdiverse</title>
+		<script src="./script.js"></script>
+		<link rel="stylesheet" href="style.css" />
+		<script src="https://cdn.tailwindcss.com"></script>
+		<script src="./script.js"></script>
+	</head>
+	<body>
+		<main
+			class="flex items-center justify-center h-screen bg-gradient-to-r from-green-400 to-blue-500"
+		>
+			<form class="w-full max-w-md bg-white rounded-lg shadow-xl p-8 space-y-6">
+				<div>
+					<h1 class="text-2xl font-bold text-center text-gray-700 mb-1">
+						CGPA ⟷ Percentage
+					</h1>
+					<h3 class="text-center mt-0 text-sm text-gray-400">
+						Start Typing In Any Field
+					</h3>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<label
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+						for="CGPA"
+						>CGPA</label
+					><input
+						class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+						id="cgpaInput"
+						placeholder="CGPA"
+						type="number"
+					/>
+				</div>
+				<div class="flex flex-col space-y-2">
+					<label
+						class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+						for="Percentage"
+						>Percentage</label
+					><input
+						class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+						id="percentageInput"
+						placeholder="Percentage"
+						type="number"
+					/>
+				</div>
+				<div id="error" class="text-red-300"></div>
+			</form>
+		</main>
+	</body>
+</html>
diff --git a/Calculators/CGPA-Percentage-Calculator/script.js b/Calculators/CGPA-Percentage-Calculator/script.js
@@ -0,0 +1,65 @@
+// functions to convert values
+function cgpaToPercentage(cgpa) {
+	return cgpa * 7.1 + 11
+}
+
+function percentageToCGPA(percentage) {
+	return (percentage - 11) / 7.1
+}
+
+// Function to handle conversion and display values
+function convertCGPAToPercentage() {
+	cleanError()
+	let cgpaInput = parseFloat(document.getElementById('cgpaInput').value)
+	if (!isNaN(cgpaInput) && cgpaInput >= 0 && cgpaInput <= 10) {
+		let percentage = cgpaToPercentage(cgpaInput).toFixed(2)
+		percentageInput.value = percentage
+	} else {
+		// resetting values
+		cgpaInput.value = null
+		percentageInput.value = null
+		showError('Invalid CGPA. Please enter a value between 0 and 10.')
+	}
+}
+
+function convertPercentageToCGPA() {
+	cleanError()
+	let percentageInput = parseFloat(
+		document.getElementById('percentageInput').value
+	)
+	if (
+		!isNaN(percentageInput) &&
+		percentageInput >= 0 &&
+		percentageInput <= 100
+	) {
+		let cgpa = percentageToCGPA(percentageInput).toFixed(2)
+		// for too low percentage cgpa goes negative
+		if (cgpa < 0) {
+			showError('Percentage too low')
+		} else {
+			cgpaInput.value = cgpa
+		}
+	} else {
+		// resetting values
+		cgpaInput.value = null
+		percentageInput.value = null
+		showError('Invalid Percentage. Please enter a value between 0 and 100.')
+	}
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+	let cgpaInput = document.getElementById('cgpaInput')
+	let percentageInput = document.getElementById('percentageInput')
+	cgpaInput.addEventListener('input', convertCGPAToPercentage)
+	percentageInput.addEventListener('input', convertPercentageToCGPA)
+})
+
+function showError(message) {
+	let error = document.getElementById('error')
+	error.innerHTML = message
+}
+
+function cleanError() {
+	let error = document.getElementById('error')
+	error.innerHTML = ''
+}
diff --git a/Calculators/CGPA-Percentage-Calculator/style.css b/Calculators/CGPA-Percentage-Calculator/style.css
@@ -0,0 +1,5 @@
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+	-webkit-appearance: none;
+	margin: 0;
+}
diff --git a/index.html b/index.html
@@ -1709,6 +1709,20 @@ <h3>Perfoms mathematical operations on complex numbers.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>CGPA Percentage Calculator</h2>
+                <h3>Converts CGPA to percentage and vice-versa.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/CGPA-Percentage-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/CGPA-Percentage-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Calculator Section Ends Here  -->