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>
</head>
<body>
<div id="container">
<div id="view"></div>
<div id="buttons">
<div class="buttons-flex">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">/</div>
</div>
<div class="buttons-flex">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">+</div>
</div>
<div class="buttons-flex">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">-</div>
</div>
<div class="buttons-flex">
<div class="button">0</div>
<div class="button">.</div>
<div class="button">=</div>
<div class="button">*</div>
<div id="flex-center">
<div id="container">
<div id="view"></div>
<div id="buttons">
<!-- <div class="buttons-flex">
<div class="button">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">/</div>
</div>
<div class="buttons-flex">
<div class="button">4</div>
<div class="button">5</div>
<div class="button">6</div>
<div class="button">+</div>
</div>
<div class="buttons-flex">
<div class="button">1</div>
<div class="button">2</div>
<div class="button">3</div>
<div class="button">-</div>
</div>
<div class="buttons-flex">
<div class="button">0</div>
<div class="button">.</div>
<div class="button">=</div>
<div class="button">*</div>
</div> -->
</div>
</div>
</div>

86
script.js
View File

@ -17,18 +17,88 @@ function divide(a, b) {
function operate(equals) {
switch(equals.operator) {
case "+":
return add(equals.a, equals.b);
return add(+equals.a, +equals.b);
case "-":
return substract(equals.a, equals.b);
return substract(+equals.a, +equals.b);
case "*":
return multiply(equals.a, equals.b);
return multiply(+equals.a, +equals.b);
case "/":
return divide(equals.a, equals.b);
return divide(+equals.a, +equals.b);
}
}
let operation = {
a: 0,
operator: "+",
b: 0,
function execute(operation) {
const result = operate(operation);
if ("" in operation) {
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 {
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 {
display: flex;
}
.button {
padding: 20px;
background-color: #fafafa;
aspect-ratio: 1/1;
width: 60px;
display: flex;
justify-content: center;
align-items:center;
border: 1px solid #000;
cursor: pointer;
}