View online demo Download source code
The HTML includes the typical meta tag used in mobile web apps to prevent mobile browsers from zooming the page. The calculator body, display, buttons, and tape are all just styled divs. Keypress and mousedown(tap) events are handled with JavaScript code.
<!doctype html>
<html>
<head>
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--<meta name="viewport" content="width=100%">-->
<link rel="stylesheet" href="styles.css" />
</head>
<body onkeypress="javascript:keypress(event);">
<div class="calculator blackgradient largeshadow">
<div id="result" class="display graygradient smallshadow">0</div>
<div class="row">
<div class="button smallshadow" onmousedown="javascript:allclear();"><div class="button-label">AC</div></div>
<div class="button smallshadow" onmousedown="javascript:clearentry();"><div class="button-label">CE</div></div>
<div class="button smallshadow" onmousedown="javascript:backspace();"><div class="button-label">BS</div></div>
<div class="button blue smallshadow last" onmousedown="javascript:divide();"><div class="button-symbol">÷</div></div>
</div>
<div class="row">
<div class="button smallshadow" onmousedown="javascript:seven();"><div class="button-label">7</div></div>
<div class="button smallshadow" onmousedown="javascript:eight();"><div class="button-label">8</div></div>
<div class="button smallshadow" onmousedown="javascript:nine();"><div class="button-label">9</div></div>
<div class="button blue smallshadow raise last" onmousedown="javascript:multiply();"><div class="button-symbol">×</div></div>
</div>
<div class="row">
<div class="button smallshadow" onmousedown="javascript:four();"><div class="button-label">4</div></div>
<div class="button smallshadow" onmousedown="javascript:five();"><div class="button-label">5</div></div>
<div class="button smallshadow" onmousedown="javascript:six();"><div class="button-label">6</div></div>
<div class="button blue smallshadow raise last" onmousedown="javascript:subtract();"><div class="button-symbol">-</div></div>
</div>
<div class="row">
<div class="button smallshadow" onmousedown="javascript:one();"><div class="button-label">1</div></div>
<div class="button smallshadow" onmousedown="javascript:two();"><div class="button-label">2</div></div>
<div class="button smallshadow" onmousedown="javascript:three();"><div class="button-label">3</div></div>
<div class="button blue smallshadow last" onmousedown="javascript:add();"><div class="button-symbol">+</div></div>
</div>
<div class="row">
<div class="button smallshadow" onmousedown="javascript:zero();"><div class="button-label">0</div></div>
<div class="button smallshadow" onmousedown="javascript:decimal();"><div class="button-label">.</div></div>
<div class="button blue smallshadow" onmousedown="javascript:percent();"><div class="button-label">%</div></div>
<div class="button blue smallshadow raise last" onmousedown="javascript:equals();"><div class="button-symbol">=</div></div>
</div>
</div>
<div id="tape" class="tape"></div>
<script src="default.js" ></script>
</body>
</html>
The CSS styling is below. CSS media queries choose one of three sizes based on screen dimensions. I used the Voces font from Google Web Fonts for the result display.
@font-face {
font-family: 'Voces';
font-style: normal;
font-weight: 400;
src: url(voces.eot);
src: local('Voces'), local('Voces-Regular'), url(http://themes.googleusercontent.com/static/fonts/voces/v1/UOrhtr4tgkrQ7HpJQ9-OIQ.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/voces/v1/ePr7eRI28zZaOtQ8CcT7rA.woff) format('woff');
}
body
{
font-family: Segoe UI;
font-size: 1.0em;
}
/* Containers */
.calculator {
display: inline-block;
text-align: left;
border: 1px solid black;
padding: 16px;
border-radius: 8px;
}
.display {
display: inline-block;
width: 364px;
text-align: right;
border: 1px solid black inset;
color: black;
font-family: Voces, 'Segoe UI Semibold', Calibri, Arial, Helvetica;
font-size: 2.0em;
padding: 0px 4px 1px 4px;
border-radius: 2px;
margin: 0 0 12px 0;
}
.row {
margin: 8px 0 0 0;
}
.button {
display: inline-block;
vertical-align: middle;
width: 80px;
height: 50px;
border: 1px solid black inset;
background: ghostwhite;
color: black;
font-family: 'Segoe UI Semibold', Calibri, Arial, Helvetica;
border-radius: 8px;
padding: 0px 4px 1px 4px;
border-radius: 8px;
margin: 0 4px 0 0;
}
.button :active {
margin-top: 2px;
margin-left: 2px;
margin-right: 8px;
margin-bottom: -2px;
}
.last {
margin-right: -4px;
}
.button-label {
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 50px;
width: 80px;
font-size: 1.4em;
}
.button-symbol {
display: inline-block;
text-align: center;
vertical-align: middle;
line-height: 50px;
width: 80px;
font-size: 1.8em;
font-weight: bold;
}
.blue {
background-color: lightblue;
}
/* Shadows */
.largeshadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
-ms-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
}
.smallshadow {
-moz-box-shadow: 3px 3px 3px #666666;
-webkit-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
}
/* Gradients */
.navy {
background-color: navy;
}
.blackgradient {
background: rgb(149,149,149); /* Old browsers */
background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
}
.darkbluegradient {
background: rgb(63,76,107); /* Old browsers */
background: -moz-linear-gradient(top, rgba(63,76,107,1) 0%, rgba(63,76,107,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,76,107,1)), color-stop(100%,rgba(63,76,107,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=0 ); /* IE6-9 */
}
.bluegradient {
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.graygradient {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
}
.yellowgradient {
background: rgb(255,255,136); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,136,1) 0%, rgba(255,255,136,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,136,1)), color-stop(100%,rgba(255,255,136,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,136,1) 0%,rgba(255,255,136,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */
}
.tape {
display: block;
width: 396px;
margin: 16px 0 0 0;
min-height: 200px;
background-color: lightyellow;
color: black;
text-align: right;
padding: 8px;
border: 1px solid black;
}
/* Windows Phone-size phone */
@media screen and (min-width:321px) and (max-width: 480px) {
.display {
width: 284px;
}
.button {
width: 60px;
height: 38px;
}
.button-label {
line-height: 38px;
width: 60px;
}
.button-symbol {
line-height: 38px;
width: 60px;
}
.tape {
display: none;
}
}
/* iPhone-size smartphone, portrait */
@media screen and (max-width : 320px) {
.display {
width: 204px;
font-size: 1.2em;
}
.button {
width: 40px;
height: 25px;
}
.button-label {
line-height: 25px;
width: 40px;
font-size: 1.0em;
}
.button-symbol {
line-height: 25px;
width: 40px;
font-size: 1.2em;
}
.tape {
display: none;
}
}
/* iPhone-size smartphone / landscape */
@media screen and (max-height : 320px) and (orientation : landscape) {
.display {
width: 204px;
font-size: 1.2em;
}
.button {
width: 40px;
height: 25px;
}
.button-label {
line-height: 25px;
width: 40px;
font-size: 1.0em;
}
.button-symbol {
line-height: 25px;
width: 40px;
font-size: 1.2em;
}
.tape {
display: none;
}
}
The JavaScript responds to mousedown (click/tap) events as well as keypress events to store numbers and operators and perform operations.
var number = '';
var result = document.getElementById('result');
var tape = document.getElementById('tape');
tape.scrollTop = 10000;
function keypress(e) {
switch (e.keyCode) {
case 8: // backspace
backspace();
break;
case 67: // C
case 99: // c
allclear();
break;
case 46: // .
decimal();
break;
case 48: // 0
case 49:
case 50:
case 51:
case 52:
case 53:
case 54:
case 55:
case 56:
case 57: // 9
enter(String.fromCharCode(e.keyCode));
break;
case 42: // *
case 120: // x
case 88: // X
multiply();
break;
case 47: // /
divide();
break;
case 43: // +
add();
break;
case 45: // -
subtract();
break;
case 13: // ENTER
case 32: // SPACE
case 61: // =
equals();
break;
}
}
function allclear() {
number = '';
operator = null;
result.innerText = "0";
tape.innerHTML = '';
}
function backspace() {
if (number.length > 0) {
number = number.substr(0, number.length - 1);
if (number.length === 0) {
result.innerText = '0';
}
else {
result.innerText = number;
}
}
}
function clearentry() {
number = '';
result.innerText = '0';
}
function nine() {
enter('9');
}
function eight() {
enter('8');
}
function seven() {
enter('7');
}
function six() {
enter('6');
}
function five() {
enter('5');
}
function four() {
enter('4');
}
function three() {
enter('3');
}
function two() {
enter('2');
}
function one() {
enter('1');
}
function zero() {
enter('0');
}
function decimal() {
if (number && number.indexOf('.')===-1) {
enter('.');
}
}
function enter(digit) {
number = number + digit;
result.innerText = number;
}
function multiply() {
if (!number) {
number = parseFloat(result.innerText);
}
number1 = number;
operator = "x";
number = '';
result.innerText = '0';
tape.innerHTML += number1.toString() + "<br/>× ";
}
function divide() {
if (!number) {
number = parseFloat(result.innerText);
}
number1 = number;
operator = '/';
number = '';
result.innerText = '0';
tape.innerHTML += number1.toString() + "<br/>÷ ";
}
function add() {
if (!number) {
number = parseFloat(result.innerText);
}
number1 = number;
operator = "+";
number = '';
result.innerText = '0';
tape.innerHTML += number1.toString() + "<br/>+ ";
}
function subtract() {
if (!number) {
number = parseFloat(result.innerText);
}
// If entered with no number entered, this is a leading minus.
if (number.length == 0) {
enter('-');
return;
}
// Subtraction operator.
number1 = number;
operator = '-';
number = '';
result.innerText = '0';
tape.innerHTML += number1.toString() + "<br/>- ";
}
function percent() {
if (!operator) {
return;
}
number = (parseFloat(number1) * (parseFloat(number)/100)).toString();
result.innerText = number;
}
function equals() {
if (!operator) {
return;
}
try
{
switch (operator) {
case 'x':
result.innerText = (parseFloat(number1) * parseFloat(number)).toString();
tape.innerHTML += number.toString() + "<br/>--------------------<br/>= " + result.innerText + "<br/> <br/>";
number = '';
break;
case '/':
result.innerText = (parseFloat(number1) / parseFloat(number)).toString();
tape.innerHTML += number.toString() + "<br/>--------------------<br/>= " + result.innerText + "<br/> <br/>";
number = '';
break;
case '+':
result.innerText = (parseFloat(number1) + parseFloat(number)).toString();
tape.innerHTML += number.toString() + "<br/>--------------------<br/>= " + result.innerText + "<br/> <br/>";
number = '';
break;
case '-':
result.innerText = (parseFloat(number1) - parseFloat(number)).toString();
tape.innerHTML += number.toString() + "<br/>--------------------<br/>= " + result.innerText + "<br/> <br/>";
number = '';
break;
}
}
catch (e) {
result.innerText = "Error";
}
operator = null;
number = '';
}
I'm writing this and other small HTML5 apps in order to hone my skills in making mobile web apps a good experience that perform well.
1 comment:
Should it work on a win phone 7? Works fine on my desktop, but not on my wp7.
Post a Comment