Add operator highlight when active

AngeloThys · Aug 26, 2023 · 9c90ebd · 9c90ebd
1 parent 0384c1d
commit 9c90ebd
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -18,16 +18,16 @@
         <div class="buttons">
             <button id="clear">A/C</button>
             <button id="sign">-/+</button>
-            <button class="operator">*</button>
-            <button class="operator">/</button>
+            <button id="multiply" class="operator">*</button>
+            <button id="divide" class="operator">/</button>
             <button class="operand">7</button>
             <button class="operand">8</button>
             <button class="operand">9</button>
-            <button class="operator">-</button>
+            <button id="subtract" class="operator">-</button>
             <button class="operand">4</button>
             <button class="operand">5</button>
             <button class="operand">6</button>
-            <button class="operator">+</button>
+            <button id="add" class="operator">+</button>
             <button class="operand">1</button>
             <button class="operand">2</button>
             <button class="operand">3</button>

diff --git a/script.js b/script.js
@@ -2,6 +2,7 @@ let operandTemp = null;
 let operandOne = null;
 let operandTwo = null;
 let operatorOne = null;
+let operatorHighlighted = null;
 let operatorFlag = false;
 let errorFlag = false;
 
@@ -34,6 +35,41 @@ function assignOperator(operator) {
     operatorFlag = true;
 }
 
+function highlightOperator() {
+    if (operatorHighlighted) {
+        const operatorButton = document.querySelector(`#${operatorHighlighted}`);
+
+        operatorButton.classList.remove("buttonHighlighted");
+
+        operatorHighlighted = "";
+    }
+
+    if (operatorOne) {
+        let operatorName = "";
+
+        switch (operatorOne) {
+            case "+":
+                operatorName = "add";
+                break;
+            case "-":
+                operatorName = "subtract";
+                break;
+            case "*":
+                operatorName = "multiply";
+                break;
+            case "/":
+                operatorName = "divide";
+                break;
+        }
+
+        const operatorButton = document.querySelector(`#${operatorName}`);
+
+        operatorButton.classList.add("buttonHighlighted");
+
+        operatorHighlighted = operatorName;
+    }
+}
+
 function clearDisplay() {
     const calculatorDisplay = document.querySelector(".display");
     calculatorDisplay.textContent = "";
@@ -75,11 +111,11 @@ function divide(a, b) {
 function performOperation() {
     const calculatorDisplay = document.querySelector(".display");
 
-    if (operandTwo === "" || operandTwo === null) {
+    if ((operandTwo === "" && operatorOne) || (operandTwo === null && operatorOne)) {
         calculatorDisplay.textContent = "Syntax Error";
         errorFlag = true;
         return;
-    } 
+    }
 
     switch (operatorOne) {
         case '+':
@@ -139,19 +175,22 @@ function assignEventListeners() {
                 if (operatorOne === null) {
                     assignOperand();
                     assignOperator(button.textContent);
+                    highlightOperator();
                 } else {
                     assignOperand();
                     performOperation();
                     clearMemory();
                     assignOperand();
                     assignOperator(button.textContent);
+                    highlightOperator();
                     disablePointButton();
                 }
             });
         } else if (button.id === "clear") {
             button.addEventListener('click', () => {
                 clearDisplay();
                 clearMemory();
+                highlightOperator();
                 disablePointButton();
             });
         } else if (button.id === "sign") {
@@ -163,6 +202,7 @@ function assignEventListeners() {
                 assignOperand()
                 performOperation();
                 clearMemory();
+                highlightOperator();
                 disablePointButton();
             });
         } else if (button.id === "point") {

diff --git a/style.css b/style.css
@@ -8,6 +8,7 @@
     --cyclamen: #F06C9B;
     --melon: #F9B9B7;
     --peach-yellow: #F5D491;
+    --peach-yellow-darker: #d5b066;
     --lavender-blush: #EADDE1;
 }
 
@@ -83,6 +84,28 @@ button:active:enabled {
     box-shadow: 0px 0px 0px 0px #61A0AF;
 }
 
+.buttonHighlighted {
+    cursor: pointer;
+    padding: 0.25rem;
+    background-color: #F5D491;
+    border: 2px solid #d5b066;
+    border-radius: .25rem;
+    box-shadow: 0px 4px 0px 0px #d5b066;
+    transition: all 0.2s ease-in-out 0s;
+}
+
+.buttonHighlighted:hover:enabled {
+    filter: saturate(150%);
+    transform: translateY(1px);
+    box-shadow: 0px 3px 0px 0px #d5b066;
+}
+
+.buttonHighlighted:active:enabled {
+    filter: saturate(100%);
+    transform: translateY(4px);
+    box-shadow: 0px 0px 0px 0px #d5b066;
+}
+
 .buttons {
     margin: 0.25rem;
     display: grid;