fixed DOM issues

herculeskan · Nov 14, 2023 · 0970cb8 · 0970cb8
1 parent b49b30d
commit 0970cb8
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -1,22 +1,20 @@
-<!-- starting with the html -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TOPCalculator</title>
     <link rel="stylesheet" href="style.css" />
-    <script src="script.js"></script>
+    <title>Document</title>
   </head>
   <body>
     <main id="main">
-      <form action="" id="calc_form">
+      <form id="calc_form">
         <header class="calc_header">
           <input
             type="text"
             disabled
             id="output"
-            class="calc_input"
+            class="calc_output"
             value="0"
           />
         </header>
@@ -28,12 +26,15 @@
               value="clear"
               class="btn btn-grey"
             >
-              AC</button
-            ><button data-type="operator" value="invert" class="btn btn-grey">
-              +/-</button
-            ><button data-type="operator" value="%" class="btn btn-grey">
-              %</button
-            ><button data-type="operator" value="/" class="btn btn-grey">
+              AC
+            </button>
+            <button data-type="operator" value="invert" class="btn btn-grey">
+              +/-
+            </button>
+            <button data-type="operator" value="%" class="btn btn-grey">
+              %
+            </button>
+            <button data-type="operator" value="/" class="btn btn-orange">
               ÷
             </button>
           </div>
@@ -103,4 +104,5 @@
       </form>
     </main>
   </body>
+  <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
@@ -1,18 +1,24 @@
-console.log("this is working");
 const output = document.getElementById("output");
 const form = document.getElementById("calc_form");
 const operand_btns = document.querySelectorAll("button[data-type=operand]");
+const operator_btns = document.querySelectorAll("button[data-type=operator]");
 
 form.addEventListener("submit", (e) => {
   e.preventDefault();
 });
-console.log(output.value);
-console.log(form.value);
-console.log(operand_btns.values);
 
 let is_operator = false;
+let equation = [];
+
+const remove_active = () => {
+  operator_btns.forEach((btn) => {
+    btn.classList.remove("active");
+  });
+};
+
 operand_btns.forEach((btn) => {
   btn.addEventListener("click", (e) => {
+    remove_active();
     if (output.value == "0") {
       output.value = e.target.value;
     } else if (is_operator) {
@@ -25,3 +31,35 @@ operand_btns.forEach((btn) => {
     }
   });
 });
+
+operator_btns.forEach((btn) => {
+  btn.addEventListener("click", (e) => {
+    remove_active();
+    e.currentTarget.classList.add("active");
+
+    switch (e.target.value) {
+      case "%":
+        output.value = parseFloat(output.value) / 100;
+        break;
+      case "invert":
+        output.value = parseFloat(output.value) * -1;
+        break;
+      case "=":
+        equation.push(output.value);
+        output.value = eval(equation.join(""));
+        equation = [];
+        break;
+      default:
+        let last_item = equation[equation.length - 1];
+        if (["/", "*", "+", "-"].includes(last_item) && is_operator) {
+          equation.pop();
+          equation.push(e.target.value);
+        } else {
+          equation.push(output.value);
+          equation.push(e.target.value);
+        }
+        is_operator = true;
+        break;
+    }
+  });
+});