javascript888,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<style type="text/css">
table {
border-collapse: collapse;
margin: 5px;
}
td {
height: 40px;
width: 40px;
border: 1px solid rgba(0, 0, 0, 1);
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<input type="text">
<table></table>
<script>
'use strict';
let input = document.querySelector('input');
let table = document.querySelector('table');
let arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '+', '*', '/', '='];
createTable(arr, 5, table);
function createTable(arr, columns, table) {
let html = document.createDocumentFragment(),
tr;
arr.forEach((v, i) => {
if (i % columns === 0) {
tr = document.createElement('tr');
html.append(tr)
};
let td = document.createElement('td');
td.innerHTML = v;
td.onclick = addEvents.bind(null, v);
tr.append(td);
})
table.append(html)
}
function addEvents(v) {
if (v == +v) {
if (input.dataset.end) {
input.value = v;
input.dataset.end = input.dataset.action = '';
} else input.value += v;
}
if (['-', '+', '*', '/'].includes(v)) {
input.dataset.a = input.value;
input.dataset.action = v;
input.value = input.dataset.end = '';
}
if (v == '=') {
if (!input.value || !input.dataset.action) return;
if (!input.dataset.end) input.dataset.b = input.value;
input.dataset.end = 1;
let a = +input.dataset.a;
let b = +input.dataset.b;
let action = input.dataset.action;
if (action === '+') input.dataset.a = input.value = (a + b).toFixed(2);
if (action === '-') input.dataset.a = input.value = (a - b).toFixed(2);
if (action === '*') input.dataset.a = input.value = (a * b).toFixed(2);
if (action === '/') input.dataset.a = input.value = (a / b).toFixed(2);
}
}
</script>
</body>
</html>