add the second display showing calculation process

KevVvTheDev · Sep 2, 2024 · ed41d16 · ed41d16
1 parent 84c9676
commit ed41d16
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,10 @@
     <div id="root">
 
         <div class="display">
-            <p>0</p>
+
+            <div class="track"> <h6></h6> </div>
+            <div class="result"> <p>0</p> </div>
+            <!-- <p>0</p>   -->
         </div>
 
         <div class="keys">

diff --git a/index.js b/index.js
@@ -7,6 +7,7 @@ let calculation ={
     toggle: false
 }; // this is to store the calculation in the object
 
+
 //--------------------- This is for typing a number ---------------------
 const numberButton = document.querySelectorAll(".num_btn");
 
@@ -15,26 +16,39 @@ for(let i = 0; i < numberButton.length; i++){
         let num = numberButton[i].innerHTML;
 
         const temp = document.querySelector(".display p").innerHTML;
+        const temp2 = document.querySelector(".display h6").innerHTML;
+
+        //this is for the first div on display
+        if( temp2.length === 0 || temp2 === "0" && temp.length === 1){
+            document.querySelector(".display h6").innerHTML = num;      
+            }
 
-        if(temp == "0" && temp.length == 1){
+        if(temp == "0" && temp.length == 1){//for the main display    
             document.querySelector(".display p").innerHTML = num;
+            if(temp2.length > 1){//when pressed the 1st math operator the main display will be 0 and the h6 will add the 2nd num to it string instead
+                document.querySelector(".display h6").innerHTML += num;
+            }
         }
-        else if (calculation.toggle == false){
+        else if (!calculation.toggle){ //fault by default
             document.querySelector(".display p").innerHTML += num;
+            document.querySelector(".display h6").innerHTML += num;
         }
 
         else if(calculation.toggle == true){
             document.querySelector(".display p").innerHTML = num;
+            if(temp2.length > 1){
+                document.querySelector(".display h6").innerHTML += num;
+            }
             calculation.toggle = false;
         }
-
     });
 }   
 
 //--------------------- This is for clicking clear btn ---------------------
 const clearButton = document.querySelector(".clear"); // reset everything
 clearButton.addEventListener("click", function(){
     document.querySelector(".display p").innerHTML = "0";
+    document.querySelector(".display h6").innerHTML = "";
     calculation.firstNum = 0;
     calculation.operator = null;
     calculation.secondNum = 0;
@@ -51,6 +65,7 @@ dotButton.addEventListener("click", function(){
     }
     else{
         document.querySelector(".display p").innerHTML += ".";
+        document.querySelector(".display h6").innerHTML += ".";
     }
 });
 
@@ -61,6 +76,7 @@ fractionButton.addEventListener("click", function(){
     const temp = document.querySelector(".display p").innerHTML;
     const fractionNum = Number(temp) / 100;
     document.querySelector(".display p").innerHTML = fractionNum;
+    document.querySelector(".display h6").innerHTML = fractionNum;
 });
 
 
@@ -70,30 +86,35 @@ plusMinusButton.addEventListener("click", function(){
     const temp = document.querySelector(".display p").innerHTML;
     if(temp.includes("-")){
         document.querySelector(".display p").innerHTML = temp.slice(1);
+        document.querySelector(".display h6").innerHTML = temp.slice(1);
     }else {
         document.querySelector(".display p").innerHTML = "-" + temp;
+        document.querySelector(".display h6").innerHTML = "-" + temp; //NEED TO FIX THIS
     }
 
 });
 
-//--------------------- This is for clicking operator btn ---------------------
+//--------------------- This is for math operator btn ---------------------
 
 const operatorButton = document.querySelectorAll(".operator");
 for(let i = 0; i < operatorButton.length; i++){
     operatorButton[i].addEventListener("click", function(){
 
-        if(calculation.operator == null){
-
+        if(calculation.operator == null){ //for the first calculation
+
+            document.querySelector(".display h6").innerHTML += operatorButton[i].innerHTML;
             calculation.operator = operatorButton[i].innerHTML;
             calculation.firstNum = Number(document.querySelector(".display p").innerHTML);
             document.querySelector(".display p").innerHTML = "0";
         }      
-        else if(calculation.operator != null){
+        else if(calculation.operator != null){ //for the second calculation when pressed again
 
             calculation.secondNum = Number(document.querySelector(".display p").innerHTML);
             calculation.result = calculate(calculation.firstNum, calculation.secondNum, calculation.operator);
             document.querySelector(".display p").innerHTML = calculation.result;
 
+            document.querySelector(".display h6").innerHTML =calculation.result + operatorButton[i].innerHTML;
+
             calculation.firstNum = calculation.result;
             calculation.operator = operatorButton[i].innerHTML; //update the operator
             calculation.result = 0;//reset the result
@@ -108,11 +129,11 @@ equalButton.addEventListener("click", function(){
     if(calculation.operator == null){
         return;
     }
-
     calculation.secondNum = Number(document.querySelector(".display p").innerHTML);
     calculation.result = calculate(calculation.firstNum, calculation.secondNum, calculation.operator);
     calculation.operator = null;
     document.querySelector(".display p").innerHTML = calculation.result;
+    document.querySelector(".display h6").innerHTML = calculation.result;
 
 });
 

diff --git a/styles.css b/styles.css
@@ -26,13 +26,24 @@ body{
 
 .display{
     display: flex;
+    flex-direction: column;
     justify-content: flex-end;
     align-items: flex-end;
     /* border:1px solid white; */
     height: 30vh;
-    padding-right: 40px;
+    padding-right: 10px;
     color: white;
-    font-size: 65px;
+    font-size: 60px;
+}
+
+.track{
+    height: 8vh;
+    /* border: 1px solid white; */
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    font-size: 40px;
 }
 
 .keys{