Make a calculator using Javascript and CSS3

View code Play Walkthrough

Description

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.

Add New Comment

37 Comments

(close)
hassan chihab

hassan chihab

i like it, this is a nice work

Carlo

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

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

akhilesh

really awesome.. understood many concepts and saw what they did . yeah that’s some ‘kick ass’ learning.. thanks…:D

Ven

Ven

Amazing, awesome, fantastic.

elaine

elaine

Great!!
There is a bug!
if the result has a decimal, the decimal btn still can work!

ALAN

ALAN

very cool….

Bala

Bala

Its awsome and idont have words to epress and its really wonderful thought

daniyyer

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

Mohammed

Wonderful work.

Although multiplying two negative values doesn’t seem to return a positive value. Any suggestions?

Naveen Upadhyay

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

Amrit

Amrit

The code is not working for me. Any guidelines on d linking?
@Carlo did u get the bug?

ravi

ravi

the values are not visible in the text box but it works in online

Zhongyue

Zhongyue

Good work,Not to work ,who can explain it??

Lukas Bestle

Lukas Bestle

Wonderful! Really amazing work.

A few issues:
- If I calculate anything resulting in “Infinity”, I can’t proceed but instead everything is appended to it
- If I press 5, then /, then 2 and then =, the result is 2.5, but I can still add a decimal point – it was included in the result
- After pressing =, any digit key or the decimal point should reset the content and not append to the result, only operators should be added

Romnel

Romnel

Hey, nice work! But I encountered some problems like when I click the number or any operators it will not display on the input field can you help me with this one?

amresh

amresh

good colorfull calc.

salah

salah

Amazingly written piece of art,,, thanks for showing a great example….
May Allah guide u to the right path

net

net

to make the calculator works offline, you have to put jQuery library to HTML code like this:

and put this on js file

$(document).ready(function(){
// Get all the keys from document
var keys = document.querySelectorAll(‘#calculator span’);


// prevent page jumps
e.preventDefault();
}
}
});

hope it will help you all :)

net

net

oh my, my jQuery example is not showing on previous comment..

i mean like this

….
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”>
</script>
</head>

Sylar

Sylar

$(document).ready(function(){
});
shall be added in the js file

arthur

arthur

Really like it, i’ll watch it until i can recite.

AMZMA

AMZMA

cooool, nice smooth ui

Mukesh Kumar

Mukesh Kumar

It’s just so amazing. Really Prodigious work of Programming & Art. Like plust 100% +ve Feedback to the creator(s). Rectified lots of my concepts.

Born Scream

Born Scream

To net

Thanks mann

Meg

Meg

@Mohammed:

There’s no key on here for negative numbers. Adding the minus sign in front of a number doesn’t make it negative in this script.

creta

creta

I have added $(document).ready(function()){}}); wrap around javascript code and added jquery library in html but it still does nothing, copy and pasted code from this, any ideas?

creta

creta

Is there any specific filenames or folder structures that need to be used?

Mark D

Mark D

Everything works fine in Chrome, but the layout is breaking in Firefox 25. Is something in the css incompatible?

bharat

bharat

very great.

Alok Yadav

Alok Yadav

Awesome Tuts sir..U are Great..!!

anick

anick

Awesome!!! Thanks
CodePlayer

5x 10x 15x 20x

37 Comments

Description