Added Ugly Number Calculator (#1233)

Rakesh9100 · Jun 11, 2024 · e792f79 · e792f79
1 parent 2cd87d9
commit e792f79
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 0 deletions.
diff --git a/Calculators/Ugly-Number-Calculator/README.md b/Calculators/Ugly-Number-Calculator/README.md
@@ -0,0 +1,27 @@
+# <p align="center">Ugly Number Calculator</p>
+
+## Description :-
+
+This is a simple web application that allows users to check if a given number is an ugly number or not. 
+An ugly number is a positive integer whose prime factors are limited to 2, 3, and 5. 
+For example, 6 is an ugly number as it has only 2 and 3 as the prime factors.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Users can input a number.
+- Upon clicking the "Check for ugly" button, the application checks whether the entered number is a ugly number or not.
+- The result is displayed below the input field, indicating whether the number is ugly or not.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/6ea60ded-e332-4bb9-ba51-9ebbf2a98ca2)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/c7537784-cd68-409b-886e-8b7f55c8027c)
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/f6640d14-12ab-455d-8f60-0f55e57b550c)
diff --git a/Calculators/Ugly-Number-Calculator/assets/background.avif b/Calculators/Ugly-Number-Calculator/assets/background.avif
diff --git a/Calculators/Ugly-Number-Calculator/index.html b/Calculators/Ugly-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>Ugly Number Calculator</title>
+</head>
+
+<body>
+    <header>
+        <h1>Ugly Number Checker Calculator</h1>
+    </header>
+    <main>
+        <div class="container">
+            <label for="no">Enter the Number : </label>
+            <input type="number" placeholder="Enter number(n)" class="number" required>
+            <button onclick="checkUgly()">Check for Ugly</button>
+            <h2 class="text"></h2>
+            <h3 class="showHow"></h3>
+
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Ugly-Number-Calculator/script.js b/Calculators/Ugly-Number-Calculator/script.js
@@ -0,0 +1,64 @@
+// to check if a number is Ugly or not :
+const checkUgly = () => {
+    let n = document.querySelector(".number").value;
+    let txt = document.querySelector(".text");
+    let how = document.querySelector(".showHow");
+    let p = n;
+    if (n === "" || Number.isNaN(n)) {
+        txt.textContent = `Please enter a number!!`;
+        how.textContent = ``
+    }
+    else {
+        if (n <= 0) {
+            txt.textContent = ("Please enter a valid number");
+            how.textContent = ``;
+        }
+        else {
+            let flag = 0;
+            while (n != 1) {
+                if (n % 2 === 0) {
+                    n /= 2
+                } else if (n % 3 === 0) {
+                    n /= 3
+                } else if (n % 5 === 0) {
+                    n /= 5
+                } else {
+                    flag = 1;
+                    txt.textContent = (`${p} is not an Ugly Number!`);
+
+                    how.textContent = (`Proof: (${((prime_factors(p).join(", ")))}): are distinct prime factors of ${p} which does not belong from prime numbers (2, 3, 5) `);
+                    break;
+                }
+            }
+
+            if (flag == 0) {
+                txt.textContent = (`${p} is an Ugly Number!`);
+                how.textContent = (`Proof: (${((prime_factors(p).join(", ")))}): are distinct prime factors of ${p} which belong from prime numbers (2, 3, 5)`);
+            }
+        }
+
+    }
+}
+
+// Function to get all distinct prime factors of a number :
+function prime_factors(num) {
+    // Function to check if a number is prime
+    function is_prime(num) {
+        for (let i = 2; i <= Math.sqrt(num); i++) {
+            if (num % i === 0) return false;
+        }
+        return true;
+    }
+
+    const result = []; // Initialize an empty array to store prime factors
+
+    for (let i = 2; i <= num; i++) {
+
+        while (is_prime(i) && num % i === 0) {
+            if (!result.includes(i)) result.push(i); // Add 'i' to the result array if it's not already present
+            num /= i;
+        }
+    }
+
+    return result; // Return the array containing prime factors
+}
diff --git a/Calculators/Ugly-Number-Calculator/style.css b/Calculators/Ugly-Number-Calculator/style.css
@@ -0,0 +1,73 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url('assets/background.avif');
+    background-size: cover;
+    background-position: center;
+    background-color: rgb(158, 27, 158);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+header {
+    color: rgb(255, 255, 255);
+    margin-bottom: 40px;
+    font-weight: bold;
+    font-size: large;
+    text-decoration: underline;
+    text-decoration-color: rgb(255, 255, 255);
+}
+
+h2 {
+    color: #12015d;
+    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(195, 0, 143);
+    font-weight: bold;
+    font-size: larger;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(to right, #f84b6a, #39afef);
+    border-radius: 30px;
+    padding: 100px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border: #379df6;
+}
+
+label {
+    margin-bottom: 20px;
+    color: #9b016d;
+}
+
+input {
+    padding: 8px;
+    margin-bottom: 20px;
+    width: 150px;
+    border: #b3f32b
+}
+
+button {
+    padding: 10px;
+    background-color: rgb(249, 50, 196);
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: medium;
+}
+
+button:hover {
+    background-color: #c518fa;
+}
diff --git a/index.html b/index.html
@@ -2990,6 +2990,20 @@ <h3>Calculates the typing speed in two different units.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Ugly Number Calculator</h2>
+                <h3>Checks if a number is ugly number or not.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Ugly-Number-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Ugly-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>Unit Calculator</h2>