-
Notifications
You must be signed in to change notification settings - Fork 396
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Marks-to-Percentage Calculator added
- Loading branch information
Showing
3 changed files
with
132 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
# <p align="center">Marks-Percentage-Calculator</p> | ||
|
||
## Description :- | ||
|
||
A Marks to Percentage Calculator is a tool designed to convert the marks obtained in various subjects into a percentage. It allows users to input the number of subjects and the marks obtained in each subject. The calculator then sums up the total marks and computes the average percentage based on the number of subjects. This tool is helpful for students and educators to easily determine academic performance and understand the overall achievement level in terms of percentage. | ||
|
||
## Tech Stacks :- | ||
|
||
- HTML | ||
- CSS | ||
- JavaScript | ||
- Bootstrap | ||
|
||
## Screenshots :- | ||
|
||
![image](https://github.com/Rakesh9100/CalcDiverse/assets/126322584/f183e0c3-fa80-4833-9d8b-1ecba4070403) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,102 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Percentage Calculator</title> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
</head> | ||
<body class="bg-light"> | ||
|
||
<nav class="navbar navbar-expand-lg navbar-body bg-body bg-dark"> | ||
<div class="container"> | ||
<a class="navbar-brand" href="#">CalcDiverse</a> | ||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | ||
<span class="navbar-toggler-icon"></span> | ||
</button> | ||
<div class="collapse navbar-collapse" id="navbarNav"> | ||
<ul class="navbar-nav"> | ||
<li class="nav-item"> | ||
<a class="nav-link active" aria-current="page" href="#">Home</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</nav> | ||
|
||
<div class="container mt-5"> | ||
<h3 class="text-center mb-4">Percentage Calculator</h3> | ||
|
||
<!-- Number of Subjects Form --> | ||
<div class="card mb-4"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Enter Number of Subjects</h5> | ||
<div class="input-group"> | ||
<input type="number" class="form-control" id="numSubjects" placeholder="Number of Subjects"> | ||
<button class="btn btn-primary" type="button" onclick="generateMarksInputs()">Submit</button> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- Marks Input Form --> | ||
<div class="card mb-4" id="marksForm" style="display: none;"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Enter Marks</h5> | ||
<form id="marksInputs"> | ||
<!-- Marks inputs will be dynamically generated here --> | ||
</form> | ||
<button class="btn btn-success mt-3" type="button" onclick="calculatePercentage()">Calculate Percentage</button> | ||
</div> | ||
</div> | ||
|
||
<!-- Result --> | ||
<div class="card" id="resultCard" style="display: none;margin-bottom:20px"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Result</h5> | ||
<p id="result" class="card-text"></p> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<script> | ||
function generateMarksInputs() { | ||
const numSubjects = document.getElementById('numSubjects').value; | ||
const marksForm = document.getElementById('marksInputs'); | ||
marksForm.innerHTML = ''; // Clear previous inputs | ||
|
||
if (numSubjects > 0) { | ||
for (let i = 1; i <= numSubjects; i++) { | ||
const formGroup = document.createElement('div'); | ||
formGroup.className = 'mb-3'; | ||
formGroup.innerHTML = ` | ||
<label for="subject${i}" class="form-label">Marks for Subject ${i}</label> | ||
<input type="number" class="form-control" id="subject${i}" placeholder="Enter marks"> | ||
`; | ||
marksForm.appendChild(formGroup); | ||
} | ||
document.getElementById('marksForm').style.display = 'block'; | ||
} else { | ||
document.getElementById('marksForm').style.display = 'none'; | ||
} | ||
} | ||
|
||
function calculatePercentage() { | ||
const numSubjects = document.getElementById('numSubjects').value; | ||
let totalMarks = 0; | ||
|
||
for (let i = 1; i <= numSubjects; i++) { | ||
const marks = parseFloat(document.getElementById(`subject${i}`).value); | ||
if (!isNaN(marks)) { | ||
totalMarks += marks; | ||
} | ||
} | ||
|
||
const percentage = totalMarks / numSubjects; | ||
document.getElementById('result').innerText = `Your percentage is ${percentage.toFixed(2)}%`; | ||
document.getElementById('resultCard').style.display = 'block'; | ||
} | ||
</script> | ||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters