GUI: Buttons & their arrangment, JS: Fixed bug after equasion
This commit is contained in:
parent
76bd50c35b
commit
a431af2f51
|
|
@ -13,7 +13,7 @@
|
|||
<div id="container">
|
||||
<div id="view">
|
||||
<div id="sign"></div>
|
||||
<div id="value"></div>
|
||||
<div id="value">0</div>
|
||||
</div>
|
||||
<div id="buttons">
|
||||
</div>
|
||||
|
|
|
|||
135
script.js
135
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();
|
||||
50
style.css
50
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;
|
||||
}
|
||||
|
||||
#table td:hover,
|
||||
#table td:focus {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
#table td:active {
|
||||
background-color: #898989;
|
||||
}
|
||||
Loading…
Reference in New Issue