Rakesh9100 · Rakesh9100 · Feb 25, 2024 · Feb 24, 2024 · Feb 25, 2024 · Feb 25, 2024
diff --git a/Calculators/Happy-Number-Calculator/README.md b/Calculators/Happy-Number-Calculator/README.md
@@ -0,0 +1,27 @@
+# <p align="center">Happy Number Calculator</p>
+
+## Description :-
+
+The Happy Number Calculator is a web application designed to check whether a given number is a happy number or not. It also provides the ability to find happy numbers within a specified range.
+
+## What is a Happy Number?
+
+A happy number is a positive integer that, when replaced by the sum of the square of its digits repeatedly, eventually leads to the number 1. If the process results in an endless cycle containing the number 4, then the number is considered an unhappy number.
+
+For example, the number 19 is a happy number:
+1^2 + 9^2 = 82
+8^2 + 2^2 = 68
+6^2 + 8^2 = 100
+1^2 + 0^2 + 0^2 = 1
+
+## Tech Stacks:-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/bf62ba25-dfd8-4204-8dd8-e25f1e350527)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/ad540815-ad43-49a8-8d2c-f2b09fe20bbb)
diff --git a/Calculators/Happy-Number-Calculator/index.html b/Calculators/Happy-Number-Calculator/index.html
@@ -0,0 +1,74 @@
+<!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>Happy Number Calculator</title>
+</head>
+
+<body>
+
+    <h1 class="title">Happy Number Calculator</h1>
+
+    <div class="information" >
+        <h2>What is a Happy Number?</h2>
+        <p>
+            A happy number is a positive integer that, when replaced by the sum of the squares of its digits repeatedly, eventually reaches the number 1.
+            If this process results in an endless cycle containing the number 4, then the number is called an unhappy number.
+        </p>
+
+        <h2>Definition:</h2>
+        <p>
+            A number is called a happy number if, after replacing the number by the sum of the squares of its digits, the process is repeated until the number becomes 1.
+        </p>
+
+        <h2>Example:</h2>
+        <p>
+            For example, the number 32 is a happy number because the process yields 1 as follows:
+            <br> \(3^2 + 2^2 = 13\)
+            <br> \(1^2 + 3^2 = 10\)
+            <br> \(1^2 + 0^2 = 1\)
+        </p>
+
+
+
+        <h2>Formula:</h2>
+        <p>
+            Let \(n\) be the original number, and \(d_1, d_2, ..., d_k\) be its digits. The sum of the squares of its digits is given by:
+            <br> \(n = d_1^2 + d_2^2 + ... + d_k^2\)
+        </p>
+
+        <h2>Solution Process:</h2>
+        <p>
+                 1. Start with a positive integer.
+            <br> 2. Replace the number by the sum of the squares of its digits.
+            <br> 3. Repeat the process until the number becomes 1 (happy) or an endless cycle containing 4 (unhappy).
+        </p>
+    </div>
+
+    <div class="calculator">
+        <div class="section">
+            <p class="calculator-title">Check Single Happy Number</p>
+            <label for="number">Enter a number:</label>
+            <input type="number" id="number" placeholder="Enter a number">
+            <button onclick="checkHappyNumber()">Check</button>
+            <p id="resultSingle"></p>
+        </div>
+
+        <div class="section">
+            <p class="calculator-title">Check Happy Numbers in Range</p>
+            <label for="fromRange">From:</label>
+            <input type="number" id="fromRange" placeholder="Enter from number">
+            <label for="toRange">To:</label>
+            <input type="number" id="toRange" placeholder="Enter to number">
+            <button onclick="checkHappyNumbersInRange()">Check</button>
+            <p id="rangeResult"></p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Happy-Number-Calculator/script.js b/Calculators/Happy-Number-Calculator/script.js
@@ -0,0 +1,68 @@
+function isHappyNumber(num) {
+    let seen = new Set();
+    while (num !== 1 && !seen.has(num)) {
+        seen.add(num);
+        num = sumOfSquares(num);
+    }
+    return num === 1;
+}
+
+function sumOfSquares(num) {
+    return num.toString().split('').reduce((sum, digit) => sum + Math.pow(parseInt(digit), 2), 0);
+}
+
+function getHappyExplanation(num) {
+    let explanation = `Starting with ${num}, replace it by the sum of the squares of its digits repeatedly: `;
+    let sequence = [num];
+
+    while (num !== 1) {
+        num = sumOfSquares(num);
+        sequence.push(num);
+    }
+
+    explanation += sequence.join(' -> ') + '. This process leads to 1, making it a Happy Number.';
+    return explanation;
+}
+
+function checkHappyNumber() {
+    let number = document.getElementById('number').value;
+
+    if (!validateInput(number)) {
+        alert('Please enter a valid positive integer.');
+        return;
+    }
+
+    let result = isHappyNumber(parseInt(number));
+    let explanation = result ? getHappyExplanation(parseInt(number)) : '';
+    let message = result ? `${number} is a Happy Number.` : `${number} is not a Happy Number.`;
+
+    document.getElementById('resultSingle').innerHTML = `<span class="${result ? 'happy-number-result' : 'not-happy-number-result'}">${message}<br>${explanation}</span>`;
+}
+
+function checkHappyNumbersInRange() {
+    let fromRange = parseInt(document.getElementById('fromRange').value);
+    let toRange = parseInt(document.getElementById('toRange').value);
+
+    if (isNaN(fromRange) || isNaN(toRange) || fromRange >= toRange) {
+        alert('Please enter valid range values.');
+        return;
+    }
+
+    let happyNumbers = [];
+
+    for (let i = fromRange; i <= toRange; i++) {
+        if (isHappyNumber(i)) {
+            happyNumbers.push(i);
+        }
+    }
+
+    if (happyNumbers.length > 0) {
+        document.getElementById('rangeResult').innerHTML = `<span class="happy-number-result">Happy Numbers in the range ${fromRange} to ${toRange}: ${happyNumbers.join(', ')}</span>`;
+    } else {
+        document.getElementById('rangeResult').innerHTML = `There are no Happy Numbers in the range ${fromRange} to ${toRange}.`;
+    }
+}
+
+function validateInput(number) {
+    return /^(0|[1-9]\d*)$/.test(number);
+}
diff --git a/Calculators/Happy-Number-Calculator/style.css b/Calculators/Happy-Number-Calculator/style.css
@@ -0,0 +1,100 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(135deg, #3498DB, #2ECC71);
+    color: #fff;
+}
+
+.calculator {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+    margin: 50px auto;
+    max-width: 900px;
+}
+
+.section {
+    width: 45%;
+    padding: 20px;
+    box-sizing: border-box;
+    background: linear-gradient(45deg, #1E2A39, #394A5E);
+    border: 1px solid #00f;
+    border-radius: 15px;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
+    margin-bottom: 20px;
+    animation: fadeIn 1s ease-in-out;
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+input {
+    padding: 10px;
+    font-size: 16px;
+    margin-top: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: #fff;
+    border: none;
+    border-radius: 5px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #E74C3C;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    margin-top: 10px;
+    transition: background-color 0.3s, box-shadow 0.3s;
+}
+
+button:hover {
+    background-color: #C0392B;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
+}
+
+p {
+    font-size: 18px;
+    margin-top: 20px;
+    color: #fff;
+}
+
+.title {
+    padding: 20px;
+    margin: 0;
+    font-size: 36px;
+    font-weight: 900;
+    color: #FFC300;
+    transition: color 0.3s, transform 0.3s;
+}
+
+.title:hover {
+    color: #E74C3C;
+}
+
+.calculator-title {
+    color: #2ECC71;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 15px;
+}
+
+.information{
+    width: 800px;
+    margin: 0 auto;
+    text-align: justify;
+    border: 2px solid gray;
+    border-radius: 15px;
+    padding: 10px;
+}
+
+h2 {
+    color:  red;
+}
diff --git a/index.html b/index.html
@@ -1897,6 +1897,20 @@ <h3>Checks if a number is cuban prime or not and finds cuban prime numbers in a
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Happy Number Calculator</h2>
+                <h3>Check if a number is Happy or not and finds happy number in a range.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Happy-Number-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Happy-Number-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  -->