Παρακάτω θα δούμε πως μπορείτε να γράψετε ένα λειτουργικό calculator με λίγες γραμμές (181) κώδικα.
Μπορείτε να δοκιμάσετε την αριθμομηχανή παρακάτω:
Calculator
Ας δούμε τον κώδικα
<h4>Calculator</h4>
<h3 style="text-align: center;"><span style="background-color: #ccffff;">Toy calculator</span></h3>
<table class="t7_table">
<tbody>
<tr>
<td colspan="4"><input id="t7_display" type="text" value="0" disabled=""/></td>
</tr>
<tr>
<td><button id="t7_7">7</button></td>
<td><button id="t7_8">8</button></td>
<td><button id="t7_9">9</button></td>
<td><button id="t7_divide">/</button></td>
</tr>
<tr>
<td><button id="t7_4">4</button></td>
<td><button id="t7_5">5</button></td>
<td><button id="t7_6">6</button></td>
<td><button id="t7_multiply">*</button></td>
</tr>
<tr>
<td><button id="t7_1">1</button></td>
<td><button id="t7_2">2</button></td>
<td><button id="t7_3">3</button></td>
<td><button id="t7_subtract">-</button></td>
</tr>
<tr>
<td><button id="t7_0">0</button></td>
<td><button id="t7_decimal">.</button></td>
<td><button id="t7_equals">=</button></td>
<td><button id="t7_add">+</button></td>
</tr>
<tr>
<td colspan="4"><button id="t7_clear">C</button><span> </span></td>
</tr>
</tbody>
</table>
<style>
.t7_table {
border-collapse: collapse;
border: 5px ridge whitesmoke;
display: flex;
flex-direction: column;
width: fit-content;
}
.t7_table>tbody {
border-collapse: collapse;
display: flex;
flex-direction: column;
padding: 5px;
/* width: fit-content; */
}
/* Buttons */
.t7_table>*>*>*>* {
font-family: monospace;
font-size: 10pt;
}
/* Display */
.t7_table>tbody>tr>td>#t7_display {
/* width: 50%; */
font-family: monospace;
font-size: 10pt;
text-align: right;
width: 110px;
}
/* make gap smaller */
.t7_table>tbody>tr>td {
/* width: 0px; */
padding: 3px;
/* background-color: black; */
}
</style>
<script>
// get refs to all the buttons in a dict
const buttons = {};
for (let i = 0; i < 10; i++) {
buttons[i] = document.querySelector(`#t7_${i}`);
}
buttons["."] = document.querySelector("#t7_decimal");
buttons["="] = document.querySelector("#t7_equals");
buttons["/"] = document.querySelector("#t7_divide");
buttons["*"] = document.querySelector("#t7_multiply");
buttons["-"] = document.querySelector("#t7_subtract");
buttons["+"] = document.querySelector("#t7_add");
buttons["clear"] = document.querySelector("#t7_clear");
// get ref to the display
const display = document.querySelector("#t7_display");
let buffer = 0;
let answer_buffer = 0;
let operator;
let isFloat = false;
buttons["clear"].addEventListener("click", () => {
buffer = 0;
display.value = "0";
isFloat = false;
answer_buffer = 0;
operator = undefined;
});
for (let i = 0; i < 10; i++) {
buttons[i].addEventListener("click", () => {
if (answer_buffer == 0 && operator != undefined) {
answer_buffer = buffer
buffer = 0;
// console.log("here");
}
if (isFloat) {
buffer = parseFloat(buffer.toString() + '.' + i.toString());
isFloat = false;
} else if (buffer.toString().includes(".")) {
buffer = parseFloat(buffer.toString() + i.toString());
} else {
buffer = parseInt(buffer.toString() + i.toString());
}
display.value = buffer;
// console.log(buffer);
// console.log(buffer.isFloat);
});
}
buttons["."].addEventListener("click", () => {
if (buffer.toString().includes(".")) {
return;
}
isFloat = true;
buffer = parseFloat(buffer.toString() + ".");
display.value = buffer + '.';
});
buttons["="].addEventListener("click", () => {
if (operator == undefined) {
return;
}
switch (operator) {
case "/":
buffer = answer_buffer / buffer;
break;
case "*":
buffer = answer_buffer * buffer;
break;
case "-":
buffer = answer_buffer - buffer;
break;
case "+":
buffer = answer_buffer + buffer;
break;
}
display.value = buffer;
// answer_buffer = buffer;
// buffer = 0;
answer_buffer = 0;
operator = undefined;
isFloat = false;
});
const operators = ["+", "-", "*", "/"];
operators.forEach((op) => {
buttons[op].addEventListener("click", () => {
if (answer_buffer == 0) {
operator = op;
answer_buffer = buffer;
buffer = 0;
display.value = buffer;
isFloat = false;
} else {
// do the calculation and move the answer into the buffer
buttons["="].click();
// set the operator
operator = op;
}
});
});
</script>
</section>
ή κατεβάστε το αρχείο
