Added Magic Number Calculator (#1192)

Rakesh9100 · Jun 10, 2024 · d6baa2d · d6baa2d
1 parent ffbf665
commit d6baa2d
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 0 deletions.
diff --git a/Calculators/Magic-Number-Calculator/README.md b/Calculators/Magic-Number-Calculator/README.md
@@ -0,0 +1,26 @@
+# <p align="center">Magic Number Calculator</p>
+
+## Description :-
+
+The Magic Number Calculator is a web application that allows users to check if a number is a magic number or to find all magic numbers within a given range. A magic number is a number that eventually becomes 1 when the sum of its digits is repeatedly calculated until a single digit is obtained.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Check if a single number is a magic number.
+- Calculate and display all magic numbers within a given range.
+- User-friendly interface with a drop-down menu for selecting options.
+- Responsive design with a background image and enhanced styling.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/82d40074-0386-41db-a97b-b619b1226ae8)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/6db5658f-ab1b-4400-8170-316063e02ba3)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/017d8e80-ba5c-4fe8-b4ff-464617d29805)
diff --git a/Calculators/Magic-Number-Calculator/assets/background.webp b/Calculators/Magic-Number-Calculator/assets/background.webp
diff --git a/Calculators/Magic-Number-Calculator/index.html b/Calculators/Magic-Number-Calculator/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Magic Number Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Magic Number Calculator</h1>
+        <div class="option-section">
+            <label for="option-select">Choose an option:</label>
+            <select id="option-select" onchange="handleOptionChange()">
+                <option value="none">Select an option</option>
+                <option value="single">Check if a number is a magic number</option>
+                <option value="range">Calculate magic numbers in a given range</option>
+            </select>
+        </div>
+        <div class="response-section">
+            <div class="input-section" id="single-number-section" style="display: none;">
+                <label for="number">Enter a number:</label>
+                <input type="number" id="number" placeholder="Enter number">
+                <button onclick="checkMagicNumber()">Check</button>
+                <div id="result"></div>
+                <div id="steps"></div>
+            </div>
+            <div class="range-section" id="range-section" style="display: none;">
+                <label for="start">Start of range:</label>
+                <input type="number" id="start" placeholder="Start">
+                <br>
+                <label for="end">End of range:</label>
+                <input type="number" id="end" placeholder="End">
+                <button onclick="findMagicNumbersInRange()">Find Magic Numbers</button>
+                <div id="range-result"></div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Magic-Number-Calculator/script.js b/Calculators/Magic-Number-Calculator/script.js
@@ -0,0 +1,63 @@
+function handleOptionChange() {
+    const option = document.getElementById('option-select').value;
+    document.getElementById('single-number-section').style.display = option === "single" ? 'block' : 'none';
+    document.getElementById('range-section').style.display = option === "range" ? 'block' : 'none';
+}
+
+function calculateDigitSum(num) {
+    let sum = 0;
+    while (num > 0) {
+        sum += num % 10;
+        num = Math.floor(num / 10);
+    }
+    return sum;
+}
+
+function isMagicNumber(num) {
+    let steps = [];
+    while (num >= 10) {
+        let currentNum = num;
+        let digitSum = calculateDigitSum(num);
+        steps.push(`${currentNum} → ${currentNum.toString().split('').join(' + ')} = ${digitSum}`);
+        num = digitSum;
+    }
+    if(num>10)
+    steps.push(`${num}`);
+    return { isMagic: num === 1, steps: steps };
+}
+
+function checkMagicNumber() {
+    const num = document.getElementById('number').value;
+    const resultDiv = document.getElementById('result');
+    const stepsDiv = document.getElementById('steps');
+    if (num === "") {
+        resultDiv.textContent = "Please enter a number.";
+        stepsDiv.textContent = "";
+        return;
+    }
+    const { isMagic, steps } = isMagicNumber(parseInt(num));
+    resultDiv.textContent = isMagic ? `${num} is a Magic Number!` : `${num} is not a Magic Number.`;
+    stepsDiv.innerHTML = `Steps: <br>${steps.join(' <br>')} <br> The recursive sum ${isMagic ? 'adds' : "doesn't add"} to 1. <br> So, the number ${isMagic ? 'is' : "is not "} a magic number`;
+
+}
+
+function findMagicNumbersInRange() {
+    const start = parseInt(document.getElementById('start').value);
+    const end = parseInt(document.getElementById('end').value);
+    const rangeResultDiv = document.getElementById('range-result');
+    if (isNaN(start) || isNaN(end) || start > end) {
+        rangeResultDiv.textContent = "Please enter a valid range.";
+        return;
+    }
+
+    let magicNumbers = [];
+    for (let i = start; i <= end; i++) {
+        if (isMagicNumber(i).isMagic) {
+            magicNumbers.push(i);
+        }
+    }
+
+    rangeResultDiv.textContent = magicNumbers.length > 0 ?
+        `Magic Numbers in range ${start} to ${end}: ${magicNumbers.join(", ")}` :
+        `No Magic Numbers found in the range ${start} to ${end}.`;
+}
diff --git a/Calculators/Magic-Number-Calculator/style.css b/Calculators/Magic-Number-Calculator/style.css
@@ -0,0 +1,105 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: url('assets/background.webp') no-repeat center center fixed;
+    background-size: cover;
+    margin: 0;
+}
+
+.container {
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    text-align: center;
+    width: 100%;
+    max-width: 600px;
+    border: 2px solid #ccc;
+}
+
+h1 {
+    margin-top: 0;
+    transition: color 0.3s ease;
+}
+
+h1:hover {
+    color: #007BFF;
+}
+
+.option-section {
+    margin: 20px 0;
+}
+
+.option-section label {
+    font-weight: bold;
+}
+
+.option-section select {
+    padding: 10px;
+    margin: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 300px;
+}
+
+.response-section {
+    margin-top: 20px;
+    border-top: 1px solid #ccc;
+    padding-top: 20px;
+}
+
+.input-section, .range-section {
+    display: none;
+    border: 1px solid #ccc;
+    padding: 20px;
+    border-radius: 4px;
+    background-color: #f9f9f9;
+    margin-top: 20px;
+}
+
+input[type="number"] {
+    padding: 10px;
+    margin: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 300px;
+}
+
+button {
+    padding: 10px 20px;
+    margin-top: 10px;
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
+
+#result, #range-result {
+    margin-top: 20px;
+    font-weight: bold;
+    word-wrap: break-word;
+}
+
+#steps {
+    margin-top: 20px;
+    text-align: left;
+    font-size: 16px;
+    padding: 10px;
+    background-color: #e9ecef;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+}
+
+#steps br {
+    margin-bottom: 10px;
+}
diff --git a/index.html b/index.html
@@ -1674,6 +1674,20 @@ <h3>Calculates a percentage score of love compatibility based on names or birthd
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Magic Number Calculator</h2>
+                <h3>Calculates if a number is a magic number and finds all magic numbers within a given range.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Magic-Number-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Magic-Number-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>