Displaying in DOM, added checks for correct behaviour

index.html

@@ -11,7 +11,10 @@
     
     <div id="flex-center">
         <div id="container">
-            <div id="view"></div>
+            <div id="view">
+                <div id="sign"></div>
+                <div id="value"></div>
+            </div>
             <div id="buttons">
             </div>
         </div>

script.js

@@ -1,3 +1,7 @@
+const viewDiv = document.querySelector("#view");
+const signGui = viewDiv.querySelector("#sign");
+const valueGui = viewDiv.querySelector("#value");
+
 function add(a, b) {
     return a + b;
 }
@@ -36,6 +40,8 @@ function execute(operation) {
         if (operation.a_b) {
             operation.a = `${result}`;
             operation.b = "";
+            operation.equasion_val = true;
+            valueGui.textContent = `${operation.a}`;
         }
         console.table(operation);
         console.log(`Result: ${result}`);
@@ -48,24 +54,43 @@ let operation = {
     b: "",
     a_b: true,
     equal: false,
+    equasion_val: false,
 }
 
 let equal = "";
 
 function click(value) {
     if (!isNaN(+value)) {
-        if (operation.a_b) {
-            operation.a += value;
+        if (operation.equasion_val) {
+            operation.a = value;
+            operation.equasion_val = !operation.equasion_val;
+            signGui.textContent = "";
+            valueGui.textContent = `${operation.a}`;
+            operation.a_b = true;
         } else {
+            if (operation.a_b) {
+                if (operation.a == "0") {
+                    operation.a = "";
+                }
+                operation.a += value;
+                valueGui.textContent = `${operation.a}`;
+            } else {
+                if (operation.b == "0") {
+                    operation.b = "";
+                }
                 operation.b += value;
                 operation.equal = true;
+                valueGui.textContent = `${operation.b}`;
+            }
         }
     } else if (value == "=") {
         execute(operation);
+        signGui.textContent = value;
     } else {
         if (operation.operator == "") {
             operation.a_b = !operation.a_b;
             operation.operator = value;
+            signGui.textContent = value;
         }
         if (operation.a_b) {
             operation.operator = value;

style.css

@@ -18,6 +18,10 @@ html, body {
     height: 60px;
     background-color: #ccc;
     border: 1px solid #000;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
 }
 .buttons-flex {
     display: flex;