From 176bb0873a8c1799cd4ba9a7b8740d11850d6a3b Mon Sep 17 00:00:00 2001 From: Muzakkir Date: Thu, 30 Dec 2021 18:29:32 +0530 Subject: [PATCH 1/3] created: unconvetional calculator usinf if-else --- .../assets/app.css | 76 +++++++++++++++++++ .../assets/app.js | 72 ++++++++++++++++++ .../assets/vendor.js | 13 ++++ .../02-unconventional-calc-if-else/index.html | 36 +++++++++ 4 files changed, 197 insertions(+) create mode 100644 tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css create mode 100644 tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js create mode 100644 tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/vendor.js create mode 100644 tasks-by-users/mmusk/02-unconventional-calc-if-else/index.html diff --git a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css new file mode 100644 index 0000000..fcef2b3 --- /dev/null +++ b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css @@ -0,0 +1,76 @@ +* { + box-sizing: border-box; + font-family: 'Roboto', open-sans; + margin: 0; + padding: 0; + box-sizing: border-box; + } + + header { + background: #023d6d; + color: white; + padding: 1rem; + text-align: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + width: 100%; + } + + #results, + #calculator { + margin: 2rem auto; + width: 40rem; + max-width: 90%; + border: 1px solid #023d6d; + border-radius: 10px; + padding: 1rem; + color: #023d6d; + } + + #results { + text-align: center; + } + + #calculator input { + font: inherit; + font-size: 3rem; + border: 2px solid #023d6d; + width: 10rem; + padding: 0.15rem; + margin: auto; + display: block; + color: #023d6d; + text-align: center; + } + + #calculator input:focus { + outline: none; + } + + #calculator button { + font: inherit; + background: #023d6d; + color: white; + border: 1px solid #023d6d; + padding: 1rem; + cursor: pointer; + } + + #calculator button:focus { + outline: none; + } + + #calculator button:hover, + #calculator button:active { + background: #084f88; + border-color: #084f88; + } + + #calc-actions button { + width: 4rem; + } + + #calc-actions { + margin-top: 1rem; + text-align: center; + } + \ No newline at end of file diff --git a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js new file mode 100644 index 0000000..036dd1c --- /dev/null +++ b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js @@ -0,0 +1,72 @@ +const defaultResult = 0; +let currentResult = defaultResult; +const logEntries = []; + +function getUserInput() { + return parseInt(userInput.value); +} + +function createAndWriteOutput(operator, resultBeforeCalc, calcNum) { + const calcDescription = `${resultBeforeCalc} ${operator} ${calcNum}`; + outputResult(currentResult, calcDescription); +} + +function writeToLog( + operatorIdentifier, + prevResult, + operationNumber, + newResult +) { + const logEntry = { + operation: operatorIdentifier, + prevResult: prevResult, + number: operationNumber, + result: newResult, + }; + logEntries.push(logEntry); + console.log(logEntries); +} + +function calculateResult(calculationType) { + const enteredNum = getUserInput(); + let currentResult; + let mathOperator; + + if (calculation === "ADD") { + currentResult += enteredNum; + mathOperator = "+"; + } else if (calculationType === "SUBTRACT") { + currentResult -= enteredNum; + mathOperator = "-"; + } else if (calculationType === "MULTIPLY") { + currentResult *= enteredNum; + mathOperator = "*"; + } else calculationType === "DIVIDE"; + { + currentResult /= enteredNum; + mathOperator = "/"; + } + createAndWriteOutput(mathOperator, currentResult, enteredNum); + writeToLog(calculationType, initialResult, enteredNum, currentResult); +} + +function add() { + calculateResult("ADD"); +} + +function subtract() { + calculateResult("SUBTRACT"); +} + +function multiply() { + calculateResult("MULTIPLY"); +} + +function divide() { + calculateResult("DIVIDE"); +} + +addBtn.addEventListener("click", add); +subtractBtn.addEventListener("click", subtract); +multiplyBtn.addEventListener("click", multiply); +divideBtn.addEventListener("click", multiply); diff --git a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/vendor.js b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/vendor.js new file mode 100644 index 0000000..5e6f44d --- /dev/null +++ b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/vendor.js @@ -0,0 +1,13 @@ +const userInput = document.getElementById("input-number"); +const addBtn = document.getElementById("btn-add"); +const subtractBtn = document.getElementById("btn-subtract"); +const multiplyBtn = document.getElementById("btn-multiply"); +const divideBtn = document.getElementById("btn-divide"); + +const currentResultOutput = document.getElementById("current-result"); +const currentCalculationOutput = document.getElementById("current-calculation"); + +function outputResult(result, text) { + currentResultOutput.textContent = result; + currentCalculationOutput.textContent = text; +} diff --git a/tasks-by-users/mmusk/02-unconventional-calc-if-else/index.html b/tasks-by-users/mmusk/02-unconventional-calc-if-else/index.html new file mode 100644 index 0000000..295d68b --- /dev/null +++ b/tasks-by-users/mmusk/02-unconventional-calc-if-else/index.html @@ -0,0 +1,36 @@ + + + + + + + Calculator + + + + +
+

The Unconventional Calculator

+
+ +
+ +
+ + + + +
+
+
+

0

+

Result: 0

+
+ + + + + From cd08869dc2d7ec5230986c57c25b9e3c60acf65d Mon Sep 17 00:00:00 2001 From: Muzakkir Date: Thu, 30 Dec 2021 18:38:05 +0530 Subject: [PATCH 2/3] enhanced: grouped css properties --- .../02-unconventional-calc-if-else/assets/app.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css index fcef2b3..180f52d 100644 --- a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css +++ b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css @@ -9,9 +9,13 @@ header { background: #023d6d; color: white; + padding: 1rem; + text-align: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); + width: 100%; } @@ -23,6 +27,7 @@ border: 1px solid #023d6d; border-radius: 10px; padding: 1rem; + color: #023d6d; } @@ -33,12 +38,16 @@ #calculator input { font: inherit; font-size: 3rem; + border: 2px solid #023d6d; width: 10rem; padding: 0.15rem; margin: auto; + display: block; + color: #023d6d; + text-align: center; } @@ -48,10 +57,13 @@ #calculator button { font: inherit; + background: #023d6d; color: white; + border: 1px solid #023d6d; padding: 1rem; + cursor: pointer; } @@ -71,6 +83,7 @@ #calc-actions { margin-top: 1rem; + text-align: center; } \ No newline at end of file From d38b0912546b4b832f2a681b3e3d970df35c15fe Mon Sep 17 00:00:00 2001 From: Muzakkir Date: Thu, 30 Dec 2021 18:38:23 +0530 Subject: [PATCH 3/3] added: and statement --- .../assets/app.js | 87 +++++++++++-------- 1 file changed, 52 insertions(+), 35 deletions(-) diff --git a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js index 036dd1c..6b5735b 100644 --- a/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js +++ b/tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js @@ -1,72 +1,89 @@ const defaultResult = 0; let currentResult = defaultResult; -const logEntries = []; +let logEntries = []; -function getUserInput() { - return parseInt(userInput.value); +// Gets input from input field +function getUserNumberInput() { + return parseInt(usrInput.value); } -function createAndWriteOutput(operator, resultBeforeCalc, calcNum) { - const calcDescription = `${resultBeforeCalc} ${operator} ${calcNum}`; - outputResult(currentResult, calcDescription); +// Generates and writes calculation log +function createAndWriteOutput(operator, resultBeforeCalc, calcNumber) { + const calcDescription = `${resultBeforeCalc} ${operator} ${calcNumber}`; + outputResult(currentResult, calcDescription); // from vendor file } function writeToLog( - operatorIdentifier, + operationIdentifier, prevResult, operationNumber, newResult ) { const logEntry = { - operation: operatorIdentifier, + operation: operationIdentifier, prevResult: prevResult, number: operationNumber, - result: newResult, + result: newResult }; logEntries.push(logEntry); console.log(logEntries); } function calculateResult(calculationType) { - const enteredNum = getUserInput(); - let currentResult; - let mathOperator; + const enteredNumber = getUserNumberInput(); + if ( + calculationType !== 'ADD' && + calculationType !== 'SUBTRACT' && + calculationType !== 'MULTIPLY' && + calculationType !== 'DIVIDE' + ) + return; - if (calculation === "ADD") { - currentResult += enteredNum; - mathOperator = "+"; - } else if (calculationType === "SUBTRACT") { - currentResult -= enteredNum; - mathOperator = "-"; - } else if (calculationType === "MULTIPLY") { - currentResult *= enteredNum; - mathOperator = "*"; - } else calculationType === "DIVIDE"; - { - currentResult /= enteredNum; - mathOperator = "/"; + // if ( + // calculationType === 'ADD' || + // calculationType === 'SUBTRACT' || + // calculationType === 'MULTIPLY' || + // calculationType === 'DIVIDE' + // ) { + + const initialResult = currentResult; + let mathOperator; + if (calculationType === 'ADD') { + currentResult += enteredNumber; + mathOperator = '+'; + } else if (calculationType === 'SUBTRACT') { + currentResult -= enteredNumber; + mathOperator = '-'; + } else if (calculationType === 'MULTIPLY') { + currentResult *= enteredNumber; + mathOperator = '*'; + } else if (calculationType === 'DIVIDE') { + currentResult /= enteredNumber; + mathOperator = '/'; } - createAndWriteOutput(mathOperator, currentResult, enteredNum); - writeToLog(calculationType, initialResult, enteredNum, currentResult); + + createAndWriteOutput(mathOperator, initialResult, enteredNumber); + writeToLog(calculationType, initialResult, enteredNumber, currentResult); + // } } function add() { - calculateResult("ADD"); + calculateResult('ADD'); } function subtract() { - calculateResult("SUBTRACT"); + calculateResult('SUBTRACT'); } function multiply() { - calculateResult("MULTIPLY"); + calculateResult('MULTIPLY'); } function divide() { - calculateResult("DIVIDE"); + calculateResult('DIVIDE'); } -addBtn.addEventListener("click", add); -subtractBtn.addEventListener("click", subtract); -multiplyBtn.addEventListener("click", multiply); -divideBtn.addEventListener("click", multiply); +addBtn.addEventListener('click', add); +subtractBtn.addEventListener('click', subtract); +multiplyBtn.addEventListener('click', multiply); +divideBtn.addEventListener('click', divide);