Added Marks Percentage Calculator (#1304)

Rakesh9100 · Jun 14, 2024 · d2c9ede · d2c9ede
1 parent 663e8ae
commit d2c9ede
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 0 deletions.
diff --git a/Calculators/Marks-Percentage-Calculator/README.md b/Calculators/Marks-Percentage-Calculator/README.md
@@ -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 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/73993775/f9e6f6b4-d402-45a1-b0f6-e4a45e1d4910)
diff --git a/Calculators/Marks-Percentage-Calculator/index.html b/Calculators/Marks-Percentage-Calculator/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <title>Marks Percentage Calculator</title>
+</head>
+<body>
+    <div class="container mt-5">
+        <h3 class="text-center mb-4 title">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 no-spinners" 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>
+    </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>
+
+    <script src="script.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/Calculators/Marks-Percentage-Calculator/script.js b/Calculators/Marks-Percentage-Calculator/script.js
@@ -0,0 +1,36 @@
+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 no-spinners" 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';
+}
diff --git a/Calculators/Marks-Percentage-Calculator/style.css b/Calculators/Marks-Percentage-Calculator/style.css
@@ -0,0 +1,110 @@
+body {
+    background-color: #f0f8ff;
+    font-family: 'Arial', sans-serif;
+}
+
+.navbar {
+    background-color: #007bff;
+}
+
+.navbar-brand,
+.nav-link,
+.btn-outline-success {
+    color: #ffffff !important;
+    transition: color 0.3s ease-in-out;
+}
+
+.nav-link:hover {
+    color: #d4d4d4 !important;
+}
+
+.title {
+    color: #007bff;
+    font-size: 2.5rem;
+    font-weight: bold;
+    background: linear-gradient(90deg, #007bff, #0056b3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    animation: glow 1.5s infinite;
+}
+
+@keyframes glow {
+    0% {
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    }
+
+    50% {
+        text-shadow: 2px 2px 20px rgba(0, 91, 234, 0.7);
+    }
+
+    100% {
+        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+    }
+}
+
+.btn-primary,
+.btn-success {
+    background-color: #007bff;
+    border: none;
+    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
+}
+
+.btn-primary:hover,
+.btn-success:hover {
+    background-color: #0056b3;
+    transform: scale(1.05);
+}
+
+.btn-primary:active,
+.btn-success:active {
+    transform: scale(1);
+}
+
+.card {
+    border: 1px solid #007bff;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: box-shadow 0.3s ease-in-out;
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.form-control {
+    border: 1px solid #007bff;
+    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+}
+
+.form-control:focus {
+    border-color: #0056b3;
+    box-shadow: 0 0 8px rgba(0, 91, 234, 0.5);
+}
+
+.no-spinners {
+    -moz-appearance: textfield;
+}
+
+.no-spinners::-webkit-outer-spin-button,
+.no-spinners::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.card-title {
+    font-size: 1.25rem;
+    color: #0056b3;
+}
+
+.input-group .form-control {
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+
+.input-group .btn {
+    border-radius: 0 0.25rem 0.25rem 0;
+}
+
+#result {
+    font-size: 1.5rem;
+    color: #007bff;
+}
diff --git a/index.html b/index.html
@@ -1982,6 +1982,20 @@ <h3>Calculates if a number is a magic number and finds all magic numbers within
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Marks Percentage Calculator</h2>
+                <h3>Calculate the percentage of total marks from all subjects.</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>
         <div class="box">
             <div class="content">
                 <h2>Mass Calculator</h2>