Added Factor Calculator (#1904)

Rakesh9100 · Dec 14, 2024 · c91bafc · c91bafc
1 parent ad2acfa
commit c91bafc
Show file tree

Hide file tree

Showing 5 changed files with 247 additions and 0 deletions.
diff --git a/Calculators/Factor-Calculator/README.md b/Calculators/Factor-Calculator/README.md
@@ -0,0 +1,21 @@
+# <p align="center">Factor Calculator</p>
+
+## Description :-
+
+The Factor Calculator is a simple and interactive web application designed to calculate all the factors of a given number. With a clean and user-friendly interface, it allows users to quickly input a number and view its factors in a visually appealing format.
+
+## Tech Stacks :-
+
+- HTML 
+- CSS 
+- JavaScript
+
+## Features :-
+
+- The application dynamically calculates the factors of the input number and displays the results instantly without requiring page reloads.
+- Displays meaningful error messages for invalid or missing inputs.
+- Aesthetic layout styled with CSS to provide a visually engaging experience.
+
+## Screenshots :-
+
+![image](https://github.com/user-attachments/assets/1795f05f-c5b3-429c-b819-ec3938da711c)
diff --git a/Calculators/Factor-Calculator/index.html b/Calculators/Factor-Calculator/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Factor Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Title of the application -->
+        <h1>Factor Calculator</h1>
+        <!-- Input field for the user to enter a number -->
+        <input type="number" id="number" placeholder="Enter a number" />
+        <!-- Button to trigger the factor calculation -->
+        <button onclick="calculateFactors()">Calculate Factors</button>
+        <!-- Div to display the calculation results -->
+        <div class="result" id="result"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Factor-Calculator/script.js b/Calculators/Factor-Calculator/script.js
@@ -0,0 +1,25 @@
+function calculateFactors() {
+    // Retrieve the input value and parse it as an integer
+    const number = parseInt(document.getElementById('number').value);
+    // Get a reference to the result display div
+    const resultDiv = document.getElementById('result');
+
+    // Validate the input: check if it's a number and greater than 0
+    if (isNaN(number) || number <= 0) {
+        resultDiv.innerHTML = 'Please enter a positive number.';
+        resultDiv.style.display = 'block';
+        return;
+    }
+
+    let factors = [];
+    // Loop through numbers from 1 to the input number
+    for (let i = 1; i <= number; i++) {
+        if (number % i === 0) {
+            factors.push(i);
+        }
+    }
+
+    // Display the list of factors in the result div
+    resultDiv.innerHTML = `Factors of ${number}: <strong>${factors.join(', ')}</strong>`;
+    resultDiv.style.display = 'block';
+}
diff --git a/Calculators/Factor-Calculator/style.css b/Calculators/Factor-Calculator/style.css
@@ -0,0 +1,165 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(120deg, #1e3c72, #2a5298, #6dd5ed);
+    background-size: 200% 200%;
+    animation: backgroundShift 12s ease-in-out infinite;
+    color: white;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.container {
+    height: 400px;
+    width: 400px;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.4);
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: #1c1b29;
+    text-align: center;
+    position: relative;
+    display: flex; /* Added */
+    justify-content: center; /* Centers horizontally */
+    align-items: center; /* Centers vertically */
+    flex-direction: column; /* Stack elements vertically */
+}
+
+.container::before {
+    content: "";
+    background-image: conic-gradient(
+        #ff6b6b, #ffcc70, #1dd1a1, #54a0ff, #ff6b6b
+    );
+    height: 150%;
+    width: 150%;
+    position: absolute;
+    left: -25%;
+    top: -25%;
+    animation: rotate 3s infinite linear;
+}
+
+.container::after {
+    content: '';
+    height: 94%;
+    width: 94%;
+    position: absolute;
+    background-color: #1c1b29;
+    border-radius: 10px;
+    top: 3%;
+    left: 3%;
+    color: #ffffff;
+    display: grid;
+    place-items: center;
+    font-size: 20px;
+    letter-spacing: 6px;
+    box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.2);
+}
+
+h1 {
+    background: radial-gradient(circle, rgb(0, 149, 255),white);
+    background-clip: text;
+    margin-bottom: 20px;
+    position: relative;
+    z-index: 1;
+    font-size: 35px;
+    color: transparent;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+    animation:  gemini 15s linear infinite;
+    background-size: 200% 200%;
+}
+
+input {
+    width: 85%;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    outline: none;
+    position: relative;
+    z-index: 1;
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    font-size: 16px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: box-shadow 0.3s;
+}
+
+input:focus {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 10px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    background: linear-gradient(45deg, #ff6f61, #f6416c);
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.3s ease, background 0.3s;
+    position: relative;
+    z-index: 1;
+    font-size: 17px;
+}
+
+button:hover {
+    background: linear-gradient(45deg, #f6416c, #ff6f61);
+    transform: scale(1.1);
+}
+
+.result {
+    margin-top: 30px;
+    margin-left: 20px;
+    margin-right: 20px;
+    padding: 10px;
+    background: rgba(16, 0, 0, 0.2);
+    border-radius: 10px;
+    display: none;
+    position: relative;
+    z-index: 1;
+    color: #ffffff;
+    font-size: 18px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(-360deg);
+    }
+}
+
+@keyframes backgroundShift {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+@keyframes gemini {
+    0%{
+        background-position: 0% 0%;
+    }
+    50%{
+        background-position: 100% 100%;
+    }
+    100%{
+        background-position: 0% 0%;
+    }
+
+}
diff --git a/index.html b/index.html
@@ -2226,6 +2226,20 @@ <h3>Calculates the maturity amount and interest on fixed deposits.</h3>
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Factor Calculator</h2>
+                <h3>Calculates all the factors/divisors of a given number.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Factor-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Factor-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>Factorial Calculator</h2>