Fixed regex bug and added for loop to allow more than 1 calculation b…

…ased on feedback
angaaruriakhil · Aug 30, 2021 · 665a06f · 665a06f
1 parent 5da2e36
commit 665a06f
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 61 deletions.
diff --git a/dist/main.dev.js b/dist/main.dev.js
@@ -8,40 +8,42 @@ function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-var screenInput = document.querySelector("#screen_input");
-var screenOutput = document.querySelector("#screen_output"); // Special Button Functionality - Functions
+var screenInput = document.querySelector("#screenInput");
+var screenOutput = document.querySelector("#screenOutput"); // Special Button Functionality - Functions
 
 function calculateAnswer() {
-  var calc_answer;
-  var regex_operators = /[+-/*]/;
+  var regex_operators = /[+/*-]/g;
   var numberArray = screenInput.innerText.split(/[+\-/*]/);
 
   var floatArray = _toConsumableArray(numberArray).map(function (number) {
     return parseFloat(number);
   });
 
-  var whichOperatorData = screenInput.innerText.match(/[+\-/*]/);
-  var whichOperator = whichOperatorData[0];
+  var whichOperatorData = screenInput.innerText.match(/[+\-/*]/g); // First switch handles the first operation with the first two numbers.
 
-  switch (whichOperator) {
-    case "+":
-      calc_answer = floatArray[0] + floatArray[1];
-      break;
+  var answer = floatArray[0];
 
-    case "-":
-      calc_answer = floatArray[0] - floatArray[1];
-      break;
+  for (var i = 0; i < floatArray.length; i++) {
+    switch (whichOperatorData[i]) {
+      case "+":
+        answer += floatArray[i + 1];
+        break;
 
-    case "*":
-      calc_answer = floatArray[0] * floatArray[1];
-      break;
+      case "-":
+        answer -= floatArray[i + 1];
+        break;
 
-    case "/":
-      calc_answer = floatArray[0] / floatArray[1];
-      break;
+      case "*":
+        answer *= floatArray[i + 1];
+        break;
+
+      case "/":
+        answer /= floatArray[i + 1];
+        break;
+    }
   }
 
-  return calc_answer;
+  return answer;
 }
 
 function handleEquals(event) {

diff --git a/index.html b/index.html
@@ -9,9 +9,9 @@
 </head>
 <body>
   <div id ="calculator">
-    <div id="screen-container">  
-      <div id ="screen_input"> </div> 
-      <div id="screen_output"> </div> 
+    <div id="screenContainer">  
+      <div id ="screenInput"> </div> 
+      <div id="screenOutput"> </div> 
     </div>
     <div id = "buttons"> 
       <button id="ac" class="buttons specialButtons">AC</button>

diff --git a/main.js b/main.js
@@ -1,34 +1,36 @@
-let screenInput = document.querySelector("#screen_input");
-let screenOutput = document.querySelector("#screen_output");
+let screenInput = document.querySelector("#screenInput");
+let screenOutput = document.querySelector("#screenOutput");
 
 
 // Special Button Functionality - Functions
 
-function calculateAnswer() {
-  let calc_answer; 
-  let regex_operators = /[+-/*]/;
+function calculateAnswer() { 
+  let regex_operators = /[+/*-]/g;
   let numberArray = screenInput.innerText.split(/[+\-/*]/);
   let floatArray = [...numberArray].map(number => {
     return parseFloat(number); 
   }); 
-  let whichOperatorData = screenInput.innerText.match(/[+\-/*]/);
-  let whichOperator = whichOperatorData[0];
-  switch (whichOperator) {
-    case "+": 
-      calc_answer = floatArray[0] + floatArray[1];
-      break; 
-    case "-": 
-      calc_answer = floatArray[0] - floatArray[1];
-      break;
-    case "*": 
-      calc_answer = floatArray[0] * floatArray[1];
-      break;
-    case "/": 
-      calc_answer = floatArray[0] / floatArray[1];
-      break;
+  let whichOperatorData = screenInput.innerText.match(/[+\-/*]/g);
+  // First switch handles the first operation with the first two numbers.
+  let answer = floatArray[0];
+  for (let i=0; i<floatArray.length; i++) {
+    switch (whichOperatorData[i]) {
+      case "+": 
+        answer += floatArray[i+1];
+        break; 
+      case "-": 
+        answer -= floatArray[i+1];
+        break;
+      case "*": 
+        answer *= floatArray[i+1];
+        break;
+      case "/": 
+        answer /= floatArray[i+1];
+        break;
   }
-  return calc_answer;
 }
+  return answer;
+} 
 
 function handleEquals(event) {
   screenOutput.innerText = ""; 
@@ -97,6 +99,4 @@ allNumbers.forEach(number => {
 allButtons.forEach(button => {
   button.addEventListener("mousedown", buttonPress)
   button.addEventListener("mouseup", buttonUnpress)
-})
-
-
+})
diff --git a/styles.css b/styles.css
@@ -15,7 +15,7 @@ body {
   align-items: center;
 }
 
-#screen-container {
+#screenContainer {
   height: 150px;
   background: linear-gradient(90deg, rgba(2, 0, 36, 0.15) 0%, rgba(9, 9, 121, 0.15) 35%, rgba(0, 212, 255, 0.15) 100%);
   border: 1px solid black;
@@ -29,12 +29,7 @@ body {
   font-family: "Courier New";
 }
 
-#screen_input {
-  height: 50%;
-  color: white;
-}
-
-#screen_output {
+#screenInput, #screenOutput {
   height: 50%;
   color: white;
 }

diff --git a/styles.scss b/styles.scss
@@ -14,7 +14,7 @@ body {
   justify-content: center; 
   align-items: center;  
 }
-#screen-container { 
+#screenContainer { 
   height: 150px;
   background: linear-gradient(90deg, rgba(2,0,36,0.15) 0%, rgba(9,9,121,0.15) 35%, rgba(0,212,255,0.15) 100%);  
   border: 1px solid black;
@@ -27,22 +27,17 @@ body {
   font-size: 40px; 
   font-family: "Courier New";
 }
-#screen_input {
+#screenInput, #screenOutput {
   height: 50%; 
   color: white; 
 }
-#screen_output {
-  height: 50%;
-  color: white;  
-}
 
 #calculator {
   display: flex; 
   flex-direction: column;
   padding: 10px; 
   border: 5px solid black;
   border-radius: 15px;
-  // box-shadow: 10px 5px 5px #344F83; 
   background: linear-gradient(#647AAF, #092659);
   width: 30vw; 
   height: 70vh;