diff --git a/index.html b/index.html index 0aa7436..a7e1859 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,10 @@
-
+
+
+
+
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;