From 76bd50c35ba3907075d487d4fbbc9c4ee5836c6c Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Sun, 14 Jan 2024 20:04:41 +0100
Subject: [PATCH] Displaying in DOM, added checks for correct behaviour

---
 index.html |  5 ++++-
 script.js  | 33 +++++++++++++++++++++++++++++----
 style.css  |  4 ++++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 0aa7436..a7e1859 100644
--- a/index.html
+++ b/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>
diff --git a/script.js b/script.js
index a545145..57ac5a9 100644
--- a/script.js
+++ b/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 {
-            operation.b += value;
-            operation.equal = true;
+            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;
diff --git a/style.css b/style.css
index 9360853..20f4889 100644
--- a/style.css
+++ b/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;