Skip to content

Commit

Permalink
Marks-to-Percentage Calculator added
Browse files Browse the repository at this point in the history
  • Loading branch information
zalabhavy committed Jun 11, 2024
1 parent 1460e04 commit 0727b3e
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 0 deletions.
16 changes: 16 additions & 0 deletions Calculators/Marks-Percentage-Calculator/README.md
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)
102 changes: 102 additions & 0 deletions Calculators/Marks-Percentage-Calculator/index.html
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>
14 changes: 14 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3186,6 +3186,20 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
</div>
</div>
</div>
<div class="box">
<div class="content">
<h2>Marks-Percentage-Calculator</h2>
<h3>Calculates Percentage from all subjects marks.</h3>
<div class="card-footer">
<a href="./Calculators/Marks-Percentage-Calculator/index.html" target="_blank">
<button>Try Now</button>
</a>
<a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Marks-Percentage-Calculator" title="Source Code" target="_blank">
<img src="./assets/images/github.png" alt="Source Code"></img>
</a>
</div>
</div>
</div>

<br><br><br><br><br>
<div id="noResults" style="color: white; font-weight: bold; font-size: 18px;"><p>No results found 🙃</p></div>
Expand Down

0 comments on commit 0727b3e

Please sign in to comment.