finally fixed the calculator with logic that made sense to me just ne…

…ed to add in decimals
AirTechWick · Sep 12, 2021 · 2b0893a · 2b0893a
1 parent 4774075
commit 2b0893a
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -19,22 +19,22 @@
             </div>
         </div>
         <div id="buttonGroup">
-            <div class="button number" value="7">7</div>
-            <div class="button number" value="8">8</div>
-            <div class="button number" value="9">9</div>
-            <div class="button operator" value="÷">÷</div>
-            <div class="button number" value="4">4</div>
-            <div class="button number" value="5">5</div>
-            <div class="button number" value="6">6</div>
-            <div class="button operator" value="x">x</div>
-            <div class="button number" value="1">1</div>
-            <div class="button number" value="2">2</div>
-            <div class="button number" value="3">3</div>
-            <div class="button operator" value="-">-</div>
-            <div class="button" value=".">.</div>
-            <div class="button number" value="0">0</div>
-            <div class="button" id="equalSign" value="=">=</div>
-            <div class="button operator" value="+">+</div>
+            <button class="button number" value="7">7</button>
+            <button class="button number" value="8">8</button>
+            <button class="button number" value="9">9</button>
+            <button class="button operator" value="÷">÷</button>
+            <button class="button number" value="4">4</button>
+            <button class="button number" value="5">5</button>
+            <button class="button number" value="6">6</button>
+            <button class="button operator" value="x">x</button>
+            <button class="button number" value="1">1</button>
+            <button class="button number" value="2">2</button>
+            <button class="button number" value="3">3</button>
+            <button class="button operator" value="-">-</button>
+            <button class="button" value=".">.</button>
+            <button class="button number" value="0">0</button>
+            <button class="button" id="equalSign" value="=">=</button>
+            <button class="button operator" value="+">+</button>
         </div>
     </div>
 </div>

diff --git 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,39 +19,37 @@ 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)
 {
     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();
diff --git 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);
 }