fixed delete button and decimal class

angaaruriakhil · Aug 19, 2021 · 6a4e1fc · 6a4e1fc
1 parent 523ba6a
commit 6a4e1fc
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 21 deletions.
diff --git a/dist/main.dev.js b/dist/main.dev.js
@@ -1,13 +1,14 @@
 "use strict";
 
-var screen = document.querySelector("#screen"); // Special Button Functionality - Functions
+var screen = document.querySelector("#screen");
+var screenOutput = document.querySelector("#screen_output"); // Special Button Functionality - Functions
 // If statement used here to stop 2 operators being used in succession. 
 
 function equals(event) {
   var regex_equals = /[=]/;
 
-  if (!regex_equals.test(screen.innerHTML)) {
-    screen.innerHTML += event.target.innerHTML;
+  if (!regex_equals.test(screenOutput.innerHTML)) {
+    screenOutput.innerHTML += event.target.innerHTML;
   }
 }
 
@@ -19,8 +20,8 @@ function decimal_point(event) {
   }
 }
 
-function delete_entry() {// screen.innerHTML.slice(0, -1);
-  // fix this
+function delete_entry() {
+  screen.innerHTML = screen.innerText.slice(0, -1);
 }
 
 function add(event) {
@@ -59,8 +60,9 @@ function multiply(event) {
 var acButton = document.querySelector("#ac");
 acButton.addEventListener("click", function () {
   screen.innerHTML = "";
+  screenOutput.innerHTML = "";
 });
-var decimalButton = document.querySelector("#decimal-point");
+var decimalButton = document.querySelector("#decimal_point");
 decimalButton.addEventListener("click", decimal_point);
 var equalsButton = document.querySelector("#equals");
 equalsButton.addEventListener("click", equals);

diff --git a/index.html b/index.html
@@ -8,16 +8,19 @@
   <title>JavaScript Calculator</title>
 </head>
 <body>
-  <div id = "calculator"> 
-    <div id = "screen"> </div> 
+  <div id = "calculator">
+    <div id="screen-container">  
+      <div id = "screen"> </div> 
+      <div id= "screen_output"> </div> 
+    </div>
     <div id = "buttons"> 
       <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="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>

diff --git a/main.js b/main.js
@@ -1,4 +1,5 @@
 let screen = document.querySelector("#screen");
+let screenOutput = document.querySelector("#screen_output");
 
 
 // Special Button Functionality - Functions
@@ -7,8 +8,8 @@ let screen = document.querySelector("#screen");
 
 function equals(event) {
   let regex_equals = /[=]/
-  if (!regex_equals.test(screen.innerHTML)) {
-    screen.innerHTML += event.target.innerHTML
+  if (!regex_equals.test(screenOutput.innerHTML)) {
+    screenOutput.innerHTML += event.target.innerHTML
   }
 }
 
@@ -20,8 +21,7 @@ function decimal_point(event) {
 } 
 
 function delete_entry() {
-  // screen.innerHTML.slice(0, -1);
-  // fix this
+  screen.innerHTML = screen.innerText.slice(0, -1);
 }
 
 function add(event) {
@@ -54,8 +54,11 @@ function multiply(event) {
 // Special Button Functionality - Event Listeners 
 
 let acButton = document.querySelector("#ac")
-acButton.addEventListener("click", () => {screen.innerHTML = ""} ) 
-let decimalButton = document.querySelector("#decimal-point"); 
+acButton.addEventListener("click", () => {
+  screen.innerHTML = ""
+  screenOutput.innerHTML = ""
+} ) 
+let decimalButton = document.querySelector("#decimal_point"); 
 decimalButton.addEventListener("click", decimal_point)
 let equalsButton = document.querySelector("#equals"); 
 equalsButton.addEventListener("click", equals);

diff --git a/styles.css b/styles.css
@@ -9,19 +9,28 @@ body {
   align-items: center;
 }
 
-#screen {
+#screen-container {
   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;
   border-radius: 15px;
   margin-bottom: 10px;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
   align-items: flex-end;
-  font-size: 50px;
+  font-size: 40px;
   font-family: "Red Hat Display";
 }
 
+#screen {
+  height: 50%;
+}
+
+#screen_output {
+  height: 50%;
+}
+
 #calculator {
   display: flex;
   flex-direction: column;

diff --git a/styles.scss b/styles.scss
@@ -8,18 +8,25 @@ body {
   justify-content: center; 
   align-items: center; 
 }
-#screen { 
+#screen-container { 
   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;
   border-radius: 15px; 
   margin-bottom: 10px;
   display: flex;
-  justify-content: flex-end; 
+  flex-direction: column; 
+  justify-content: space-between; 
   align-items: flex-end;
-  font-size: 50px; 
+  font-size: 40px; 
   font-family: "Red Hat Display";    
 }
+#screen {
+  height: 50%; 
+}
+#screen_output {
+  height: 50%; 
+}
 
 #calculator {
   display: flex;