Change button classes to specify type of operator

strbytes · Apr 25, 2022 · 91e2108 · 91e2108
1 parent 3b61bb5
commit 91e2108
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -14,26 +14,26 @@
         <div class="button-row">
           <button id="C" class="clear">C</button>
           <button id="CE" class="clear">CE</button>
-          <button id="root">√</button>
-          <button id="div" class="operators">/</button>
+          <button id="root" class="unaryOperators">√</button>
+          <button id="div" class="binaryOperators">/</button>
         </div>
         <div class="button-row">
           <button id="7" class="numbers">7</button>
           <button id="8" class="numbers">8</button>
           <button id="9" class="numbers">9</button>
-          <button id="mul" class="operators">*</button>
+          <button id="mul" class="binaryOperators">*</button>
         </div>
         <div class="button-row">
           <button id="4" class="numbers">4</button>
           <button id="5" class="numbers">5</button>
           <button id="6" class="numbers">6</button>
-          <button id="sub" class="operators">-</button>
+          <button id="sub" class="binaryOperators">-</button>
         </div>
         <div class="button-row">
           <button id="1" class="numbers">1</button>
           <button id="2" class="numbers">2</button>
           <button id="3" class="numbers">3</button>
-          <button id="add" class="operators">+</button>
+          <button id="add" class="binaryOperators">+</button>
         </div>
         <div class="button-row">
           <button id="sign">+/-</button>

diff --git a/script.js b/script.js
@@ -30,6 +30,7 @@ const Calculator = {
     if (Calculator.prevOperation) {
       Screen.display(Calculator.prevOperation(y));
     } else if (Calculator.currOperation) {
+      if (Screen.newNum) y = 0;
       Screen.display(Calculator.currOperation(y));
     }
     Calculator.currOperation = null;
@@ -59,7 +60,7 @@ const UnaryOperators = {
 };
 
 // ---- VIEW ----
-// screen receives output of model
+// screen receives output of model and certain input from controls
 
 const Screen = {
   screenSelector: document.querySelector("#screen"),
@@ -113,7 +114,7 @@ const Screen = {
 };
 
 // ---- CONTROLLER ----
-// buttons and listeners global
+// No Controller object, just global selectors and listeners
 // buttons selectors divided by grouping (numbers, binary operators, clear, etc)
 
 const numberButtons = document.querySelectorAll(".numbers");
@@ -125,7 +126,7 @@ function numButtonPress(event) {
   Screen.addDigit(num);
 }
 
-const binaryOperatorButtons = document.querySelectorAll(".operators");
+const binaryOperatorButtons = document.querySelectorAll(".binaryOperators");
 binaryOperatorButtons.forEach((binaryOperatorButton) => {
   binaryOperatorButton.addEventListener("click", binaryOperatorButtonPress);
 });
@@ -136,6 +137,8 @@ function binaryOperatorButtonPress(event) {
   let operator = event.target.id;
   let num = +Screen.screenSelector.textContent;
   if (Calculator.currOperation) {
+    // chain operations by automatically executing partially-entered
+    // operations if another operator button is pressed
     Calculator.execute(num);
   }
   Calculator.newBinaryOperation(operator, +Screen.screenSelector.textContent);
@@ -164,6 +167,8 @@ function clearButtonPress(event) {
 }
 
 const unaryOperatorButtons = document.querySelector("#root");
+unaryOperatorButtons.querySelectorAll(".unaryOperators");
+
 const signButton = document.querySelector("#sign");
 const decimalButton = document.querySelector("#decimal");
 

diff --git a/style.css b/style.css
@@ -59,7 +59,7 @@ button {
   background-color: #e9e9ed;
 }
 
-.operators {
+.binaryOperators {
   background-color: #cdc;
 }
 
@@ -68,7 +68,7 @@ button {
   color: blue;
 }
 
-#root {
+.unaryOperators {
   background-color: #ccd;
 }