Make a calculator using Javascript and CSS3
Learn to make a cool looking calculator using Javascript and CSS3.
CSS3 box shadows are used to create the 3D effect and transitions are used for the smooth press effect. Basic regex is used for validations and text replacements.
For every button(number or operator) pressed, the value is appended to an equation string displayed on the calculator screen which is later used in the JS eval function to generate the output.
12 Comments
(close)Senthil
Amazing and artful!
hassan chihab
i like it, this is a nice work
Carlo
Awesome work, thanks for sharing! However, when downloading the calc for locally fiddling around with it, I can’t get it to work. linked up the .css and .js, but upon clicking the buttons nothing will happen. Any idea?
Sebastian
Great tutorial. Thanks SD. Small observation: there are two “type=”text/javascript” in your reference of the prefix fixer.
@Carlo did you add a proper !doctype and jQuery via CDN?
akhilesh
really awesome.. understood many concepts and saw what they did . yeah that’s some ‘kick ass’ learning.. thanks…:D
Ven
Amazing, awesome, fantastic.
elaine
Great！！
There is a bug!
if the result has a decimal, the decimal btn still can work!
ALAN
very cool….
Bala
Its awsome and idont have words to epress and its really wonderful thought
daniyyer
it can’t work on chrome 25.0.1364.152 on mac os lion,but safari is ok,is there any wrong with my chrome setting?
Mohammed
Wonderful work.
Although multiplying two negative values doesn’t seem to return a positive value. Any suggestions?
Naveen Upadhyay
Awesome creativity :)
But there is a bug in it .
you divide a number by 0 , infinity comes . now if you click on a number it concatenate with the infinity string . :P