Code that recreates the standard features of the Windows calculator. This is just a demo, not a sophisticated version, but you are free to use this code wherever you want. The calculator can multiply, divide, add and subtract, as well as work with percentages.
I changed 129 line of the original code from:
current = [current, value].join('').replace(/^0/, '');
to:
current = [current, value].join('').replace(/^0([^\.\s])/, '$1');
I think this change makes the calculator more convenient to use.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Calculator</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<div id="calculator">
<div id="result"></div>
<div id="buttons"></div>
</div>
<style>
#calculator
{
max-width:320px;
margin:50px auto;
box-shadow:0 0 8px rgba(0, 0, 0, 0.5);
}
#result
{
color:#222;
height:80px;
font-size:32px;
line-height:80px;
padding:0 15px;
text-align:right;
white-space:nowrap;
border:1px solid #ccc;
border-bottom:none;
}
#buttons button
{
width:25%;
color:#555;
height:50px;
line-height:50px;
font-size:16px;
background-color:#f1f1f1;
border:1px solid #ccc;
}
#buttons button:hover
{
background-color:#e5e5e5;
}
</style>
<script>
var current;
var buttons =
[
'C', 'DEL', '%', '/',
'7', '8', '9', '*',
'4', '5', '6', '-',
'1', '2', '3', '+',
'+/-', '.', '0', '='
];
for(let i = 0; i < buttons.length; i++)
{
var button = document.createElement('button');
button.appendChild(document.createTextNode(buttons[i]));
document.getElementById('buttons').appendChild(button);
button.addEventListener('click', function() { calculate(this.innerHTML); });
}
function calculate(value)
{
if(isNaN(value))
{
switch(value)
{
case 'C':
current = '0';
break;
case 'DEL':
current = current.trim().slice(0, -1);
if(current.length === 0) current = '0';
break;
case '+/-':
var items = current.trim().split(' ');
var last_item = items.pop();
if(last_item != 0 && !isNaN(last_item)) current = items.join(' ') + ' ' + (last_item * -1);
break;
case '.':
case ',':
if(current.split(' ').pop().indexOf('.') === -1) current += '.';
break;
case '/':
case '*':
case '-':
case '+':
current = current.replace(/[\/\*\-\+\s]+$/, '') + ' ' + value + ' ';
break;
case '%':
var items = current.trim().split(' ');
var last_item = items.pop();
var last_operator = items.pop();
var last_result = eval(items.join(' '));
if(last_operator && !isNaN(last_item))
{
switch(last_operator)
{
case '/':
case '*':
current = eval(last_result + last_operator + (last_item / 100)).toString();
break;
case '+':
case '-':
current = eval(last_result + last_operator + (last_result * last_item / 100)).toString();
break;
}
}
break;
case '=':
current = eval(current).toString();
break;
}
}
else
{
current = [current, value].join('').replace(/^0([^\.\s])/, '$1');
}
document.getElementById('result').style.fontSize = Math.min(Math.ceil(580 / current.length), 32) + 'px';
document.getElementById('result').innerHTML = current;
document.activeElement.blur();
}
window.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
//backspace
case 8:
calculate('DEL');
break;
//enter
case 13:
calculate('=');
break;
}
calculate(e.key);
});
calculate('C');
</script>
</body>
</html>