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