basic functionality added. Refactored code to be shorter. Still need …

…to do delete button and calculation functionality
angaaruriakhil · Aug 19, 2021 · 523ba6a · 523ba6a
1 parent 3065914
commit 523ba6a
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 161 deletions.
diff --git a/dist/main.dev.js b/dist/main.dev.js
@@ -1,96 +1,97 @@
 "use strict";
 
-var screen = document.querySelector("#screen");
+var screen = document.querySelector("#screen"); // Special Button Functionality - Functions
+// If statement used here to stop 2 operators being used in succession. 
 
-function delete_entry() {// screen.innerHTML.slice(0, -1);
-  // fix this
-}
-
-function ac() {
-  screen.innerHTML = "";
-}
-
-function add() {
-  screen.innerHTML += "+";
-}
-
-function subtract() {
-  screen.innerHTML += "-";
-}
-
-function divide() {
-  screen.innerHTML += "/";
-}
+function equals(event) {
+  var regex_equals = /[=]/;
 
-function multiply() {
-  screen.innerHTML += "*";
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
 }
 
-function decimal_point() {
-  // some kind of if statement needed here to stop 2 decimals being used. 
-  screen.innerHTML += ".";
-}
+function decimal_point(event) {
+  var regex_decimal = /[.]/;
 
-function equals() {
-  screen.innerHTML += "=<br>";
-  screen.contentWindow.location.reload(true);
+  if (!regex_decimal.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
 }
 
-function one() {
-  screen.innerHTML += "1";
+function delete_entry() {// screen.innerHTML.slice(0, -1);
+  // fix this
 }
 
-function two() {
-  screen.innerHTML += "2";
-}
+function add(event) {
+  var regex_equals = /[+]/;
 
-function three() {
-  screen.innerHTML += "3";
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
 }
 
-function four() {
-  screen.innerHTML += "4";
-}
+function subtract(event) {
+  var regex_equals = /[-]/;
 
-function five() {
-  screen.innerHTML += "5";
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
 }
 
-function six() {
-  screen.innerHTML += "6";
-}
+function divide(event) {
+  var regex_equals = /[÷]/;
 
-function seven() {
-  screen.innerHTML += "7";
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
 }
 
-function eight() {
-  screen.innerHTML += "8";
-}
+function multiply(event) {
+  var regex_equals = /[*]/;
 
-function nine() {
-  screen.innerHTML += "9";
-}
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
+} // Special Button Functionality - Event Listeners 
 
-function zero() {
-  screen.innerHTML += "0";
-}
 
-document.querySelector("#delete").addEventListener("click", delete_entry);
-document.querySelector("#ac").addEventListener("click", ac);
-document.querySelector("#add").addEventListener("click", add);
-document.querySelector("#subtract").addEventListener("click", subtract);
-document.querySelector("#divide").addEventListener("click", divide);
-document.querySelector("#multiply").addEventListener("click", multiply);
-document.querySelector("#decimal_point").addEventListener("click", decimal_point);
-document.querySelector("#equals").addEventListener("click", equals);
-document.querySelector("#one").addEventListener("click", one);
-document.querySelector("#two").addEventListener("click", two);
-document.querySelector("#three").addEventListener("click", three);
-document.querySelector("#four").addEventListener("click", four);
-document.querySelector("#five").addEventListener("click", five);
-document.querySelector("#six").addEventListener("click", six);
-document.querySelector("#seven").addEventListener("click", seven);
-document.querySelector("#eight").addEventListener("click", eight);
-document.querySelector("#nine").addEventListener("click", nine);
-document.querySelector("#zero").addEventListener("click", zero);
+var acButton = document.querySelector("#ac");
+acButton.addEventListener("click", function () {
+  screen.innerHTML = "";
+});
+var decimalButton = document.querySelector("#decimal-point");
+decimalButton.addEventListener("click", decimal_point);
+var equalsButton = document.querySelector("#equals");
+equalsButton.addEventListener("click", equals);
+var deleteButton = document.querySelector("#delete");
+deleteButton.addEventListener("click", delete_entry);
+var addButton = document.querySelector("#add");
+addButton.addEventListener("click", add);
+var subtractButton = document.querySelector("#subtract");
+subtractButton.addEventListener("click", subtract);
+var divideButton = document.querySelector("#divide");
+divideButton.addEventListener("click", divide);
+var multiplyButton = document.querySelector("#multiply");
+multiplyButton.addEventListener("click", multiply); // Basic Button Functionality and pressing animation 
+
+var allButtons = document.querySelectorAll(".buttons");
+var allNumbers = document.querySelectorAll(".numbers");
+
+function buttonPress(event) {
+  event.target.classList.add("pressed");
+}
+
+function buttonUnpress(event) {
+  event.target.classList.remove("pressed");
+}
+
+allNumbers.forEach(function (number) {
+  number.addEventListener("click", function (event) {
+    screen.innerHTML += event.target.innerHTML;
+  });
+});
+allButtons.forEach(function (button) {
+  button.addEventListener("mousedown", buttonPress);
+  button.addEventListener("mouseup", buttonUnpress);
+});
diff --git a/index.html b/index.html
@@ -4,34 +4,33 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="styles.css">
-  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap" rel="stylesheet"> 
+  <link rel="stylesheet" href="styles.css"> 
   <title>JavaScript Calculator</title>
 </head>
 <body>
   <div id = "calculator"> 
     <div id = "screen"> </div> 
     <div id = "buttons"> 
-      <button id="ac" class = "buttons"> AC </button>
-      <button id ="delete" class = "buttons"> DEL </button>
-      <button id="multiply" class = "buttons"> * </button>
-      <button id="add" class = "buttons"> + </button>
-      <button id="subtract" class = "buttons"> - </button>
-      <button id="divide" class = "buttons"> ÷ </button>
-      <button id="decimal_point" class = "buttons"> . </button>
-      <button id="equals" class = "buttons"> = </button>
-      <button id="one" class = "buttons"> 1 </button>
-      <button id="two" class = "buttons"> 2 </button>
-      <button id="three" class = "buttons"> 3 </button>
-      <button id="four" class = "buttons"> 4 </button>
-      <button id="five" class = "buttons"> 5 </button>
-      <button id="six" class = "buttons"> 6 </button>
-      <button id="seven" class = "buttons"> 7 </button>
-      <button id="eight" class = "buttons"> 8 </button>
-      <button id="nine" class = "buttons"> 9 </button>
-      <button id="zero" class = "buttons"> 0 </button>
+      <button id="ac" class = "buttons special_buttons"> AC </button>
+      <button id ="delete" class = "buttons special_buttons"> DEL </button>
+      <button id="multiply" class = "buttons special_buttons"> * </button>
+      <button id="add" class = "buttons special_buttons"> + </button>
+      <button id="subtract" class = "buttons special_buttons"> - </button>
+      <button id="divide" class = "buttons special_buttons"> ÷ </button>
+      <button id="decimal-point" class = "buttons special_buttons"> . </button>
+      <button id="equals" class = "buttons special_buttons"> = </button>
+      <button id="one" class = "buttons numbers"> 1 </button>
+      <button id="two" class = "buttons numbers"> 2 </button>
+      <button id="three" class = "buttons numbers"> 3 </button>
+      <button id="four" class = "buttons numbers"> 4 </button>
+      <button id="five" class = "buttons numbers"> 5 </button>
+      <button id="six" class = "buttons numbers"> 6 </button>
+      <button id="seven" class = "buttons numbers"> 7 </button>
+      <button id="eight" class = "buttons numbers"> 8 </button>
+      <button id="nine" class = "buttons numbers"> 9 </button>
+      <button id="zero" class = "buttons numbers"> 0 </button>
       </div>
-  </div>
+  </>
 </body>
 <script src="main.js" defer> </script> 
 </html>
diff --git a/main.js b/main.js
@@ -1,81 +1,98 @@
 let screen = document.querySelector("#screen");
 
+
+// Special Button Functionality - Functions
+
+// If statement used here to stop 2 operators being used in succession. 
+
+function equals(event) {
+  let regex_equals = /[=]/
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML
+  }
+}
+
+function decimal_point(event) {
+  let regex_decimal = /[.]/
+  if (!regex_decimal.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML
+  }
+} 
+
 function delete_entry() {
   // screen.innerHTML.slice(0, -1);
   // fix this
 }
-function ac() {
-  screen.innerHTML = ""
-}
-function add() {
-  screen.innerHTML += "+"
-}
-function subtract() {
-  screen.innerHTML += "-"
-}
-function divide() {
-  screen.innerHTML += "/"
-}
-function multiply() {
-  screen.innerHTML += "*"
-}
-function decimal_point() {
-  // some kind of if statement needed here to stop 2 decimals being used. 
-  screen.innerHTML += "."
-}
-function equals() {
-  screen.innerHTML += "=<br>"
-  screen.contentWindow.location.reload(true);
-}
-function one() {
-  screen.innerHTML += "1"
-}
-function two() {
-  screen.innerHTML += "2"
-}
-function three() {
-  screen.innerHTML += "3"
-}
-function four() {
-  screen.innerHTML += "4"
-}
-function five() {
-  screen.innerHTML += "5"
-}
-function six() {
-  screen.innerHTML += "6"
+
+function add(event) {
+  let regex_equals = /[+]/
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML
+  }
 }
-function seven() {
-  screen.innerHTML += "7"
+
+function subtract(event) {
+  let regex_equals = /[-]/
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML;
+  }
 }
-function eight() {
-  screen.innerHTML += "8"
+
+function divide(event) {
+  let regex_equals = /[÷]/
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML
+  }
 }
-function nine() {
-  screen.innerHTML += "9"
+
+function multiply(event) {
+  let regex_equals = /[*]/
+  if (!regex_equals.test(screen.innerHTML)) {
+    screen.innerHTML += event.target.innerHTML
+  }
 }
-function zero() {
-  screen.innerHTML += "0"
+// Special Button Functionality - Event Listeners 
+
+let acButton = document.querySelector("#ac")
+acButton.addEventListener("click", () => {screen.innerHTML = ""} ) 
+let decimalButton = document.querySelector("#decimal-point"); 
+decimalButton.addEventListener("click", decimal_point)
+let equalsButton = document.querySelector("#equals"); 
+equalsButton.addEventListener("click", equals);
+let deleteButton = document.querySelector("#delete");
+deleteButton.addEventListener("click", delete_entry);
+let addButton = document.querySelector("#add");
+addButton.addEventListener("click", add);
+let subtractButton = document.querySelector("#subtract");
+subtractButton.addEventListener("click", subtract);
+let divideButton = document.querySelector("#divide");
+divideButton.addEventListener("click", divide);
+let multiplyButton = document.querySelector("#multiply");
+multiplyButton.addEventListener("click", multiply);
+
+
+
+// Basic Button Functionality and pressing animation 
+
+let allButtons = document.querySelectorAll(".buttons");
+let allNumbers = document.querySelectorAll(".numbers")
+
+function buttonPress(event) {
+  event.target.classList.add("pressed")
+  }
+function buttonUnpress(event) {
+  event.target.classList.remove("pressed")
 }
 
-document.querySelector("#delete").addEventListener("click", delete_entry);
-document.querySelector("#ac").addEventListener("click", ac);
-document.querySelector("#add").addEventListener("click", add);
-document.querySelector("#subtract").addEventListener("click", subtract);
-document.querySelector("#divide").addEventListener("click", divide);
-document.querySelector("#multiply").addEventListener("click", multiply);
-document.querySelector("#decimal_point").addEventListener("click", decimal_point);
-document.querySelector("#equals").addEventListener("click", equals);
-document.querySelector("#one").addEventListener("click", one);
-document.querySelector("#two").addEventListener("click", two);
-document.querySelector("#three").addEventListener("click", three);
-document.querySelector("#four").addEventListener("click", four);
-document.querySelector("#five").addEventListener("click", five);
-document.querySelector("#six").addEventListener("click", six);
-document.querySelector("#seven").addEventListener("click", seven);
-document.querySelector("#eight").addEventListener("click", eight);
-document.querySelector("#nine").addEventListener("click", nine);
-document.querySelector("#zero").addEventListener("click", zero);
+allNumbers.forEach(number => {
+  number.addEventListener("click", (event) => {
+    screen.innerHTML += event.target.innerHTML
+  })
+})
 
+allButtons.forEach(button => {
+  button.addEventListener("mousedown", buttonPress)
+  button.addEventListener("mouseup", buttonUnpress)
+})