diff --git a/Calculators/Special-Number-Calculator/README.md b/Calculators/Special-Number-Calculator/README.md new file mode 100644 index 000000000..a665fce04 --- /dev/null +++ b/Calculators/Special-Number-Calculator/README.md @@ -0,0 +1,29 @@ +#

Special Number Calculator

+ +## Description :- + +This Calculator predicts whether the number that is being provided as input by the user is a Special Number or not. +A "special number" typically refers to a number with unique properties, but the definition can vary. For this example, let's consider a special number to be one whose sum of the factorial of digits equals the number itself. +For example, 145 is a special number because 1! + 4! + 5! = 145 + +## Tech Stacks :- + +- HTML +- CSS +- JavaScript + +## Screenshots :- + +### On search + +![ss-1](https://github.com/Rakesh9100/CalcDiverse/assets/135226069/438728f7-04b0-40f0-9d36-af4caaa6dc86) + +### These are the UI for the page, The added background-size and animation properties to create a smooth, animated gradient background that transitions between four different colors. + +![ss-2](https://github.com/Rakesh9100/CalcDiverse/assets/135226069/c1545344-30b8-458a-8339-e02605c3dc7b) +![ss-3](https://github.com/Rakesh9100/CalcDiverse/assets/135226069/80b76b33-4c4d-40f7-910e-72bf6ef35633) +![ss-4](https://github.com/Rakesh9100/CalcDiverse/assets/135226069/90c362ea-d7fa-422f-9fa3-b9055e3bb5db) + +### Sample Output, + +![ss-5](https://github.com/Rakesh9100/CalcDiverse/assets/135226069/17e9cd55-5c3d-4b55-a9e2-73abd022519d) diff --git a/Calculators/Special-Number-Calculator/index.html b/Calculators/Special-Number-Calculator/index.html new file mode 100644 index 000000000..2c9e2d78d --- /dev/null +++ b/Calculators/Special-Number-Calculator/index.html @@ -0,0 +1,28 @@ + + + + + + + Special Number Calculator + + +
+

Special Number Calculator

+
+
+ + +
+ +
+ +
+ + + diff --git a/Calculators/Special-Number-Calculator/script.js b/Calculators/Special-Number-Calculator/script.js new file mode 100644 index 000000000..3c4587cf8 --- /dev/null +++ b/Calculators/Special-Number-Calculator/script.js @@ -0,0 +1,27 @@ +function factorial(n) { + if (n === 0 || n === 1) return 1; + return n * factorial(n - 1); +} + +function checkSpecialNumber() { + const number = document.getElementById("number").value; + const digits = number.split(""); + let sum = 0; + + for (let digit of digits) { + sum += factorial(parseInt(digit)); + } + + const resultElement = document.getElementById("result"); + const resultMessage = document.getElementById("resultMessage"); + + if (sum == number) { + resultMessage.textContent = `${number} is a special number!`; + resultMessage.style.color = "white"; + } else { + resultMessage.textContent = `${number} is not a special number.`; + resultMessage.style.color = "white"; + } + + resultElement.style.display = "block"; +} diff --git a/Calculators/Special-Number-Calculator/style.css b/Calculators/Special-Number-Calculator/style.css new file mode 100644 index 000000000..2d58be742 --- /dev/null +++ b/Calculators/Special-Number-Calculator/style.css @@ -0,0 +1,153 @@ +body, +h1, +h2, +p, +form, +label, +input, +button, +div { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: "Arial", sans-serif; + background: linear-gradient(-45deg, #6a11cb, #236ae4, #ff5f5f, #ffc371); + background-size: 400% 400%; + animation: gradientAnimation 15s ease infinite; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + color: #fff; +} + +@keyframes gradientAnimation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.container { + background: rgba(255, 255, 255, 0.1); + padding: 40px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border-radius: 10px; + max-width: 500px; + width: 100%; + text-align: center; + backdrop-filter: blur(10px); +} + +h1 { + margin-bottom: 20px; + font-size: 32px; + color: #fff; +} + +.form-group { + margin-bottom: 20px; +} + +.form-control { + margin-bottom: 15px; + text-align: left; +} + +label { + display: block; + margin-bottom: 5px; + color: #e0e0e0; + font-weight: bold; +} + +input { + width: 100%; + padding: 12px; + border: none; + border-radius: 5px; + font-size: 16px; + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.2); + color: #fff; + outline: none; +} + +input::placeholder { + color: #e0e0e0; +} + +input:focus { + border: 2px solid #2575fc; + background: rgba(255, 255, 255, 0.3); +} + +.btn { + padding: 12px 20px; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.3s ease; + background: linear-gradient(-45deg, #ff5f6d, #ffc371, #9911cb, #2575fc); + background-size: 400% 400%; + animation: buttonGradientAnimation 10s ease infinite; + color: #fff; +} + +@keyframes buttonGradientAnimation { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.btn:hover { + opacity: 0.9; +} + +.result { + margin-top: 20px; + padding: 20px; + background: rgba(0, 0, 0, 0.3); + border-radius: 10px; +} + +.result h2 { + font-size: 24px; + margin-bottom: 10px; + color: #fff; +} + +.result p { + font-size: 22px; + color: #ffc371; +} + +@media (max-width: 600px) { + .container { + padding: 20px; + } + + h1 { + font-size: 24px; + } + + .btn { + padding: 10px 15px; + font-size: 14px; + } +} diff --git a/index.html b/index.html index 31f8ac60a..eee07e365 100644 --- a/index.html +++ b/index.html @@ -3697,6 +3697,21 @@

Calculator to combine two sound levels in decibels (dB).

+ + Source Code + + + + +
+
+

Special Number Calculator

+

Checks whether the input number is a Special Number or not.

+
+ + + + Source Code