Below we will see how you can write a functional calculator with a few lines (181) of code.
You can try the calculator below:
Calculator
Let's look at the code
h4>Calculatorh4>
h3 style="text-align: center;">span style="background-color: #ccffff;">Toy calculatorspan>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">7button>td>
td>button id="t7_8">8button>td>
td>button id="t7_9">9button>td>
td>button id="t7_divide">/button>td>
tr>
tr>
td>button id="t7_4">4button>td>
td>button id="t7_5">5button>td>
td>button id="t7_6">6button>td>
td>button id="t7_multiply">*button>td>
tr>
tr>
td>button id="t7_1">1button>td>
td>button id="t7_2">2button>td>
td>button id="t7_3">3button>td>
td>button id="t7_subtract">-button>td>
tr>
tr>
td>button id="t7_0">0button>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">Cbutton>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 {
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 {
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>
or download the file
