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

New GUI position, registers clicks, simple checks

This commit is contained in:
NetMan 2024-01-13 20:32:02 +01:00
parent 7a06a9a7b9
commit 47adcfbe58
3 changed files with 131 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
index.html
View File

@ -8,32 +8,35 @@
<script src="script.js" defer></script> <script src="script.js" defer></script>
</head> </head>
<body> <body>
<div id="container">
<div id="view"></div> <div id="flex-center">
<div id="buttons"> <div id="container">
<div class="buttons-flex"> <div id="view"></div>
<div class="button">7</div> <div id="buttons">
<div class="button">8</div> <!-- <div class="buttons-flex">
<div class="button">9</div> <div class="button">7</div>
<div class="button">/</div> <div class="button">8</div>
</div> <div class="button">9</div>
<div class="buttons-flex"> <div class="button">/</div>
<div class="button">4</div> </div>
<div class="button">5</div> <div class="buttons-flex">
<div class="button">6</div> <div class="button">4</div>
<div class="button">+</div> <div class="button">5</div>
</div> <div class="button">6</div>
<div class="buttons-flex"> <div class="button">+</div>
<div class="button">1</div> </div>
<div class="button">2</div> <div class="buttons-flex">
<div class="button">3</div> <div class="button">1</div>
<div class="button">-</div> <div class="button">2</div>
</div> <div class="button">3</div>
<div class="buttons-flex"> <div class="button">-</div>
<div class="button">0</div> </div>
<div class="button">.</div> <div class="buttons-flex">
<div class="button">=</div> <div class="button">0</div>
<div class="button">*</div> <div class="button">.</div>
<div class="button">=</div>
<div class="button">*</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>

86
script.js
View File

@ -17,18 +17,88 @@ function divide(a, b) {
function operate(equals) { function operate(equals) {
switch(equals.operator) { switch(equals.operator) {
case "+": case "+":
return add(equals.a, equals.b); return add(+equals.a, +equals.b);
case "-": case "-":
return substract(equals.a, equals.b); return substract(+equals.a, +equals.b);
case "*": case "*":
return multiply(equals.a, equals.b); return multiply(+equals.a, +equals.b);
case "/": case "/":
return divide(equals.a, equals.b); return divide(+equals.a, +equals.b);
} }
} }
let operation = { function execute(operation) {
a: 0, const result = operate(operation);
operator: "+", if ("" in operation) {
b: 0, 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: "",
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();

25
style.css
View File

@ -1,11 +1,34 @@
html, body {
margin: 0;
padding: 0;
}
#flex-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#container { #container {
font-size: xx-large; 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 { .buttons-flex {
display: flex; display: flex;
} }
.button { .button {
padding: 20px; background-color: #fafafa;
aspect-ratio: 1/1;
width: 60px;
display: flex;
justify-content: center;
align-items:center;
border: 1px solid #000; border: 1px solid #000;
cursor: pointer; cursor: pointer;
} }