Skip to content

Commit

Permalink
Added CGPA Percentage Calculator (#564)
Browse files Browse the repository at this point in the history
  • Loading branch information
snehilshah authored Feb 7, 2024
1 parent b2ec056 commit 6f3aa8d
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 0 deletions.
15 changes: 15 additions & 0 deletions Calculators/CGPA-Percentage-Calculator/README.md
Original file line number Diff line number Diff line change
@@ -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)
51 changes: 51 additions & 0 deletions Calculators/CGPA-Percentage-Calculator/index.html
Original file line number Diff line number Diff line change
@@ -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>
65 changes: 65 additions & 0 deletions Calculators/CGPA-Percentage-Calculator/script.js
Original file line number Diff line number Diff line change
@@ -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 = ''
}
5 changes: 5 additions & 0 deletions Calculators/CGPA-Percentage-Calculator/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down

0 comments on commit 6f3aa8d

Please sign in to comment.