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;