Fix the bug

Ibrangrd · Jul 9, 2024 · 7dbc9a4 · 7dbc9a4
1 parent f1e8051
commit 7dbc9a4
Show file tree

Hide file tree

Showing 7 changed files with 265 additions and 19 deletions.
diff --git a/Calculater/index.html b/Calculater/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>SIMPLE CALCULATOR</h1> 
+  <div class="con"> 
+  <div class="container">
+<div class="display">
+    <p>0</p>
+</div>
+<div class="main"> 
+    <button class="ac">AC</button>
+    <button class="op">%</button>
+    <button class="cancle">╳</button>
+    <button class="op">/</button>
+    <button class="num">7</button>
+    <button class="num">8</button>
+    <button class="num">9</button>
+    <button class="op">*</button>
+    <button class="num">4</button>
+    <button class="num">5</button>
+    <button class="num">6</button>
+    <button class="op">-</button>
+    <button class="num">1</button>
+    <button class="num">2</button>
+    <button class="num">3</button>
+    <button class="op">+</button>
+    <button class="num">00</button>
+    <button class="num">0</button>
+    <button class="num">.</button>
+    <button class="ans">=</button>
+</div>
+
+</div>
+
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculater/script.js b/Calculater/script.js
@@ -0,0 +1,104 @@
+document.addEventListener("DOMContentLoaded", function() {
+    const display = document.querySelector(".display p");
+    const buttons = document.querySelectorAll(".main button");
+    let currentInput = '';
+    let previousInput = '';
+    let operator = '';
+
+    buttons.forEach(button => {
+        button.addEventListener("click", function() {
+            const value = this.textContent;
+
+            if (this.classList.contains("num")) {
+                handleNumber(value);
+            } else if (this.classList.contains("op")) {
+                handleOperator(value);
+            } else if (this.classList.contains("ac")) {
+                clearAll();
+            } else if (this.classList.contains("cancle")) {
+                cancelLast();
+            } else if (this.classList.contains("ans")) {
+                calculateResult();
+            }
+
+            updateDisplay();
+        });
+    });
+
+    function handleNumber(value) {
+        if (currentInput.length < 12) { // Limiting input length
+            if (value === '.' && currentInput.includes('.')) {
+                return; // Prevent multiple decimals
+            }
+            currentInput += value;
+        }
+    }
+
+    function handleOperator(value) {
+        if (currentInput === '' && value === '-') {
+            currentInput = '-';
+        } else if (currentInput !== '') {
+            if (previousInput !== '') {
+                calculateResult();
+            }
+            operator = value;
+            previousInput = currentInput;
+            currentInput = '';
+        }
+    }
+
+    function clearAll() {
+        currentInput = '';
+        previousInput = '';
+        operator = '';
+    }
+
+    function cancelLast() {
+        currentInput = currentInput.slice(0, -1);
+    }
+
+    function calculateResult() {
+        if (previousInput !== '' && currentInput !== '') {
+            const num1 = parseFloat(previousInput);
+            const num2 = parseFloat(currentInput);
+            let result;
+
+            switch (operator) {
+                case '+':
+                    result = num1 + num2;
+                    break;
+                case '-':
+                    result = num1 - num2;
+                    break;
+                case '*':
+                    result = num1 * num2;
+                    break;
+                case '/':
+                    if (num2 === 0) {
+                        result = 'Error'; // Handle division by zero
+                    } else {
+                        result = num1 / num2;
+                    }
+                    break;
+                case '%':
+                    result = num1 % num2;
+                    break;
+                default:
+                    return;
+            }
+
+            currentInput = result.toString();
+            previousInput = '';
+            operator = '';
+        }
+    }
+
+    function updateDisplay() {
+        if (operator && previousInput && !currentInput) {
+            display.textContent = previousInput + operator;
+        } else {
+            display.textContent = currentInput || '0';
+        }
+    }
+});
+
diff --git a/Calculater/style.css b/Calculater/style.css
@@ -0,0 +1,98 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: rgb(79, 154, 220);
+}
+
+h1 {
+    margin-left: 600px;
+    margin-top: 20px;
+    color: brown;
+}
+
+.con {
+    margin-top: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.container {
+    width: 450px;
+    height: 600px;
+    background-color: #2b2d42;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 10px;
+}
+
+.display {
+    width: 100%;
+    height: 30%;
+    display: flex;
+    align-items: flex-end;
+    border-radius: 18px;
+    justify-content: flex-end;
+    font-size: 4em;
+    background-color: #14213d;
+    margin-bottom: 10px;
+    color: white;
+
+}
+
+p {
+    padding-right: 15px;
+}
+
+button {
+    width: 102px;
+    height: 77px;
+    padding: 3;
+    border-radius: 30%;
+    font-size: 2em;
+    color: #ffba08;
+    transform: all 1s ease;
+    transition-duration: 0.5s;
+}
+
+button:hover {
+    width: 105px;
+    height: 80px;
+    padding: 0;
+    background-color: #B0C7BD;
+    color: #8D5A97;
+
+}
+
+.main {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: 7px;
+    margin-bottom: 10px;
+    gap: 5px;
+}
+
+.ans {
+    color: #000000;
+    background-color: #b8c0ff;
+}
+.cancle{
+    transform: all 1s ease;
+    transition-duration: 0.5s;
+    color: #E03616;
+}
+.cancle:hover{
+  background-color: #ffb3c1;
+}
+.ac{
+    transform: all 1s ease;
+    transition-duration: 0.5s;
+}
+.ac:hover{
+    background-color: #ff758f;
+    color: #004e89;
+}
diff --git a/about.html b/about.html
@@ -11,10 +11,10 @@
 <body>
     <nav>
         <ul>
-            <li><a href="/Landing_page/index.html">Home</a></li>
-            <li><a href="/Landing_page/project.html">Projects</a></li>
-            <li><a href="/Landing_page/about.html">About me</a></li>
-            <li><a href="/Landing_page/contact.html">Contact me</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="project.html">Projects</a></li>
+            <li><a href="about.html">About me</a></li>
+            <li><a href="contact.html">Contact me</a></li>
             <!-- <li><button id="mode"> mode</button></li> -->
         </ul>
     </nav>
@@ -85,7 +85,7 @@ <h5> B.N.Saha Public School </h5>
             </div>
         </div>
     </div>
-    <div class="degine"> <h3> Degine by Md Ibran</h3></div>
+    <div class="degine"> <h3> Design by Md Ibran</h3></div>
 </body>
 
 </html>
diff --git a/contact.html b/contact.html
@@ -11,10 +11,10 @@
 <body>
     <nav>
         <ul>
-            <li><a href="/Landing_page/index.html">Home</a></li>
-            <li><a href="/Landing_page/project.html">Projects</a></li>
-            <li><a href="/Landing_page/about.html">About me</a></li>
-            <li><a href="/Landing_page/contact.html">Contact me</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="project.html">Projects</a></li>
+            <li><a href="about.html">About me</a></li>
+            <li><a href="contact.html">Contact me</a></li>
         </ul>
     </nav>
     <div class="container">

diff --git a/index.html b/index.html
@@ -11,10 +11,10 @@
 <body>
     <nav>
         <ul>
-            <li><a href="/Landing_page/index.html">Home</a></li>
-            <li><a href="/Landing_page/project.html">Projects</a></li>
-            <li><a href="/Landing_page/about.html">About me</a></li>
-            <li><a href="/Landing_page/contact.html">Contact me</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="project.html">Projects</a></li>
+            <li><a href="about.html">About me</a></li>
+            <li><a href="contact.html">Contact me</a></li>
             <!-- <li><button id="mode"> mode</button></li> -->
         </ul>
     </nav>
@@ -161,7 +161,7 @@ <h1 class="thanks"> THANK YOU</h1>
     <br>
     <br>
     <div class="degine">
-        <h3> Degine by Md Ibran</h3>
+        <h3> Design by Md Ibran</h3>
     </div>
     <script src="/script.js"> </script>
     </script>

diff --git a/project.html b/project.html
@@ -9,10 +9,10 @@
 <body>
     <nav>
         <ul>
-            <li><a href="/Landing_page/index.html">Home</a></li>
-            <li><a href="/Landing_page/project.html">Projects</a></li>
-            <li><a href="/Landing_page/about.html">About me</a></li>
-            <li><a href="/Landing_page/contact.html">Contact me</a></li>
+            <li><a href="index.html">Home</a></li>
+            <li><a href="project.html">Projects</a></li>
+            <li><a href="about.html">About me</a></li>
+            <li><a href="contact.html">Contact me</a></li>
             <!-- <li><button id="mode"> mode</button></li> -->
         </ul>
     </nav>
@@ -105,7 +105,7 @@ <h2>SIMPLE CALCULATOR</h2>
         </div>
     </div>
     <div class="degine">
-        <h3> Degine by Md Ibran</h3>
+        <h3> Design by Md Ibran</h3>
     </div>
 
 </body>