Simple Calculator
HTML
<!DOCTYPE html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
</head>
<body>
<main>
<div class="container">
<div id="calc-body">
<div id="calc-screen">
<span id="display">0</span>
</div>
<div id="calc-buttons">
<div class="row">
<div class="calc-button function" id="clear">C</div>
<div class="calc-button function" id="clear-entry">CE</div>
<div class="calc-button operator" id="percent">%</div>
<div class="calc-button operator" id="divide">÷</div>
</div>
<div class="row">
<div class="calc-button number" id="seven">7</div>
<div class="calc-button number" id="eight">8</div>
<div class="calc-button number" id="nine">9</div>
<div class="calc-button operator" id="multiply">×</div>
</div>
<div class="row">
<div class="calc-button number" id="four">4</div>
<div class="calc-button number" id="five">5</div>
<div class="calc-button number" id="six">6</div>
<div class="calc-button operator" id="subtract">−</div>
</div>
<div class="row">
<div class="calc-button number" id="one">1</div>
<div class="calc-button number" id="two">2</div>
<div class="calc-button number" id="three">3</div>
<div class="calc-button operator" id="add">+</div>
</div>
<div class="row">
<div class="calc-button number" id="zero">0</div>
<div class="calc-button operator" id="decimal">.</div>
<div class="calc-button" id="equals">=</div>
</div>
</div>
</div>
</div>
</main>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #A2DED0;
font-family: 'Roboto';
font-weight: 700;
}
main {
height: 100%;
}
.container {
height: 100%;
}
#calc-body {
width: 300px;
margin: 100px auto;
padding: 50px;
background-color: #ddd;
border-radius: 5%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
#calc-screen {
height: 15%;
margin-bottom: 10%;
margin-top: 20%;
padding: 2% 4%;
background-color: #90C695;
text-align: right;
border-radius: 5px;
font-size: 2.5em;
box-shadow: inset 0 0 5px 0.5px rgba(120, 120, 120, 1),
hsla(0,0%, 0%,.15) 0 -2px 6px 2px, /* outer SD */
hsla(0,0%,100%,.5) 0 2px 6px 2px; /* outer HL */
}
#display {
position: relative;
top: 0;
transform: translateY(-50%);
}
#calc-buttons {
width: 90%;
margin: 40px auto 0 auto;
}
.calc-button {
display: inline-block;
margin: 10px 5px;
padding: 10px;
width: 12%;
font-size: 1.25em;
font-weight: 700;
text-align: center;
background-color: #333;
color: #eee;
border-radius: 10%;
border: 1px solid #777;
cursor: pointer;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
.calc-button:hover {
background-color: #444;
}
.calc-button#equals {
width: 40%;
}
JAVASCRIPT
(function() {
var buttons = $(".calc-button"),
screen = $("#calc-screen"),
expression = [],
equals = false;
/* Maps some of the calculator buttons to javascript mathematical operators */
var opMap = {
'×': '*',
'÷': '/',
'−': '-'
};
/* Converts all the Javascript operators in an expression to their counterparts seen on the calculator buttons. Used so that the calculator screen does not display characters like '*' and '/'. */
function stringify(expression) {
if (expression.length > 0) {
return expression.map(function(e) {
for (var key in opMap) {
if (e === opMap[key])
return key;
}
return e;
}).join('');
} else {
return '0';
}
}
function isOperator(symbol) {
return ['*', '/', '%', '+', '-'].indexOf(symbol) > -1;
}
/* Returns the Javascript operator counterpart to the operators seen on the calculator buttons. */
function opLookup(operator) {
return (Object.keys(opMap).indexOf(operator) > -1) ? opMap[operator] : operator;
}
function calculate(expression) {
if(expression.length === 0)
return 0;
return +eval(expression.join('')).toFixed(2);
}
buttons.on("click", function() {
var value = $(this).text(),
last = expression[expression.length - 1],
type = $(this).attr('class').split(' ')[1];
if (type === 'number') {
/* If a number is pressed after equals was pressed, start a new expression. */
(equals === true) ? expression = [value] : expression.push(value);
/* If last button pressed before this was an operator button, just display the number just pressed. */
(isOperator(last)) ? screen.text(value) : screen.text(stringify(expression));
equals = false;
} else if (type === 'operator') {
expression.push(opLookup(value));
/* Display full decimal */
(value === '.') ? screen.text(stringify(expression)) : screen.text(value.toString());
equals = false;
} else if(type === 'function') {
/* Clear expression. */
if (value === 'C') {
expression = [];
screen.text('0');
/* Clear last entry in expression. */
} else if(value === 'CE') {
expression.pop();
screen.text(stringify(expression));
}
} else {
/* Equals */
var result = calculate(expression);
screen.text(result.toString());
expression = [result];
equals = true;
}
});
/* [Keyboard input] --------------------------------*/
$(document).on('keypress', function(e) {
var key = e.which;
if (key === 37) $("#percent" ).trigger("click");
if (key === 42) $("#multiply").trigger("click");
if (key === 43) $("#add" ).trigger("click");
if (key === 45) $("#subtract").trigger("click");
if (key === 46) $("#decimal" ).trigger("click");
if (key === 47) $("#divide" ).trigger("click");
if (key === 48) $("#zero" ).trigger("click");
if (key === 49) $("#one" ).trigger("click");
if (key === 50) $("#two" ).trigger("click");
if (key === 51) $("#three" ).trigger("click");
if (key === 52) $("#four" ).trigger("click");
if (key === 53) $("#five" ).trigger("click");
if (key === 54) $("#six" ).trigger("click");
if (key === 55) $("#seven" ).trigger("click");
if (key === 56) $("#eight" ).trigger("click");
if (key === 57) $("#nine" ).trigger("click");
if (key === 61) $("#equals" ).trigger("click");
});
$(document).on('keyup', function(e) {
var key = e.which;
if (key === 8 ) $("#clear-entry").trigger("click");
if (key === 13) $("#equals" ).trigger("click");
if (key === 27) $("#clear" ).trigger("click");
});
})();
1 Response