From 47adcfbe58c5f20ab74a113292ecfb132d2d2602 Mon Sep 17 00:00:00 2001 From: NetMan <13informatyka14@gmail.com> Date: Sat, 13 Jan 2024 20:32:02 +0100 Subject: [PATCH] New GUI position, registers clicks, simple checks --- index.html | 55 +++++++++++++++++----------------- script.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++++----- style.css | 25 +++++++++++++++- 3 files changed, 131 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 808d56a..8068358 100644 --- a/index.html +++ b/index.html @@ -8,32 +8,35 @@ -
-
-
-
-
7
-
8
-
9
-
/
-
-
-
4
-
5
-
6
-
+
-
-
-
1
-
2
-
3
-
-
-
-
-
0
-
.
-
=
-
*
+ +
+
+
+
+
diff --git a/script.js b/script.js index 413003a..74242cc 100644 --- a/script.js +++ b/script.js @@ -17,18 +17,88 @@ function divide(a, b) { function operate(equals) { switch(equals.operator) { case "+": - return add(equals.a, equals.b); + return add(+equals.a, +equals.b); case "-": - return substract(equals.a, equals.b); + return substract(+equals.a, +equals.b); case "*": - return multiply(equals.a, equals.b); + return multiply(+equals.a, +equals.b); case "/": - return divide(equals.a, equals.b); + return divide(+equals.a, +equals.b); } } +function execute(operation) { + const result = operate(operation); + if ("" in operation) { + console.log("BLANK IS HERE"); + } + operation.a_b = !operation.a_b; + operation.operator = ""; + if (operation.a_b) { + operation.a = `${result}`; + operation.b = ""; + } + console.table(operation); + console.log(`Result: ${result}`); +} + let operation = { - a: 0, - operator: "+", - b: 0, -} \ No newline at end of file + a: "", + operator: "", + b: "", + a_b: true, +} + +let equal = ""; + +function click(value) { + if (!isNaN(+value)) { + if (operation.a_b) { + operation.a += value; + } else { + operation.b += value; + } + } else if (value == "=") { + execute(operation); + } else { + if (operation.operator == "") { + operation.a_b = !operation.a_b; + } + operation.operator = value; + } + console.table(operation); + + if ("" in operation) { + console.log("BLANK IS HERE"); + } +} + +function generateGui() { + + const buttonsValues = [ + [7,8,9,"+"], + [4,5,6,"-"], + [1,2,3,"*"], + [0,".","=","/"], + ]; + + const buttonsDiv = document.querySelector("#buttons"); + + for (let i = 0; i < 4; i++) { + let button_row = document.createElement("div"); + button_row.classList.add("buttons-flex"); + for (let j = 0; j < 4; j++) { + let button = document.createElement("div"); + button.classList.add("button"); + button.setAttribute("value", buttonsValues[i][j]); + button.textContent = `${buttonsValues[i][j]}`; + button.addEventListener("click", (event) => { + click(event.target.getAttribute("value")); + }); + button_row.append(button); + } + buttonsDiv.append(button_row); + } +} + +generateGui(); \ No newline at end of file diff --git a/style.css b/style.css index 09b6289..0c7433a 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,34 @@ +html, body { + margin: 0; + padding: 0; +} +#flex-center { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} #container { font-size: xx-large; + border: 1px solid #000; + width: fit-content; +} +#view { + width: 244.5px; + height: 60px; + background-color: #ccc; + border: 1px solid #000; } .buttons-flex { display: flex; } .button { - padding: 20px; + background-color: #fafafa; + aspect-ratio: 1/1; + width: 60px; + display: flex; + justify-content: center; + align-items:center; border: 1px solid #000; cursor: pointer; }