Merge pull request #205 from Avdhesh-Varshney/factorial

[KWOC] Factorial Calculator Project Ready
shrey141102 · Jan 5, 2024 · 628a7f3 · 628a7f3
2 parents 15900c9 + 20bfcff
commit 628a7f3
Show file tree

Hide file tree

Showing 5 changed files with 267 additions and 0 deletions.
diff --git a/Factorial-Calculator/README.md 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.
+
+<br>
+
+## **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.
+
+<br>
+
+## **ScreenShot 📸**
+
+![image](https://github.com/shrey141102/Javascript-projects/assets/114330097/1c3e626e-40b3-4ee3-9f0c-ab92263d39c3)
+
+<br>
+
+## **Developed By 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### **Happy Coding 🧑‍💻**
diff --git a/Factorial-Calculator/index.html b/Factorial-Calculator/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon"
+        href="https://w7.pngwing.com/pngs/325/557/png-transparent-calculator-computer-icons-math-electronics-text-logo.png"
+        type="image/x-icon">
+    <title>Large Factorial Calculator</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <div class="box1"></div>
+    <div class="box2"></div>
+    <!-- Main container of the application -->
+    <div class="container">
+        <!-- Main heading of the application -->
+        <h1>Factorial Calculator</h1>
+
+        <!-- Creator of this application -->
+        <p>Created By <a href="https://github.com/Avdhesh-Varshney">Avdhesh Varshney</a></p>
+
+        <!-- Input from the user -->
+        <input type="number" placeholder="Enter Number...">
+
+        <!-- Output showing after calculation -->
+        <div id="output">
+            <p id="show-output"></p>
+        </div>
+    </div>
+
+    <!-- Javascript file -->
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/Factorial-Calculator/script.js 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;
+}
diff --git a/Factorial-Calculator/style.css 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%;
+    }
+}
diff --git 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" 
   }
 ];