From c91bafc1bcab89c67a9b55649a87838ff89a04c8 Mon Sep 17 00:00:00 2001 From: Atharv Verma <146646273+Atharvverma1234@users.noreply.github.com> Date: Sat, 14 Dec 2024 20:42:51 +0530 Subject: [PATCH] Added Factor Calculator (#1904) --- Calculators/Factor-Calculator/README.md | 21 +++ Calculators/Factor-Calculator/index.html | 22 +++ Calculators/Factor-Calculator/script.js | 25 ++++ Calculators/Factor-Calculator/style.css | 165 +++++++++++++++++++++++ index.html | 14 ++ 5 files changed, 247 insertions(+) create mode 100644 Calculators/Factor-Calculator/README.md create mode 100644 Calculators/Factor-Calculator/index.html create mode 100644 Calculators/Factor-Calculator/script.js create mode 100644 Calculators/Factor-Calculator/style.css diff --git a/Calculators/Factor-Calculator/README.md b/Calculators/Factor-Calculator/README.md new file mode 100644 index 000000000..cab2e6529 --- /dev/null +++ b/Calculators/Factor-Calculator/README.md @@ -0,0 +1,21 @@ +#

Factor Calculator

+ +## 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 new file mode 100644 index 000000000..e80672fb7 --- /dev/null +++ b/Calculators/Factor-Calculator/index.html @@ -0,0 +1,22 @@ + + + + + + Factor Calculator + + + +
+ +

Factor Calculator

+ + + + + +
+
+ + + \ No newline at end of file diff --git a/Calculators/Factor-Calculator/script.js b/Calculators/Factor-Calculator/script.js new file mode 100644 index 000000000..4fe146cbd --- /dev/null +++ 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}: ${factors.join(', ')}`; + resultDiv.style.display = 'block'; +} \ No newline at end of file diff --git a/Calculators/Factor-Calculator/style.css b/Calculators/Factor-Calculator/style.css new file mode 100644 index 000000000..5ef5838c3 --- /dev/null +++ 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%; + } + +} \ No newline at end of file diff --git a/index.html b/index.html index d176e47f0..ac3aff00e 100644 --- a/index.html +++ b/index.html @@ -2226,6 +2226,20 @@

Calculates the maturity amount and interest on fixed deposits.

+
+
+

Factor Calculator

+

Calculates all the factors/divisors of a given number.

+
+ + + + + Source Code + +
+
+

Factorial Calculator