Rakesh9100 · Rakesh9100 · Jun 11, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 11, 2024
diff --git a/Calculators/Fascinating-Number-Calculator/README.md b/Calculators/Fascinating-Number-Calculator/README.md
@@ -0,0 +1,29 @@
+# <p align="center">Fascinating Number Calculator</p>
+
+## Description :-
+
+This is a simple web application that allows users to check if a given number is a fascinating number or not. 
+A fascinating number is a positive number that contains all the digits from 1 to 9 exactly once and does not contain any 0's
+after concatenating the number(x) with the numbers 2 * x and 3 * x. 
+
+For example, the number 192 is fascinating because (192 * 2 = 384 and 192 * 3 = 576), and after concatenating it becomes (192384576) which contains all the digits from 1 to 9.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Users can input a number.
+- Upon clicking the "Check for Fascinating" button, the application checks whether the entered number is a fascinating number or not.
+- The result is displayed below the input field, indicating whether the number is fascinating or not.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/168436423/5081d315-b35b-4ba1-bef3-74fb5136221a)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/168436423/a27aa1a2-fc96-43e8-96d8-4bc44d478d1c)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/168436423/cda3d980-58d5-425f-9e1b-eaba94f15cc5)
diff --git a/Calculators/Fascinating-Number-Calculator/assets/background.jpeg b/Calculators/Fascinating-Number-Calculator/assets/background.jpeg
diff --git a/Calculators/Fascinating-Number-Calculator/index.html b/Calculators/Fascinating-Number-Calculator/index.html
@@ -0,0 +1,28 @@
+<!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>Fascinating Number Calculator</title>
+</head>
+
+<body>
+    <header>
+        <h1>Fascinating Number Checker Calculator</h1>
+    </header>
+    <main>
+        <div class="container">
+            <label for="no">Enter the Number between 100 to 999 : </label>
+            <input type="number" placeholder="Enter number(n)" class="number" required>
+            <button onclick="checkFascinating()">Check for Fascinating</button>
+            <h2 class="text"></h2>
+            <h3 class="showHow"></h3>
+
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Fascinating-Number-Calculator/script.js b/Calculators/Fascinating-Number-Calculator/script.js
@@ -0,0 +1,38 @@
+const checkFascinating = () => {
+    let n = document.querySelector(".number").value;
+    let txt = document.querySelector(".text");
+    let s = document.querySelector(".showHow");
+    if (n === "" || Number.isNaN(n) || n < 100 || n > 999) {
+        txt.textContent = ("Please enter a valid number between 100 and 999");
+        s.textContent = ``
+    }
+    else {
+        let n2 = 2 * n;
+        let n3 = 3 * n;
+        let newnum = '' + n + '' + n2 + '' + n3;
+        let result = newnum;
+        if (result.length > 9) {
+            txt.textContent = "${n} is not a Fascinating Number!";
+            s.textContent = ``
+        }
+        else {
+            result = result.split('').sort((a, b) => a - b).join('');
+            let flag = 0;
+            for (let i = 1; i <= 9; i++) {
+                if (result[i - 1] != i) {
+                    flag = 1;
+                    txt.textContent = `${n} is not a Fascinating Number!`;
+                    s.textContent = `PROOF: n = ${n},  2*n = ${2 * n}, 3*n = ${3 * n}  and after concatenating  n , 2*n , 3*n we get : ${newnum} which does not contain all the digit from 1 to 9`;
+
+                    break;
+                }
+            }
+            if (flag == 0) {
+                txt.textContent = `${n} is a Fascinating Number!`;
+                s.textContent = `PROOF: n = ${n}, 2 * n = ${2 * n}, 3 * n = ${3 * n}  and after concatenating  n, 2*n, 3*n we get : ${newnum} which contain all the digit from 1 to 9`;
+
+            }
+        }
+    }
+
+}
diff --git a/Calculators/Fascinating-Number-Calculator/style.css b/Calculators/Fascinating-Number-Calculator/style.css
@@ -0,0 +1,70 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: rgb(255, 177, 255);
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-image: url('assets/background.jpeg');
+    background-size: cover;
+    background-position: center;
+}
+
+h1 {
+    color: rgb(0, 104, 145);
+    margin-bottom: 40px;
+    font-weight: bold;
+}
+
+h2 {
+    color: #e74fd8;
+    margin-bottom: 40px;
+    font-weight: bold;
+}
+
+h3 {
+    color: rgb(39, 38, 38);
+    margin-bottom: 40px;
+    font-weight: bold;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    color: rgb(0, 140, 195);
+    font-weight: bold;
+    font-size: larger;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to right, #f9cad3, #bee8ff);
+    border-radius: 30px;
+    padding: 100px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border: #379df6;
+}
+
+label {
+    margin-bottom: 20px;
+}
+
+input {
+    padding: 8px;
+    margin-bottom: 20px;
+    width: 150px;
+    border: #67adea
+}
+
+button {
+    padding: 10px;
+    background-color: rgb(84, 189, 231);
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: medium;
+}
+
+button:hover {
+    background-color: #2797f9;
+}
diff --git a/index.html b/index.html
@@ -1212,6 +1212,20 @@ <h3>Calculates the factorial of any large number instantly.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Fascinating Number Calculator</h2>
+                <h3>Checks if a given number is fascinating or not.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Fascinating-Number-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fascinating-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>Fibonacci Calculator</h2>