From 765b1f8c60711b5e704cb424a7a5ee47a4ce8c64 Mon Sep 17 00:00:00 2001 From: RonaldRis21 Date: Wed, 13 Nov 2024 18:11:23 -0600 Subject: [PATCH 1/3] Counter btn finished - Working on calculator, most cases already covered --- Front-End/challenge1/script.js | 17 ++++ Front-End/challenge2/index.html | 2 +- Front-End/challenge2/script.js | 158 ++++++++++++++++++++++++++++++++ 3 files changed, 176 insertions(+), 1 deletion(-) diff --git a/Front-End/challenge1/script.js b/Front-End/challenge1/script.js index e1c139b..b56c18f 100644 --- a/Front-End/challenge1/script.js +++ b/Front-End/challenge1/script.js @@ -1 +1,18 @@ // Modify this file only + +const btnIncrease = document.getElementById("increase"); +const btnDecrease = document.getElementById("decrease"); +const spanCounter = document.getElementById("counter"); + +function getCurrentCount() { + return Number(spanCounter.innerText); +} + +btnIncrease.addEventListener("click", () => { + spanCounter.innerText = getCurrentCount() + 1; +}); + + +btnDecrease.addEventListener("click", () => { + spanCounter.innerText = getCurrentCount() - 1; + }); \ No newline at end of file diff --git a/Front-End/challenge2/index.html b/Front-End/challenge2/index.html index 7319b60..aa24107 100644 --- a/Front-End/challenge2/index.html +++ b/Front-End/challenge2/index.html @@ -36,6 +36,6 @@ - + \ No newline at end of file diff --git a/Front-End/challenge2/script.js b/Front-End/challenge2/script.js index 846e88c..a38b311 100644 --- a/Front-End/challenge2/script.js +++ b/Front-End/challenge2/script.js @@ -5,3 +5,161 @@ TO-DO: - The calculator should be completely functional */ + +const SUBTRACK = "subtrack"; +const MULTIPLICATION = "multiplication"; +const DIVISION = "division"; +const ADD = "add"; +const EQUALS = "equals"; + +const operatorNames = [SUBTRACK, MULTIPLICATION, DIVISION, ADD, EQUALS]; + +const keyboardKeysOperators = { + "-": SUBTRACK, + "*": MULTIPLICATION, + "/": DIVISION, + "+": ADD, + Enter: EQUALS, +}; + +// OPERATORS +let operatorFunctions = { + subtrack: (a, b) => a - b, + multiplication: (a, b) => a * b, + division: (a, b) => { + if (b === 0) return "Divide by zero now allowed, re-enter number"; + return a / b; + }, + add: (a, b) => a + b, + equals: (a, b) => a, +}; + +const numberNames = [ + "zero", + "one", + "two", + "three", + "four", + "five", + "six", + "seven", + "eight", + "nine", +]; +// const keyOperators = + +const elementDisplay = document.getElementById("display"); +console.log("Wonka"); + +///Main functionality +let lastValue = ""; +let currentValue = ""; +let lastOperator = ""; +let lastKeyPressed = ""; + +function updateDisplay(val) { + elementDisplay.innerText = val; +} + +// KEYBOARD ENTRIES +addEventListener("keypress", (event) => { + if (event.key.toLowerCase() == "c") { + //delete using c + currentValue = currentValue.slice(0, currentValue.length - 1); + updateDisplay(currentValue); + + printValues(); + } else if (!isNaN(event.key)) { + numberPressed(event.key); + } else if (keyboardKeysOperators[event.key]) { + operationPressed(keyboardKeysOperators[event.key]); + } +}); + +function printValues() { + console.log({ lastValue, lastOperator, currentValue }); +} + +function numberPressed(number) { + if (lastOperator === EQUALS) { + currentValue = ""; + lastOperator = ""; + } + currentValue = currentValue + number; + elementDisplay.innerText = currentValue; + + lastKeyPressed = number; + printValues(); +} + +function operationPressed(operator) { + //TODO: Handle negative numbers + + ///Handle 1st number as negative + if (!currentValue) { + // if(!lastValue && !lastOperator && !currentValue){ + currentValue = "-"; + updateDisplay(currentValue); + return; + } + + //HANDLER TWO OPERATOR CLICK IN A ROW: update operator only unless it's a S + if (operatorNames.includes(lastKeyPressed) && lastOperator != EQUALS) { + console.log({ lastKeyPressed, newPressed: operator }); + lastOperator = operator; + + ///HANDLER NEGATIVE NUMBERS! + + return; + } + + calculateResult(operator); + lastKeyPressed = operator; +} + +function calculateResult(nextOperator) { + let result; + if (lastOperator == EQUALS) { + lastOperator = ""; //avoid execute an operation + } + + if (lastOperator && lastValue && currentValue) { + console.log("clicked: " + nextOperator); + result = operatorFunctions[lastOperator]( + Number(lastValue), + Number(currentValue) + ); + + if (isNaN(result)) { + alert("Can't divide by zero!"); // division by zero + return; + } + + updateDisplay(result ?? ""); + + if (lastOperator == EQUALS) { + currentValue = lastValue; //for chaining operations with the answer after EQUALS + } else { + currentValue = ""; + } + } + + lastValue = result ?? currentValue; + currentValue = nextOperator == EQUALS ? lastValue : ""; + lastOperator = nextOperator; + + printValues(); +} + +// NUMBERS +numberNames.forEach((id, index) => { + document.getElementById(id).addEventListener("click", () => { + numberPressed(index); + }); +}); + +operatorNames.forEach((idOperator) => + document.getElementById(idOperator).addEventListener("click", () => { + operationPressed(idOperator); + }) +); From 024016237de231c9946c3eb35e83d96b161d4c13 Mon Sep 17 00:00:00 2001 From: RonaldRis21 Date: Thu, 14 Nov 2024 08:48:53 -0600 Subject: [PATCH 2/3] Working state and all cases passed! First version before refractoring --- Front-End/challenge2/script.js | 46 ++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 13 deletions(-) diff --git a/Front-End/challenge2/script.js b/Front-End/challenge2/script.js index a38b311..65c6801 100644 --- a/Front-End/challenge2/script.js +++ b/Front-End/challenge2/script.js @@ -49,7 +49,6 @@ const numberNames = [ // const keyOperators = const elementDisplay = document.getElementById("display"); -console.log("Wonka"); ///Main functionality let lastValue = ""; @@ -65,7 +64,10 @@ function updateDisplay(val) { addEventListener("keypress", (event) => { if (event.key.toLowerCase() == "c") { //delete using c - currentValue = currentValue.slice(0, currentValue.length - 1); + lastOperator = ""; + currentValue = ""; + lastValue = ""; + lastKeyPressed = "c"; updateDisplay(currentValue); printValues(); @@ -92,38 +94,56 @@ function numberPressed(number) { printValues(); } -function operationPressed(operator) { +function operationPressed(currentOperatorPressed) { //TODO: Handle negative numbers ///Handle 1st number as negative - if (!currentValue) { + let isSignChange = false; + if (currentOperatorPressed == SUBTRACK) { // if(!lastValue && !lastOperator && !currentValue){ - currentValue = "-"; + if (lastOperator == EQUALS) { + //Start next operation with negative sign + currentValue = "-"; + lastOperator = ""; + } else if (currentValue == "-") { + currentValue = ""; + isSignChange = true; + } else if (currentValue == "") { + currentValue = "-"; + isSignChange = true; + } + updateDisplay(currentValue); + } + + if (isSignChange) { + lastKeyPressed = currentOperatorPressed; + printValues(); return; } - //HANDLER TWO OPERATOR CLICK IN A ROW: update operator only unless it's a S + //HANDLER OPERATOR CLICKED IN A ROW: update operator only unless it if (operatorNames.includes(lastKeyPressed) && lastOperator != EQUALS) { - console.log({ lastKeyPressed, newPressed: operator }); - lastOperator = operator; - - ///HANDLER NEGATIVE NUMBERS! + console.log({ lastKeyPressed, newPressed: currentOperatorPressed }); + lastOperator = currentOperatorPressed; + lastKeyPressed = currentOperatorPressed; return; } - calculateResult(operator); - lastKeyPressed = operator; + calculateResult(currentOperatorPressed); + lastKeyPressed = currentOperatorPressed; } function calculateResult(nextOperator) { let result; + printValues(); if (lastOperator == EQUALS) { lastOperator = ""; //avoid execute an operation } - if (lastOperator && lastValue && currentValue) { + // if (lastOperator && lastValue && currentValue) { + if (lastOperator && currentValue) { console.log("clicked: " + nextOperator); result = operatorFunctions[lastOperator]( Number(lastValue), From 68bcf787d097dbc6853f8a2eb19d0e648574a8be Mon Sep 17 00:00:00 2001 From: RonaldRis21 Date: Thu, 14 Nov 2024 09:37:12 -0600 Subject: [PATCH 3/3] Code refractored and double enter as a clear option added --- Front-End/challenge2/script.js | 130 ++++++++++++++++++--------------- 1 file changed, 71 insertions(+), 59 deletions(-) diff --git a/Front-End/challenge2/script.js b/Front-End/challenge2/script.js index 65c6801..b0980cf 100644 --- a/Front-End/challenge2/script.js +++ b/Front-End/challenge2/script.js @@ -46,16 +46,29 @@ const numberNames = [ "eight", "nine", ]; -// const keyOperators = - -const elementDisplay = document.getElementById("display"); ///Main functionality -let lastValue = ""; -let currentValue = ""; -let lastOperator = ""; -let lastKeyPressed = ""; +let data = { + lastValue: "", + lastOperator: "", + currentValue: "", + lastKeyPressed: "", +}; + +function printValues() { + // console.log(data); // Uncomment for testing purposes only +} +function resetData() { + data = { + lastValue: "", + lastOperator: "", + currentValue: "", + lastKeyPressed: "", + }; +} +//Display results on UI +const elementDisplay = document.getElementById("display"); function updateDisplay(val) { elementDisplay.innerText = val; } @@ -64,11 +77,8 @@ function updateDisplay(val) { addEventListener("keypress", (event) => { if (event.key.toLowerCase() == "c") { //delete using c - lastOperator = ""; - currentValue = ""; - lastValue = ""; - lastKeyPressed = "c"; - updateDisplay(currentValue); + resetData(); + updateDisplay(data.currentValue); printValues(); } else if (!isNaN(event.key)) { @@ -78,76 +88,77 @@ addEventListener("keypress", (event) => { } }); -function printValues() { - console.log({ lastValue, lastOperator, currentValue }); -} - function numberPressed(number) { - if (lastOperator === EQUALS) { - currentValue = ""; - lastOperator = ""; + if (data.lastOperator === EQUALS) { + data.currentValue = ""; + data.lastOperator = ""; } - currentValue = currentValue + number; - elementDisplay.innerText = currentValue; + data.currentValue = data.currentValue + number; + elementDisplay.innerText = data.currentValue; - lastKeyPressed = number; + data.lastKeyPressed = number; printValues(); } function operationPressed(currentOperatorPressed) { - //TODO: Handle negative numbers + printValues(); + + ///the equals operator serves as clear after returning operation + if (currentOperatorPressed === EQUALS && data.lastOperator === EQUALS) { + resetData(); + updateDisplay(""); + return; + } ///Handle 1st number as negative let isSignChange = false; - if (currentOperatorPressed == SUBTRACK) { - // if(!lastValue && !lastOperator && !currentValue){ - if (lastOperator == EQUALS) { - //Start next operation with negative sign - currentValue = "-"; - lastOperator = ""; - } else if (currentValue == "-") { - currentValue = ""; + if (currentOperatorPressed === SUBTRACK) { + if (data.lastOperator === EQUALS) { + data.currentValue = "-"; isSignChange = true; - } else if (currentValue == "") { - currentValue = "-"; + data.lastOperator = ""; + } else if (data.currentValue === "-") { + data.currentValue = ""; + isSignChange = true; + } else if (data.currentValue === "") { + data.currentValue = "-"; isSignChange = true; } - updateDisplay(currentValue); + updateDisplay(data.currentValue); } if (isSignChange) { - lastKeyPressed = currentOperatorPressed; - printValues(); + data.lastKeyPressed = currentOperatorPressed; return; } //HANDLER OPERATOR CLICKED IN A ROW: update operator only unless it - if (operatorNames.includes(lastKeyPressed) && lastOperator != EQUALS) { - console.log({ lastKeyPressed, newPressed: currentOperatorPressed }); - lastOperator = currentOperatorPressed; - - lastKeyPressed = currentOperatorPressed; + if ( + operatorNames.includes(data.lastKeyPressed) && + data.lastOperator !== EQUALS + ) { + data.lastOperator = currentOperatorPressed; + data.lastKeyPressed = currentOperatorPressed; return; } calculateResult(currentOperatorPressed); - lastKeyPressed = currentOperatorPressed; + data.lastKeyPressed = currentOperatorPressed; + printValues(); } function calculateResult(nextOperator) { let result; - printValues(); - if (lastOperator == EQUALS) { - lastOperator = ""; //avoid execute an operation + if (data.lastOperator === EQUALS) { + data.lastOperator = ""; //avoid execute an operation } // if (lastOperator && lastValue && currentValue) { - if (lastOperator && currentValue) { - console.log("clicked: " + nextOperator); - result = operatorFunctions[lastOperator]( - Number(lastValue), - Number(currentValue) + if (data.lastOperator && data.currentValue) { + result = operatorFunctions[data.lastOperator]( + Number(data.lastValue), + Number(data.currentValue) ); if (isNaN(result)) { @@ -156,22 +167,23 @@ function calculateResult(nextOperator) { } updateDisplay(result ?? ""); + if (nextOperator === EQUALS) { + updateDisplay("=\t\t\t\t " + result); + } - if (lastOperator == EQUALS) { - currentValue = lastValue; //for chaining operations with the answer after EQUALS + if (data.lastOperator === EQUALS) { + data.currentValue = data.lastValue; //for chaining operations with the answer after EQUALS } else { - currentValue = ""; + data.currentValue = ""; } } - lastValue = result ?? currentValue; - currentValue = nextOperator == EQUALS ? lastValue : ""; - lastOperator = nextOperator; - - printValues(); + data.lastValue = result ?? data.currentValue; + data.currentValue = nextOperator == EQUALS ? data.lastValue : ""; + data.lastOperator = nextOperator; } -// NUMBERS +// LISTENNERS on UI Buttons clicked numberNames.forEach((id, index) => { document.getElementById(id).addEventListener("click", () => { numberPressed(index);