Fibonacci Calculator (Rakesh9100#182)

Atanu789 · Jan 9, 2024 · 9722716 · 9722716
1 parent d48be1e
commit 9722716
Show file tree

Hide file tree

Showing 5 changed files with 315 additions and 0 deletions.
diff --git a/Calculators/Fibonacci-Calculator/README.md b/Calculators/Fibonacci-Calculator/README.md
@@ -0,0 +1,28 @@
+# FIBONACCI CALCULATOR
+
+--- Evaluate's and return's N-th Fibonacci Number.
+
+## **Description 📃**
+
+- This project is made by using HTML, CSS and JS.
+- This project can calculate fibonacci till 100th.
+- This project is responsive towards all the devices.
+
+<br>
+
+## **Functionalities 🎮**
+
+- Enter the value for n where n stands for the Nth Number in Fibonacci Sequence.
+- Project will calculate and show the answer instantly.
+- Best front-end project.
+
+<br>
+
+## **ScreenShot 📸**
+
+![fibo2](https://github.com/ak4631/CalcDiverse/assets/132299371/901de200-a508-4645-bfca-78c7163b3683)
+
+
+<br>
+
+### **Happy Coding 🧑‍💻**
diff --git a/Calculators/Fibonacci-Calculator/index.html b/Calculators/Fibonacci-Calculator/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- Logo of the website -->
+    <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"
+    />
+
+    <!-- Main title of the application -->
+    <title>Nth Fibonacci Calculator</title>
+
+    <!-- Main stylesheet of the application -->
+    <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>N-th Fibonacci Calculator</h1>
+
+      <!-- Input from the user -->
+      <input type="number" placeholder="Enter Number..." />
+
+      <!-- Output showing after calculation -->
+      <div id="output">
+        <p id="show-output"></p>
+        <h4>Formula for n-th Fibonacci Number.</h4>
+        <img
+          src="https://lh4.googleusercontent.com/bu7mkwQo0ljg6U14UAVRs5_AfReZOPhiE5Xt1VM19kZd3HR2fIyk1CQbF6sGxyeK7qjOpiegmXNuOU-Z5j6H32hh3LxOG5aRmLW0U9-YM7SgXgw7LD2jQNiiv1D-Hlnz70oTDUo"
+        />
+      </div>
+    </div>
+
+    <!-- Javascript file -->
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/Calculators/Fibonacci-Calculator/script.js b/Calculators/Fibonacci-Calculator/script.js
@@ -0,0 +1,66 @@
+// 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);
+    if (num > 100) {
+      output.style.color = "red";
+      output.textContent = "Please Enter Number less than 100.";
+    } else {
+      output.style.color = "blue";
+      let ans = fibonacci(num);
+      output.textContent = `The ${num}-th Fibonacci Number is: ${ans}`;
+    }
+  } else {
+    output.textContent = "";
+  }
+});
+
+function matrixMultiply(a, b) {
+  const result = [
+    [0, 0],
+    [0, 0],
+  ];
+
+  for (let i = 0; i < 2; i++) {
+    for (let j = 0; j < 2; j++) {
+      for (let k = 0; k < 2; k++) {
+        result[i][j] += a[i][k] * b[k][j];
+      }
+    }
+  }
+
+  return result;
+}
+
+function matrixPower(matrix, n) {
+  if (n === 1) {
+    return matrix;
+  }
+
+  if (n % 2 === 0) {
+    const halfPower = matrixPower(matrix, n / 2);
+    return matrixMultiply(halfPower, halfPower);
+  } else {
+    const halfPower = matrixPower(matrix, (n - 1) / 2);
+    const squaredHalfPower = matrixMultiply(halfPower, halfPower);
+    return matrixMultiply(matrix, squaredHalfPower);
+  }
+}
+
+function fibonacci(n) {
+  if (n <= 1) {
+    return n;
+  }
+
+  const baseMatrix = [
+    [1, 1],
+    [1, 0],
+  ];
+  const resultMatrix = matrixPower(baseMatrix, n - 1);
+
+  return resultMatrix[0][0];
+}
diff --git a/Calculators/Fibonacci-Calculator/style.css b/Calculators/Fibonacci-Calculator/style.css
@@ -0,0 +1,162 @@
+/* Default settings */
+@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins&display=swap');
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    align-items: center;
+    text-align: center;
+    overflow: hidden;
+}
+
+.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-family: 'Poppins', sans-serif;
+    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;
+    font-family: 'Poppins', sans-serif;
+}
+
+/* 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.8rem;
+    /* color: #9C27B0; */
+    width: 96%;
+    margin: 0 2%;
+    height: 55%;
+    overflow: auto;
+    /* Wrap the answer into a fixed container */
+    transition: all 0.5s;
+    font-family:'Kanit', sans-serif;
+}
+
+
+#output p {
+    word-wrap: break-word;
+}
+#output h4 {
+    font-size: 1.5rem;
+    margin-top:3vw;
+}
+#output img{
+    margin-top:30px;
+    width:60%;
+}
+
+/* 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/index.html b/index.html
@@ -350,6 +350,20 @@ <h3>Calculates the factorial of any large number instantly.</h3>
             </div>
         </div>
         <div class="box">
+            <div class="content">
+                <h2>N-th Fibonacci Calculator</h2>
+                <h3>Calculates the Nth number from Fibonacci Sequence.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Fibonacci-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Fibonacci-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
+          <div class="box">
             <div class="content">
                 <h2>Weight Convertor</h2>
                 <h3>Converts weight from kgs to pounds and vice-versa.</h3>