From 5e95e69f88b8d64f3d60d05b4d0409556ede26d9 Mon Sep 17 00:00:00 2001 From: Atharvverma1234 Date: Thu, 12 Dec 2024 14:45:59 +0530 Subject: [PATCH 1/3] Successfully Added a Factor Calculator to CalcDiverse --- Calculators/Factor-Calculator/README.md | 21 +++ Calculators/Factor-Calculator/index.html | 17 ++ Calculators/Factor-Calculator/script.js | 20 +++ Calculators/Factor-Calculator/style.css | 165 ++++++++++++++++++ Calculators/Zodiac-Sign-Calculator/index.html | 1 + index.html | 15 ++ 6 files changed, 239 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..aa742e84b --- /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 :- + + diff --git a/Calculators/Factor-Calculator/index.html b/Calculators/Factor-Calculator/index.html new file mode 100644 index 000000000..3a28db65b --- /dev/null +++ b/Calculators/Factor-Calculator/index.html @@ -0,0 +1,17 @@ + + + + + Factor Calculator + + + +
+

Factor Calculator

+ + +
+
+ + + diff --git a/Calculators/Factor-Calculator/script.js b/Calculators/Factor-Calculator/script.js new file mode 100644 index 000000000..0a2b5eb5e --- /dev/null +++ b/Calculators/Factor-Calculator/script.js @@ -0,0 +1,20 @@ +function calculateFactors() { + const number = parseInt(document.getElementById('number').value); + const resultDiv = document.getElementById('result'); + + if (isNaN(number) || number <= 0) { + resultDiv.innerHTML = 'Please enter a positive number.'; + resultDiv.style.display = 'block'; + return; + } + + let factors = []; + for (let i = 1; i <= number; i++) { + if (number % i === 0) { + factors.push(i); + } + } + + 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/Calculators/Zodiac-Sign-Calculator/index.html b/Calculators/Zodiac-Sign-Calculator/index.html index 26a5e7f1e..df4527038 100644 --- a/Calculators/Zodiac-Sign-Calculator/index.html +++ b/Calculators/Zodiac-Sign-Calculator/index.html @@ -1,3 +1,4 @@ + diff --git a/index.html b/index.html index 29e1ad9d9..5e099181a 100644 --- a/index.html +++ b/index.html @@ -126,6 +126,7 @@

Search Calculator


+

2D Distance Calculator

@@ -5977,6 +5978,20 @@

Provides the user's zodiac sign by taking the date of birth as input.

+
+
+

Factor Calculator

+

Calculates all the factors/divisors of a given number

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





From cacf0576ce887c96b6f6e32ac8d75f15b9f134ac Mon Sep 17 00:00:00 2001 From: Atharvverma1234 Date: Thu, 12 Dec 2024 14:57:19 +0530 Subject: [PATCH 2/3] Added a Factor Calculator to CalcDiverse --- Calculators/Factor-Calculator/README.md | 21 +++ Calculators/Factor-Calculator/index.html | 21 +++ Calculators/Factor-Calculator/script.js | 25 +++ Calculators/Factor-Calculator/style.css | 165 ++++++++++++++++++ Calculators/Zodiac-Sign-Calculator/index.html | 1 + index.html | 15 ++ 6 files changed, 248 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..aa742e84b --- /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 :- + + diff --git a/Calculators/Factor-Calculator/index.html b/Calculators/Factor-Calculator/index.html new file mode 100644 index 000000000..d38a84108 --- /dev/null +++ b/Calculators/Factor-Calculator/index.html @@ -0,0 +1,21 @@ + + + + + Factor Calculator + + + +
+ +

Factor Calculator

+ + + + + +
+
+ + + diff --git a/Calculators/Factor-Calculator/script.js b/Calculators/Factor-Calculator/script.js new file mode 100644 index 000000000..980f1249f --- /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/Calculators/Zodiac-Sign-Calculator/index.html b/Calculators/Zodiac-Sign-Calculator/index.html index 26a5e7f1e..df4527038 100644 --- a/Calculators/Zodiac-Sign-Calculator/index.html +++ b/Calculators/Zodiac-Sign-Calculator/index.html @@ -1,3 +1,4 @@ + diff --git a/index.html b/index.html index 29e1ad9d9..5e099181a 100644 --- a/index.html +++ b/index.html @@ -126,6 +126,7 @@

Search Calculator


+

2D Distance Calculator

@@ -5977,6 +5978,20 @@

Provides the user's zodiac sign by taking the date of birth as input.

+
+
+

Factor Calculator

+

Calculates all the factors/divisors of a given number

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





From de65898b8cec3a3b28c03af9a22646b5f7752089 Mon Sep 17 00:00:00 2001 From: Rakesh Roshan Date: Sat, 14 Dec 2024 20:40:10 +0530 Subject: [PATCH 3/3] Few changes --- Calculators/Factor-Calculator/README.md | 2 +- Calculators/Zodiac-Sign-Calculator/index.html | 1 - index.html | 29 +++++++++---------- 3 files changed, 15 insertions(+), 17 deletions(-) diff --git a/Calculators/Factor-Calculator/README.md b/Calculators/Factor-Calculator/README.md index aa742e84b..cab2e6529 100644 --- a/Calculators/Factor-Calculator/README.md +++ b/Calculators/Factor-Calculator/README.md @@ -18,4 +18,4 @@ The Factor Calculator is a simple and interactive web application designed to ca ## Screenshots :- - +![image](https://github.com/user-attachments/assets/1795f05f-c5b3-429c-b819-ec3938da711c) diff --git a/Calculators/Zodiac-Sign-Calculator/index.html b/Calculators/Zodiac-Sign-Calculator/index.html index df4527038..26a5e7f1e 100644 --- a/Calculators/Zodiac-Sign-Calculator/index.html +++ b/Calculators/Zodiac-Sign-Calculator/index.html @@ -1,4 +1,3 @@ - diff --git a/index.html b/index.html index 5e099181a..2506ecc13 100644 --- a/index.html +++ b/index.html @@ -126,7 +126,6 @@

Search Calculator


-

2D Distance Calculator

@@ -2227,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

@@ -5978,20 +5991,6 @@

Provides the user's zodiac sign by taking the date of birth as input.

-
-
-

Factor Calculator

-

Calculates all the factors/divisors of a given number

-
- - - - - Source Code - -
-
-