From 2b0893a7d7aed6414cd834f70478636c08c841c1 Mon Sep 17 00:00:00 2001 From: AirWick Date: Sat, 11 Sep 2021 20:53:43 -0700 Subject: [PATCH] finally fixed the calculator with logic that made sense to me just need to add in decimals --- index.html | 32 +++++----- scripts.js | 175 +++++++++++++++++++++++++++++++++++++++++++---------- styles.css | 5 ++ 3 files changed, 164 insertions(+), 48 deletions(-) diff --git a/index.html b/index.html index c329a45..81b2b25 100644 --- a/index.html +++ b/index.html @@ -19,22 +19,22 @@
-
7
-
8
-
9
-
÷
-
4
-
5
-
6
-
x
-
1
-
2
-
3
-
-
-
.
-
0
-
=
-
+
+ + + + + + + + + + + + + + + +
diff --git a/scripts.js b/scripts.js index b2c7a34..0a138bc 100644 --- a/scripts.js +++ b/scripts.js @@ -1,6 +1,12 @@ // Globals -let RESULT = null; - +let result = null; +let firstNumber = null; +let secondNumber = null; +let savedOperator = null; +let activeOperator = null; +let displayValue = 0; +let startNewDisplay = false; +let needNewSecondNumber = false; // Query Selectors let display = document.querySelector("#displayText"); @@ -13,17 +19,15 @@ const operatorNodes = document.querySelectorAll(".operator"); // Event Listeners -clear.addEventListener('click', () => doSomething()) - - - -function start() -{ - -} - - - +clear.addEventListener('click', () => clearDisplay()) +deleteNum.addEventListener('click', () => deleteNumber()) +equalSign.addEventListener('click', () => evaluate()) +numberNodes.forEach(element => { + element.addEventListener('click', () => appendNumber(element)) +}); +operatorNodes.forEach(element => { + element.addEventListener('click', () => {saveOperator(element); } ) +}) function add(a,b) @@ -31,21 +35,21 @@ function add(a,b) let intA = parseInt(a); let intB = parseInt(b); - RESULT = intA + intB; + result = intA + intB; - return RESULT; + return result; } function subtract(a,b) { - RESULT = a - b; - return RESULT; + result = a - b; + return result; } function multiply(a,b) { - RESULT = a * b; - return RESULT; + result = a * b; + return result; } function divide(a,b) @@ -56,43 +60,150 @@ function divide(a,b) return; } - RESULT = a / b; + result = a / b; - return RESULT; + return result; } function operate(operator, a, b) { + const A = Number(a); + const B = Number(b); + switch(operator){ case "+": - add(a,b); - break; + return add(A,B); case "-": - subtract(a,b); - break; + return subtract(A,B); case "x": - multiply(a,b); - break; + return multiply(A,B); case "÷": - divide(a,b); - break; + return divide(A,B); } } function clearDisplay() { - displayText.textContent = 0; + console.log("clearDisplay"); + display.textContent = 0; + displayValue = display.textContent; + clearAll(); + console.log("displayValue: ", displayValue); +} + +function clearAll() +{ + console.log("clearAll"); + savedOperator = null; + activeOperator = null; + firstNumber = null; + secondNumber = null; + result = null; } function deleteNumber() { + console.log("deleteNumber"); let string = displayText.textContent; - displayText.textContent = string.slice(1); + display.textContent = string.slice(0,-1); + displayValue = display.textContent; + console.log("displayValue: ", displayValue); } +function evaluate() +{ + console.log("evaluate"); + if(secondNumber == null) + { + secondNumber = displayValue; + console.log("secondNumber saved: ", secondNumber); + } + if(needNewSecondNumber) + { + secondNumber = displayValue; + console.log("secondNumber saved: ", secondNumber); + needNewSecondNumber = false; + } + operate(activeOperator,firstNumber,secondNumber); + displayResult(); +} +function appendNumber(element) +{ + console.log("appendNumber"); + + if(startNewDisplay) + { + display.textContent = element.getAttribute('value'); + startNewDisplay = false; + displayValue = display.textContent; + console.log("displayValue: ", displayValue); + return; + } + if(displayValue == 0) // if the first number on the calculator display is 0 then the display should change to the number pressed + { + display.textContent = element.getAttribute('value'); + } + + + else + display.textContent += element.getAttribute('value'); // else append the number to the end of the current number + + + displayValue = display.textContent; + console.log("displayValue: ", displayValue); +} + + +function saveOperator(element) +{ + console.log("saveOperator"); + savedOperator = element.getAttribute('value'); + console.log("savedOperator: ", savedOperator); + + + + if(firstNumber == null && activeOperator == null) + { + firstNumber = displayValue; + startNewDisplay = true; + console.log("firstNumber saved: ", firstNumber); + activeOperator = savedOperator; // operator to be used in operate() + console.log("activeOperator: ", activeOperator); + } + + else if(firstNumber != null) + { + secondNumber = displayValue; + console.log("secondNumber saved: ", secondNumber); + operate(activeOperator,firstNumber,secondNumber); + displayResult(); + startNewDisplay = true; + firstNumber = result; + activeOperator = savedOperator; + console.log("new active operator: ", activeOperator); + console.log("new first number: ", firstNumber); + console.log("need new second number..."); + needNewSecondNumber = true; + } + + else if(firstNumber != null && needNewSecondNumber) + { + secondNumber = displayValue; + console.log("new secondNumber saved: ", secondNumber); + operate(activeOperator, firstNumber, secondNumber); + displayResult(); + } + +} + +function displayResult() +{ + console.log("displayResult"); + console.log("result: ", result); + display.textContent = result; +} -start(); \ No newline at end of file diff --git a/styles.css b/styles.css index 1f296e9..57123d8 100644 --- a/styles.css +++ b/styles.css @@ -79,4 +79,9 @@ body { .option:hover { background-color: rgb(199, 206, 228); +} + +.operator:focus +{ + background-color: rgb(187, 255, 0); } \ No newline at end of file