Introduction:
In this project I will guide you how to build a simple calculator by using HTML5, CSS3 and Javascript. The demo for this project as below:
In order to understand this project, it requires you to have a basic knowledge of HTML5, CSS3 and Javascript.
Overview:
- The snapshot of calculator as below:
- Functionality:
+, -, *, /, X^3, sqrt(x).
C: clear; <--: delete.
Code Analysis:
The project includes 3 files:
- index.html: Defines textbox and keys.
- design.css: Designs the outline.
- logic.js: Builds functionalities.
index.html (HTML)
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="design.css"> </head> <title> Calculator </title> <body> <h2>Press Caps lock. A: +; S: -; M: *; D: /; B: <--; C: clear; P: .; E: =</h2> <div id="calculator"> <form> <input type="text" id="display" disabled=""> <br/> <input type="button" value="C" id="keys" onclick="addtoscreen('C')"> <input type="button" value="←" id="keys" onclick="backspace()"> <input type="button" value="X³" id="keys" onclick="power(3)"> <input type="button" value="√" id="keys" onclick="power(0.5)"> <br> <input type="button" value="9" id="keys" onclick="addtoscreen('9')"> <input type="button" value="8" id="keys" onclick="addtoscreen('8')"> <input type="button" value="7" id="keys" onclick="addtoscreen('7')"> <input type="button" value="+" id="keys" onclick="addtoscreen('+')"> <br> <input type="button" value="6" id="keys" onclick="addtoscreen('6')"> <input type="button" value="5" id="keys" onclick="addtoscreen('5')"> <input type="button" value="4" id="keys" onclick="addtoscreen('4')"> <input type="button" value="-" id="keys" onclick="addtoscreen('-')"> <br> <input type="button" value="3" id="keys" onclick="addtoscreen('3')"> <input type="button" value="2" id="keys" onclick="addtoscreen('2')"> <input type="button" value="1" id="keys" onclick="addtoscreen('1')"> <input type="button" value="*" id="keys" onclick="addtoscreen('*')"> <br> <input type="button" value="0" id="keys" onclick="addtoscreen('0')"> <input type="button" value="." id="keys" onclick="addtoscreen('.')" > <input type="button" value="=" id="keys" onclick="answer()"> <input type="button" value="/" id="keys" onclick="addtoscreen('/')"> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="logic.js"> </script> </body> </html>
Basically the index.html contains two input types: text for displaying the result on the screen and button for keys input. The text input is disabled. As a result, user is not allowed to type directly to the screen. Besides, depending on which key is clicked, the relevant function will be invoked. These functions are defined in logic.js.
design.css (CSS)
h2{ text-align: center; color: lightpink; } #calculator { width: 250px; height: 350px; border: 5px solid black; text-align: center; background: lightgreen; margin: 150px auto; box-shadow: 0px 0px 30px gray; } #display { margin-top: 30px; margin-bottom: 20px; width: 220px; height: 30px; border: 1px solid red; box-shadow: 0px 0px 30px red; text-align: right; font: 20px bold; color: blue; } #keys { width: 41px; height: 35px; margin-left: 10px; margin-bottom: 20px; box-shadow: 0px 0px 20px skyblue; cursor: pointer; } #keys:hover { background: yellow; font-weight: bold; }
Tag, ID Selectors:
h2{}: defines h2 element properties: text-align, color.
#calculator{}: defines calculator properties: width, height, border. text-align, margin (auto: center) and box-shadow.
#display{}: defines screen properties: margin, width, height, border, box-shadow, text-align. font, color.
#keys{}: defines key properties: width, height, margin, box-shadow, cursor (pointer)
#keys:hover{}: defines key properties when moving mouse over the keys: change background and bold the text/number as well as cursor turned into pointer.
logic.js (Javascript)
var box=document.getElementById('display'); function addtoscreen(x) { box.value +=x; if(x=='C'){ box.value=''; } } function answer(){ x=box.value; x=eval(x); box.value=x; } function backspace(){ var number=box.value; var len=number.length-1; var newnumber=number.substring(0,len); box.value = newnumber; } function power(y){ x=box.value; box.value=''; x=Math.pow(x,y); box.value=x; } $(document).keypress(function(e) { var key = e.which; switch (key) { case 48: //alert("0"); addtoscreen('0'); break; case 49: //alert("1"); addtoscreen('1'); break; case 50: // alert("2"); addtoscreen('2'); break; case 51: // alert("3"); addtoscreen('3'); break; case 52: // alert("4"); addtoscreen('4'); break; case 53: // alert("5"); addtoscreen('5'); break; case 54: // alert("6"); addtoscreen('6'); break; case 55: // alert("7"); addtoscreen('7'); break; case 56: // alert("8"); addtoscreen('8'); break; case 57: // alert("9"); addtoscreen('9'); break; case 67: // alert("C"); addtoscreen('C'); break; case 66: // alert("B"); backspace(); break; case 65: // alert("A"); addtoscreen('+'); break; case 83: // alert("S"); addtoscreen('-'); break; case 77: // alert("M"); addtoscreen('*'); break; case 68: // alert("D"); addtoscreen('/'); break; case 80: // alert("P"); addtoscreen('.'); break; case 69: // alert("E"); answer(); break; default: alert("Invalid"); } });
var box=document.getElementById('display'); box represents calculator's screen.
addtoscreen(x): when a key is clicked, the value is stored in box.value. "+=" (concatenation) means the key values will be displayed continuously without replacing the previous key value by the current one.
answer(): box.value (existing value on screen) is stored in x, then x is evaluated by javascript API eval(). The eval() method will evaluate the args. For instance, if x=10+2-5 then eval(10+2-5) will evaluate the args and execute 7. Finally the avaluated x or the result will be displayed on screen by box.value=x;
backspace(): assign the number values on screen to variable named number and len is the length of displayed number on screen subtracted by 1. Then assign this new string to variable named newnumber and display it on screen.
power(y): perform power of 3 and 0.5(sqrt) for any number which is pressed by using Javascript API Math.pow() and display the result on the screen.
$(document).keypress(): detects pressed keyboard and invoking relevant functions.
Caps lock is on. Defined keyboard:
C: clear
A: +
S: -
M: *
D: /
P: .
B: <--
E: =
Source code: https://github.com/anhqui/CALCULATOR
Conclusion:
In this project, I helped you build a simple calculator by using HTML5, CSS3 and Javascript. I also described how the project works. Moreover, I also explained code in details and attached the full source code.
