diff --git a/Factorial-Calculator/README.md b/Factorial-Calculator/README.md new file mode 100644 index 0000000..4b7ee0e --- /dev/null +++ b/Factorial-Calculator/README.md @@ -0,0 +1,33 @@ +# FACTORIAL CALCULATOR + +--- + +## **Description 📃** + +- This project is made by using HTML, CSS and JS. +- This project can calculate factorial of the very large numbers. +- This project is responsive towards the small devices also. + +
+ +## **Functionalities 🎮** + +- Enter the number you want to know the factorial of that number. +- Project will calculate and show the answer instantly. +- Best front-end project. + +
+ +## **ScreenShot 📸** + +![image](https://github.com/shrey141102/Javascript-projects/assets/114330097/1c3e626e-40b3-4ee3-9f0c-ab92263d39c3) + +
+ +## **Developed By 👦** + +[Avdhesh Varshney](https://github.com/Avdhesh-Varshney) + +
+ +### **Happy Coding 🧑‍💻** diff --git a/Factorial-Calculator/index.html b/Factorial-Calculator/index.html new file mode 100644 index 0000000..a9db39f --- /dev/null +++ b/Factorial-Calculator/index.html @@ -0,0 +1,38 @@ + + + + + + + + Large Factorial Calculator + + + + +
+
+ +
+ +

Factorial Calculator

+ + +

Created By Avdhesh Varshney

+ + + + + +
+

+
+
+ + + + + + \ No newline at end of file diff --git a/Factorial-Calculator/script.js b/Factorial-Calculator/script.js new file mode 100644 index 0000000..b2a7820 --- /dev/null +++ b/Factorial-Calculator/script.js @@ -0,0 +1,41 @@ +// Initialising variables +const input = document.querySelector('input'); +const output = document.getElementById('show-output'); + +// Take input from the user +input.addEventListener('input', () => { + if (input.value !== '') { + let num = parseInt(input.value); + calcFactorial(num); + } else { + output.textContent = ''; + } +}); + +// Function which calculate the factorial of the entered number +function calcFactorial(n) { + let len = 1; + let num = [1]; + + // Main algorithm of calculating the large number factorial + for (let i = 1; i <= n; i++) { + let c = 0; + for (let j = 0; j < len; j++) { + let k = num[j] * i + c; + num[j] = k % 10; + c = Math.floor(k / 10); + } + while (c) { + num.push(c % 10); + c = Math.floor(c / 10); + len++; + } + } + + let result = ''; + for (let i = num.length - 1; i >= 0; i--) + result += num[i]; + + // Showing result to the user + output.textContent = result; +} \ No newline at end of file diff --git a/Factorial-Calculator/style.css b/Factorial-Calculator/style.css new file mode 100644 index 0000000..66fd0a7 --- /dev/null +++ b/Factorial-Calculator/style.css @@ -0,0 +1,150 @@ +/* Default settings */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + align-items: center; + text-align: center; + overflow: hidden; + font-family: cursive; +} + +.box1, +.box2 { + position: absolute; + width: 100%; + height: 100%; + transition: all 0.5s; +} + +.box1 { + top: 0; + background-color: salmon; + transform: rotateY(0deg) rotate(45deg); +} + +.box2 { + bottom: 0; + background-color: lightgreen; + transform: rotateY(45deg) rotate(145deg); +} + +/* Styling the main container */ +.container { + background-color: rgba(255, 255, 255, 0.6); + width: 50%; + height: 90%; + border: none; + border-radius: 0.5rem; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all 0.5s; +} + +/* Styling the heading */ +h1 { + font-size: 2.5rem; + font-weight: normal; + color: green; + user-select: none; + margin: 1rem 0; + transition: all 0.5s; +} + +/* Styling the paragraph element nested inside the container */ +.container>p { + color: red; + font-size: 1.2rem; + margin-top: 0.5rem; + user-select: none; + transition: all 0.5s; +} + +a { + text-decoration: none; + color: red; +} + +a:hover { + text-decoration: underline; +} + +/* Styling the input box */ +input { + margin: 2rem 0; + width: 60%; + height: 10%; + font-size: 2rem; + border: none; + border-radius: 0.75rem; + outline: none; + padding: 15px; + background: transparent; + transition: all 0.5s; +} + +/* Removing the spinner of the number input box */ +input[type='number']::-webkit-inner-spin-button, +input[type="number"]::-webkit-output-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Styling the output box */ +#output { + font-size: 1.5rem; + color: #9C27B0; + width: 96%; + margin: 0 2%; + height: 55%; + overflow: auto; + /* Wrap the answer into a fixed container */ + transition: all 0.5s; +} + +#output p { + word-wrap: break-word; +} + +/* Responsiveness of the website */ +@media (max-width: 900px) { + h1 { + font-size: 1.5rem; + } + + .container>p { + font-size: 1rem; + } + + input { + font-size: 1.5rem; + margin: 1.5rem 0; + } + + #output { + font-size: 1rem; + height: 65%; + } +} + +/* For small devices */ +@media (max-width: 450px) { + h1 { + font-size: 1rem; + } + + .container>p { + font-size: 0.7rem; + } + + input { + margin: 1.5rem 0; + } + + #output { + font-size: 1rem; + height: 68%; + } +} \ No newline at end of file diff --git a/script.js b/script.js index 5fa7393..cd3a6ee 100644 --- a/script.js +++ b/script.js @@ -372,6 +372,11 @@ const projects = [ discription: "This a simple project where i created a amplification wave of the sound using only html, css and js, which can be shows according to the pitch of the user's sound.", link: "AudioAnalyser/index.html", image: "https://github.com/shrey141102/Javascript-projects/assets/114330097/1f68df5e-b745-43a7-a63a-d55211694848" + }, + { title: "Factorial Calculator", + discription: "This project can calculate factorial of the very large numbers.", + link: "Factorial-Calculator/index.html", + image: "https://github.com/shrey141102/Javascript-projects/assets/114330097/1c3e626e-40b3-4ee3-9f0c-ab92263d39c3" } ];