Rakesh9100 · Rakesh9100 · Jun 10, 2024 · Jun 5, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/Calculators/Magic-Number-Calculator/README.md b/Calculators/Magic-Number-Calculator/README.md
@@ -0,0 +1,24 @@
+# Magic Number Calculator
+
+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.
+
+
+## Usage
+1. Choose an option from the drop-down menu:
+2. "Check if a number is a magic number"
+3. "Calculate magic numbers in a given range"
+4. Enter the required input (a single number or a range of numbers).
+5. Click the corresponding button to perform the calculation.
+6. View the results displayed below the input section.
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,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic Number Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</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>
+            <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,55 @@
+// script.js
+
+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) {
+    while (num >= 10) {
+        num = calculateDigitSum(num);
+    }
+    return num === 1;
+}
+
+function checkMagicNumber() {
+    const num = document.getElementById('number').value;
+    const resultDiv = document.getElementById('result');
+    if (num === "") {
+        resultDiv.textContent = "Please enter a number.";
+        return;
+    }
+    const isMagic = isMagicNumber(parseInt(num));
+    resultDiv.textContent = isMagic ? `${num} is a Magic Number!` : `${num} 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)) {
+            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,90 @@
+/* styles.css */
+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: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 100%;
+    max-width: 400px;
+    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: 10px;
+    border-radius: 4px;
+}
+
+input[type="number"] {
+    padding: 8px;
+    margin: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 100%;
+    max-width: 300px;
+}
+
+button {
+    padding: 8px 16px;
+    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;
+}
diff --git a/index.html b/index.html
@@ -1618,6 +1618,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>