Added Remainder Calculator (#539)

Rakesh9100 · Feb 7, 2024 · f9035aa · f9035aa
1 parent 28a1a1e
commit f9035aa
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 0 deletions.
diff --git a/Calculators/Remainder-Calculator/README.md b/Calculators/Remainder-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">Remainder Calculator</p>
+
+## Description :-
+
+The Remainder Calculator is a new addition to the project, allowing users to input a dividend and divisor, and it returns both the remainder and quotient. This calculator is designed to handle various scenarios, including NaN conditions, division by zero (returns infinity), and division by zero resulting in a quotient of zero.
+
+## Features :-
+- Takes user input of dividend and divisor.
+- Calculates and displays the remainder and quotient.
+- Handles NaN conditions by alerting the user.
+- Handles division by zero, returning infinity.
+- Handles division by zero resulting in a quotient of zero.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/da0b9b71-8e18-4ae5-9461-a79e7f9d0192)
diff --git a/Calculators/Remainder-Calculator/index.html b/Calculators/Remainder-Calculator/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Quotient and Remainder Calculator</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+<div class="container">
+    <h1>Remainder Calculator</h1>
+    <input type="number" id="dividend" placeholder="Enter dividend"><br>
+    <input type="number" id="divisor" placeholder="Enter divisor"><br>
+    <button onclick="calculateQuotientAndRemainder()">Calculate</button>
+    <div id="result"></div>
+    <button onclick="clearResult()">Clear</button>
+</div>
+
+<script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Calculators/Remainder-Calculator/script.js b/Calculators/Remainder-Calculator/script.js
@@ -0,0 +1,26 @@
+function calculateQuotientAndRemainder() {
+    var dividend = document.getElementById("dividend").value;
+    var divisor = document.getElementById("divisor").value;
+
+    var dividendNumber = parseFloat(dividend);
+    var divisorNumber = parseFloat(divisor);
+
+    if ((isNaN(dividendNumber) || isNaN(divisorNumber)) || divisorNumber === 0){
+        alert("Please enter valid numeric values");
+        return;
+    }
+
+    var quotient = Math.floor(dividendNumber / divisorNumber);
+    var remainder = dividendNumber % divisorNumber;
+
+    document.getElementById("result").innerHTML = "Quotient: " + quotient + "<br> Remainder: " + remainder;
+}
+
+function clearResult() {
+    document.getElementById("result").innerHTML = "";
+    document.getElementById("dividend").value = "";
+    document.getElementById("divisor").value = "";
+}
+
+document.getElementById("calculate").onclick = calculateQuotientAndRemainder;
+document.getElementById("clear").onclick = clearResult;
diff --git a/Calculators/Remainder-Calculator/style.css b/Calculators/Remainder-Calculator/style.css
@@ -0,0 +1,58 @@
+body {
+    font-family: Arial, sans-serif;
+    background: linear-gradient(to top left, #28b487, #7dd56f);
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.container {
+    text-align: center;
+    min-width: 500px;
+    width: auto;
+    height: auto; 
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); 
+}
+
+h1 {
+    margin-bottom: 40px;
+    color: #28b487;
+}
+
+input[type="number"] {
+    width: calc(80% - 5px); 
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+
+button {
+    width: calc(50% - 5px);
+    padding: 10px;
+    background-color: #28b487;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease; 
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#result {
+    margin-top: 20px;
+}
+
+#clear {
+    margin-top: 10px;
+}
diff --git a/index.html b/index.html
@@ -1667,6 +1667,20 @@ <h3>Calculates the typing speed in two different units.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Remainder Calculator</h2>
+                <h3>Calculates the Quotient and Remainder.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Remainder-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Remainder-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  -->