basic calculator function

ishabaral · Jul 6, 2021 · 370a37d · 370a37d
commit 370a37d
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 0 deletions.
diff --git a/images/calc-icon.webp b/images/calc-icon.webp
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <script src="./script.js"></script>
+    <link rel="shortcut icon" href="./images/calc-icon.webp">
+    <title>Calculator App</title>
+</head>
+
+<body>
+    <div id="calc-box">
+        <div id="calc">
+            <div class="input-section">
+                <input id="input-box" type="text" placeholder="0" autofocus pattern="[0-9]">
+            </div>
+
+            <div class="btn-groups">
+
+                <button id="reset" onclick="reset()" class="sign">AC </button>
+                <button id="reset" onclick="reset()" class="sign">C </button>
+                <button onclick="displayNum('%')" class="sign">%</button>
+                <button value="/" onclick="displayNum('/')" class="sign">÷</button>
+                <button value="7" onclick="displayNum('7')">7</button>
+                <button value="8" onclick="displayNum('8')">8</button>
+                <button value="9" onclick="displayNum('9')">9</button>
+                <button value="*" onclick="displayNum('*')" class="sign">×</button>
+                <button value="4" onclick="displayNum('4')">4</button>
+                <button value="5" onclick="displayNum('5')">5</button>
+                <button value="6" onclick="displayNum('6')">6</button>
+                <button value="-" onclick="displayNum('-')" class="sign">-</button>
+                <button value="1" onclick="displayNum('1')">1</button>
+                <button value="2" onclick="displayNum('2')">2</button>
+                <button value="3" onclick="displayNum('3')">3</button>
+                <button value="+" onclick="displayNum('+')" class="sign">+</button>
+                <button value="^" onclick="displayNum('00')">00</button>
+                <button value="0" onclick="displayNum('0')">0</button>
+                <button value="." onclick="displayNum('.')">.</button>
+                <button onclick="result()" class="sign">=</button>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,9 @@
+const reset = () => document.getElementById("input-box").value = "";
+
+const displayNum = (num) => document.getElementById("input-box").value += num;
+
+const result = () => {
+    let a = document.getElementById("input-box").value;
+    let b = eval(a);
+    document.getElementById("input-box").value = b;
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,56 @@
+
+#calc-box{
+    position: relative;
+    height: 600px;
+    width: 400px;
+    margin: 0 auto;
+    background-image: url("https://i.imgur.com/mSPU63U.jpg");
+    background-size: cover;
+}
+#calc{
+    position: absolute;
+    height: 580px;
+    width: 370px;
+    left:13px;
+}
+
+.input-section{
+    width: 99.4%;
+    height: 30%;
+    background-color: #44403b;
+    color: white;
+    margin-top: 3px;
+}
+
+#input-box{
+    position: absolute;
+    margin: 15px;
+    padding: 20px;
+    top: 76px;
+    left: 27px;
+    font-size: 24px;
+    border: none;
+    color: white;
+    background-color: #44403b;
+    outline: none;
+    direction: rtl;
+    letter-spacing: 0.5;
+}
+.btn-groups{
+    display: flex;
+    flex-wrap: wrap;
+}
+.btn-groups > button{
+    background-color: #736c62;
+    font-size: 35px;
+    color: white;
+    margin: 1px;
+    padding:0 auto;
+    width: 90px;
+    height: 82px;
+    text-align: center;
+}
+
+.sign{
+    background-color: chocolate !important;
+}