first commit

atanumondal-2001 · Apr 18, 2023 · 72d7dca · 72d7dca
commit 72d7dca
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 0 deletions.
diff --git a/127.0.0.1_5500_index.html(My laptop).png b/127.0.0.1_5500_index.html(My laptop).png
diff --git a/Background_image.png b/Background_image.png
diff --git a/Calc_icon.png b/Calc_icon.png
diff --git a/calculatorJs.js b/calculatorJs.js
@@ -0,0 +1,20 @@
+let Str = "";
+let buttons = document.querySelectorAll('.btn');
+Array.from(buttons).forEach((button) => {
+    button.addEventListener('click', (e) => {
+        if (e.target.innerHTML == '=') {
+            Str = eval(Str);
+            document.querySelector('input').value = Str;
+        } else if (e.target.innerHTML == 'AC') {
+            Str = "";
+            document.querySelector('input').value = Str;
+        } else if (e.target.innerHTML == 'DEL') {
+            Str = Str.substring(0, Str.length - 1);
+            document.querySelector('input').value = Str;
+        } else {
+            console.log(e.target)
+            Str = Str + e.target.innerHTML;
+            document.querySelector('input').value = Str;
+        }
+    })
+})
diff --git a/calculatorStyle.css b/calculatorStyle.css
@@ -0,0 +1,89 @@
+    @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono&display=swap');
+    * {
+        /*margin: 0;
+    padding: 0;*/
+        box-sizing: border-box;
+        font-family: 'Chivo Mono', monospace;
+    }
+
+    body {
+        width: 100%;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        /*background: linear-gradient(45deg, rgb(66, 64, 64), rgb(105, 104, 104));*/
+    }
+
+    .container {
+        border: 1px solid rgb(104, 98, 98);
+        padding: 20px;
+        border-radius: 16px;
+        background-color: rgb(66, 64, 64);
+        box-shadow: 0px 0px 20px rgb(133, 127, 127);
+        opacity: 5.5;
+    }
+
+    .logo {
+        height: 25px;
+        width: 25px;
+    }
+
+    .product_name {
+        color: white;
+        padding-left: 50px;
+        font-size: 25px;
+    }
+
+    input {
+        border: none;
+        width: 320px;
+        padding: 25px;
+        background: transparent;
+        text-align: right;
+        font-size: 40px;
+        color: white;
+        border-radius: 16px;
+        box-shadow: 0px 0px 20px rgb(138, 135, 135, 0.5);
+        cursor: pointer;
+    }
+
+    input::placeholder {
+        color: white;
+    }
+
+    button {
+        cursor: pointer;
+        width: 60px;
+        height: 60px;
+        margin: 10px;
+        border-radius: 50px;
+        background: transparent;
+        color: white;
+        border: none;
+        font-size: 20px;
+        box-shadow: 2px 1px 9px rgba(197, 192, 192, 1.5);
+    }
+
+    .remove {
+        background-color: rgb(209, 70, 70);
+    }
+
+    .num {
+        color: greenyellow;
+    }
+
+    .operator {
+        color: orange;
+        background-color: rgb(6, 117, 117);
+    }
+
+    .equalBtn {
+        background-color: orange;
+    }
+
+    h2 {
+        color: white;
+        font-size: 15px;
+        text-align: center;
+    }
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator by Atanu</title>
+    <link rel="icon" href="Calc_icon.png">
+    <link rel="stylesheet" href="calculatorStyle.css">
+
+</head>
+
+<body>
+
+
+    <div class="container">
+
+        <header>
+            <table>
+                <th><img class="logo" src="Calc_icon.png" alt="Calculator"></th>
+                <th class="product_name">CALCULATOR</th>
+
+            </table>
+        </header>
+        <div class="calculatorBody">
+            <input class="input" type="text" placeholder="0">
+            <div class="row">
+                <button class="btn remove">AC</button>
+                <button class="btn remove">DEL</button>
+                <button class="btn operator">%</button>
+                <button class="btn operator">/</button>
+            </div>
+            <div class="row">
+                <button class="btn num">7</button>
+                <button class="btn num">8</button>
+                <button class="btn num">9</button>
+                <button class="btn operator">*</button>
+            </div>
+            <div class="row">
+                <button class="btn num">4</button>
+                <button class="btn num">5</button>
+                <button class="btn num">6</button>
+                <button class="btn operator">-</button>
+            </div>
+            <div class="row">
+                <button class="btn num">1</button>
+                <button class="btn num">2</button>
+                <button class="btn num">3</button>
+                <button class="btn operator">+</button>
+            </div>
+            <div class="row">
+                <button class="btn num">00</button>
+                <button class="btn num">0</button>
+                <button class="btn num">.</button>
+                <button class="btn equalBtn">=</button>
+            </div>
+        </div>
+
+        <br />
+        <br />
+        <br />
+        <br />
+        <h2>All Right Reserved &copy;2023 Atanu Mondal</h2>
+
+    </div>
+
+
+    <script src="calculatorJs.js"></script>
+
+</html>