created: unconventional calculator using if-else

tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.css

@@ -0,0 +1,89 @@
+* {
+    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;
+  }
+

tasks-by-users/mmusk/02-unconventional-calc-if-else/assets/app.js

@@ -0,0 +1,89 @@
+const defaultResult = 0;
+let currentResult = defaultResult;
+let logEntries = [];
+
+// Gets input from input field
+function getUserNumberInput() {
+  return parseInt(usrInput.value);
+}
+
+// Generates and writes calculation log
+function createAndWriteOutput(operator, resultBeforeCalc, calcNumber) {
+  const calcDescription = `${resultBeforeCalc} ${operator} ${calcNumber}`;
+  outputResult(currentResult, calcDescription); // from vendor file
+}
+
+function writeToLog(
+  operationIdentifier,
+  prevResult,
+  operationNumber,
+  newResult
+) {
+  const logEntry = {
+    operation: operationIdentifier,
+    prevResult: prevResult,
+    number: operationNumber,
+    result: newResult
+  };
+  logEntries.push(logEntry);
+  console.log(logEntries);
+}
+
+function calculateResult(calculationType) {
+  const enteredNumber = getUserNumberInput();
+  if (
+    calculationType !== 'ADD' &&
+    calculationType !== 'SUBTRACT' &&
+    calculationType !== 'MULTIPLY' &&
+    calculationType !== 'DIVIDE' 
+    )
+    return;
+
+  // 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, initialResult, enteredNumber);
+  writeToLog(calculationType, initialResult, enteredNumber, 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', divide);

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;
+}

tasks-by-users/mmusk/02-unconventional-calc-if-else/index.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Calculator</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./assets/app.css" />
+  </head>
+  <body>
+    <header>
+      <h1>The Unconventional Calculator</h1>
+    </header>
+
+    <section id="calculator">
+      <input type="number" id="input-number" />
+      <div id="calc-actions">
+        <button type="button" id="btn-add">+</button>
+        <button type="button" id="btn-subtract">-</button>
+        <button type="button" id="btn-multiply">*</button>
+        <button type="button" id="btn-divide">/</button>
+      </div>
+    </section>
+    <section id="results">
+      <h2 id="current-calculation">0</h2>
+      <h2>Result: <span id="current-result">0</span></h2>
+    </section>
+
+    <script src="./assets/vendor.js"></script>
+    <script src="./assets/app.js"></script>
+  </body>
+</html>