From a431af2f515b69f370c8432ff766b1d80de52301 Mon Sep 17 00:00:00 2001 From: NetMan <13informatyka14@gmail.com> Date: Mon, 15 Jan 2024 18:43:08 +0100 Subject: [PATCH] GUI: Buttons & their arrangment, JS: Fixed bug after equasion --- index.html | 2 +- script.js | 135 +++++++++++++++++++++++++++++++++++++++-------------- style.css | 50 ++++++++++++++------ 3 files changed, 137 insertions(+), 50 deletions(-) diff --git a/index.html b/index.html index a7e1859..675385a 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
-
+
0
diff --git a/script.js b/script.js index 57ac5a9..7c69e39 100644 --- a/script.js +++ b/script.js @@ -32,15 +32,15 @@ function operate(equals) { } function execute(operation) { - if (operation.equal) { + if (operation.readyForEquasion) { const result = operate(operation); - operation.a_b = !operation.a_b; - operation.equal = false; + operation.addToA = !operation.addToA; + operation.readyForEquasion = false; operation.operator = ""; - if (operation.a_b) { + if (operation.addToA) { operation.a = `${result}`; operation.b = ""; - operation.equasion_val = true; + operation.outputOfEquasion = true; valueGui.textContent = `${operation.a}`; } console.table(operation); @@ -49,26 +49,26 @@ function execute(operation) { } let operation = { - a: "", + a: "0", operator: "", b: "", - a_b: true, - equal: false, - equasion_val: false, + addToA: true, + readyForEquasion: false, + outputOfEquasion: false, } -let equal = ""; +let readyForEquasion = ""; function click(value) { if (!isNaN(+value)) { - if (operation.equasion_val) { + if (operation.outputOfEquasion) { operation.a = value; - operation.equasion_val = !operation.equasion_val; + operation.outputOfEquasion = false; signGui.textContent = ""; valueGui.textContent = `${operation.a}`; - operation.a_b = true; + operation.addToA = true; } else { - if (operation.a_b) { + if (operation.addToA) { if (operation.a == "0") { operation.a = ""; } @@ -79,7 +79,7 @@ function click(value) { operation.b = ""; } operation.b += value; - operation.equal = true; + operation.readyForEquasion = true; valueGui.textContent = `${operation.b}`; } } @@ -88,43 +88,110 @@ function click(value) { signGui.textContent = value; } else { if (operation.operator == "") { - operation.a_b = !operation.a_b; + operation.addToA = !operation.addToA; operation.operator = value; signGui.textContent = value; } - if (operation.a_b) { + if (operation.addToA) { operation.operator = value; } + operation.outputOfEquasion = false; } console.table(operation); } function generateGui() { - const buttonsValues = [ - [7,8,9,"+"], - [4,5,6,"-"], - [1,2,3,"*"], - [0,".","=","/"], + const allButtons = [ + [ + { id: "C", width: 1, height: 1, display: "C", }, + { id: "X", width: 1, height: 1, display: "X", }, + { id: "+", width: 1, height: 1, display: "+", }, + { id: "-", width: 1, height: 1, display: "-", }, + ], + [ + { id: "7", width: 1, height: 1, display: "7", }, + { id: "8", width: 1, height: 1, display: "8", }, + { id: "9", width: 1, height: 1, display: "9", }, + { id: "*", width: 1, height: 1, display: "*", }, + ], + [ + { id: "4", width: 1, height: 1, display: "4", }, + { id: "5", width: 1, height: 1, display: "5", }, + { id: "6", width: 1, height: 1, display: "6", }, + { id: "/", width: 1, height: 1, display: "/", }, + ], + [ + { id: "1", width: 1, height: 1, display: "1", }, + { id: "2", width: 1, height: 1, display: "2", }, + { id: "3", width: 1, height: 1, display: "3", }, + { id: "=", width: 1, height: 2, display: "=", }, + ], + [ + { id: "0", width: 2, height: 1, display: "0", }, + { id: ".", width: 1, height: 1, display: ".", }, + ], ]; + // 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]}`; + // 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); + // } + + const table = document.createElement("table"); + table.id = "table"; + + allButtons.forEach(row => { + const tableRow = document.createElement("tr"); + row.forEach(buttonProperties => { + const button = document.createElement("td"); + button.setAttribute("value", buttonProperties.id); + button.setAttribute("colspan", buttonProperties.width); + button.setAttribute("rowspan", buttonProperties.height); + button.textContent = buttonProperties.display; button.addEventListener("click", (event) => { click(event.target.getAttribute("value")); }); - button_row.append(button); - } - buttonsDiv.append(button_row); - } + tableRow.append(button); + }); + table.append(tableRow); + }); + buttonsDiv.append(table); + // 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 20f4889..2ec70d1 100644 --- a/style.css +++ b/style.css @@ -1,41 +1,61 @@ html, body { margin: 0; padding: 0; + font-family: system-ui, -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + 'Open Sans', 'Helvetica Neue', sans-serif; } #flex-center { display: flex; justify-content: center; align-items: center; min-height: 100vh; + box-sizing: border-box; + padding: 40px 20px; } #container { font-size: xx-large; - border: 1px solid #000; width: fit-content; } #view { - width: 246px; + width: 100%; + box-sizing: border-box; height: 60px; + padding: 0 6px; background-color: #ccc; - border: 1px solid #000; + border: 2px solid #383838aa; + border-bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; } -.buttons-flex { - display: flex; + +#table { + width: 100%; } -.button { + +#table, #table tr, #table td { + border-collapse: collapse; + text-align: center; +} + +#table td { + border: 2px solid #383838aa; +} + +#table td { background-color: #fafafa; - aspect-ratio: 1/1; - width: 60px; - display: flex; - justify-content: center; - align-items:center; - border: 1px solid #000; + width: 50px; + height: 50px; cursor: pointer; } -.button:active { - background-color: #888; -} \ No newline at end of file + +#table td:hover, +#table td:focus { + background-color: #ddd; +} + +#table td:active { + background-color: #898989; +} \ No newline at end of file