tod
/
odin-calculator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

GUI: Buttons & their arrangment, JS: Fixed bug after equasion

This commit is contained in:
NetMan 2024-01-15 18:43:08 +01:00
parent 76bd50c35b
commit a431af2f51
3 changed files with 137 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -13,7 +13,7 @@
<div id="container"> <div id="container">
<div id="view"> <div id="view">
<div id="sign"></div> <div id="sign"></div>
<div id="value"></div> <div id="value">0</div>
</div> </div>
<div id="buttons"> <div id="buttons">
</div> </div>

135
script.js
View File

@ -32,15 +32,15 @@ function operate(equals) {
} }
function execute(operation) { function execute(operation) {
if (operation.equal) { if (operation.readyForEquasion) {
const result = operate(operation); const result = operate(operation);
operation.a_b = !operation.a_b; operation.addToA = !operation.addToA;
operation.equal = false; operation.readyForEquasion = false;
operation.operator = ""; operation.operator = "";
if (operation.a_b) { if (operation.addToA) {
operation.a = `${result}`; operation.a = `${result}`;
operation.b = ""; operation.b = "";
operation.equasion_val = true; operation.outputOfEquasion = true;
valueGui.textContent = `${operation.a}`; valueGui.textContent = `${operation.a}`;
} }
console.table(operation); console.table(operation);
@ -49,26 +49,26 @@ function execute(operation) {
} }
let operation = { let operation = {
a: "", a: "0",
operator: "", operator: "",
b: "", b: "",
a_b: true, addToA: true,
equal: false, readyForEquasion: false,
equasion_val: false, outputOfEquasion: false,
} }
let equal = ""; let readyForEquasion = "";
function click(value) { function click(value) {
if (!isNaN(+value)) { if (!isNaN(+value)) {
if (operation.equasion_val) { if (operation.outputOfEquasion) {
operation.a = value; operation.a = value;
operation.equasion_val = !operation.equasion_val; operation.outputOfEquasion = false;
signGui.textContent = ""; signGui.textContent = "";
valueGui.textContent = `${operation.a}`; valueGui.textContent = `${operation.a}`;
operation.a_b = true; operation.addToA = true;
} else { } else {
if (operation.a_b) { if (operation.addToA) {
if (operation.a == "0") { if (operation.a == "0") {
operation.a = ""; operation.a = "";
} }
@ -79,7 +79,7 @@ function click(value) {
operation.b = ""; operation.b = "";
} }
operation.b += value; operation.b += value;
operation.equal = true; operation.readyForEquasion = true;
valueGui.textContent = `${operation.b}`; valueGui.textContent = `${operation.b}`;
} }
} }
@ -88,43 +88,110 @@ function click(value) {
signGui.textContent = value; signGui.textContent = value;
} else { } else {
if (operation.operator == "") { if (operation.operator == "") {
operation.a_b = !operation.a_b; operation.addToA = !operation.addToA;
operation.operator = value; operation.operator = value;
signGui.textContent = value; signGui.textContent = value;
} }
if (operation.a_b) { if (operation.addToA) {
operation.operator = value; operation.operator = value;
} }
operation.outputOfEquasion = false;
} }
console.table(operation); console.table(operation);
} }
function generateGui() { function generateGui() {
const buttonsValues = [ const allButtons = [
[7,8,9,"+"], [
[4,5,6,"-"], { id: "C", width: 1, height: 1, display: "C", },
[1,2,3,"*"], { id: "X", width: 1, height: 1, display: "X", },
[0,".","=","/"], { 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"); const buttonsDiv = document.querySelector("#buttons");
for (let i = 0; i < 4; i++) { // for (let i = 0; i < 4; i++) {
let button_row = document.createElement("div"); // let button_row = document.createElement("div");
button_row.classList.add("buttons-flex"); // button_row.classList.add("buttons-flex");
for (let j = 0; j < 4; j++) { // for (let j = 0; j < 4; j++) {
let button = document.createElement("div"); // let button = document.createElement("div");
button.classList.add("button"); // button.classList.add("button");
button.setAttribute("value", buttonsValues[i][j]); // button.setAttribute("value", buttonsValues[i][j]);
button.textContent = `${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) => { button.addEventListener("click", (event) => {
click(event.target.getAttribute("value")); click(event.target.getAttribute("value"));
}); });
button_row.append(button); tableRow.append(button);
} });
buttonsDiv.append(button_row); 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(); generateGui();

48
style.css
View File

@ -1,41 +1,61 @@
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
} }
#flex-center { #flex-center {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 100vh;
box-sizing: border-box;
padding: 40px 20px;
} }
#container { #container {
font-size: xx-large; font-size: xx-large;
border: 1px solid #000;
width: fit-content; width: fit-content;
} }
#view { #view {
width: 246px; width: 100%;
box-sizing: border-box;
height: 60px; height: 60px;
padding: 0 6px;
background-color: #ccc; background-color: #ccc;
border: 1px solid #000; border: 2px solid #383838aa;
border-bottom: 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: 10px; 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; background-color: #fafafa;
aspect-ratio: 1/1; width: 50px;
width: 60px; height: 50px;
display: flex;
justify-content: center;
align-items:center;
border: 1px solid #000;
cursor: pointer; cursor: pointer;
} }
.button:active {
background-color: #888; #table td:hover,
#table td:focus {
background-color: #ddd;
}
#table td:active {
background-color: #898989;
} }