update 07 add buttons ["1", "+", "=", "-"]

Author: cookieru

bjs/07_Number_and_string/index.html

@@ -15,12 +15,28 @@
             <div class="form-group">
                 <div class="card" id="calc">
                     <div class="card-body">
-                        <input class="form-control input-window" id="inputWindow" value="">
+                        <input class="form-control input-window" id="inputWindow" value="0">
                         <div class="row no-gutters">
                             <div class="col">
                                 <button class="btn btn-outline-danger form-control" id="btn_clr">C</button>
                             </div>
                         </div>
+                        <div class="row no-gutters">
+                            <div class="col">
+                                <button class="btn btn-outline-primary form-control btn_num" id="btn_1">1</button>
+                            </div>
+                        </div>
+                        <div class="row no-gutters">
+                            <div class="col">
+                                <button class="btn btn-outline-primary form-control btn_op" id="btn_sum">+</button>
+                            </div>
+                            <div class="col">
+                                <button class="btn btn-outline-primary form-control btn_op" id="btn_sub">-</button>
+                            </div>
+                            <div class="col">
+                                <button class="btn btn-outline-primary form-control" id="btn_calc">=</button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>

bjs/07_Number_and_string/script.js

@@ -1,12 +1,64 @@
 let lastOperand = 0;
+let repeatOperand = 0;
 let operation = null;
+let lastIsOp = false;
 
-const inputWindow = document.getElementById('inputWindow');
+const inputWindow = document.querySelector("#inputWindow");
 
+document.querySelectorAll(".btn_num").forEach(element => {
+    element.addEventListener("click", function () {
+        if (lastIsOp) 
+        {
+            inputWindow.value = "";
+            lastIsOp = false;
+        }
+        if (inputWindow.value == 0) inputWindow.value = "";
+        inputWindow.value += this.textContent;
+    });
+});
 
-document.getElementById('btn_clr').addEventListener('click', function () {
+document.querySelectorAll(".btn_op").forEach(element => {
+    element.addEventListener("click", function () {
+        repeatOperand = 0;
+    });
+});
+
+document.querySelector("#btn_sum").addEventListener("click", function (){
+    operation = "sum";
+    if (!lastIsOp)
+    {
+        inputWindow.value = parseInt(inputWindow.value) + lastOperand;
+        lastOperand = parseInt(inputWindow.value);
+    }
+    lastIsOp = true;
+});
+
+document.querySelector("#btn_sub").addEventListener("click", function (){
+    operation = "sub";
+    if (!lastIsOp)
+    {
+        inputWindow.value = parseInt(inputWindow.value) - lastOperand;
+        lastOperand = parseInt(inputWindow.value);
+    }
+    lastIsOp = true;
+});
+
+document.querySelector("#btn_calc").addEventListener("click", function (){
+    if (!lastIsOp)
+    {
+        repeatOperand = parseInt(inputWindow.value);
+    }
+    if (operation === "sum") inputWindow.value = lastOperand + repeatOperand;
+    else if (operation === "sub") inputWindow.value = lastOperand - repeatOperand;
+    lastOperand = parseInt(inputWindow.value);
+
+    lastIsOp = true;
+});
+
+document.querySelector("#btn_clr").addEventListener("click", function () {
     lastOperand = 0;
+    repeatOperand = 0;
     operation = null;
-    inputWindow.value = '';
-})
-
+    lastIsOp = false;
+    inputWindow.value = "0";
+});