diff --git a/index.html b/index.html
index fe51d39..48f71b5 100644
--- a/index.html
+++ b/index.html
@@ -18,16 +18,16 @@
-
-
+
+
-
+
-
+
diff --git a/script.js b/script.js
index 5bdef45..a98e386 100644
--- 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,12 +175,14 @@ function assignEventListeners() {
if (operatorOne === null) {
assignOperand();
assignOperator(button.textContent);
+ highlightOperator();
} else {
assignOperand();
performOperation();
clearMemory();
assignOperand();
assignOperator(button.textContent);
+ highlightOperator();
disablePointButton();
}
});
@@ -152,6 +190,7 @@ function assignEventListeners() {
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
index ad33adc..041b9e2 100644
--- 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;