Click here to Skip to main content
12,702,933 members (32,506 online)
Click here to Skip to main content
Add your own
alternative version

Stats

284.7K views
6.9K downloads
14 bookmarked
Posted

Creating Calculator using HTML,CSS and JavaScript

, 4 Aug 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Creating a simple, stylish calculator using HTML, CSS and JavaScript

Introduction

In this trick, we are going to create a calculator. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript.

Let's Start

Create an HTML Document

<div class="box">
<div class="display"><input type="text" readonly size="18" id="d"></div>
<div class="keys">
    <p><input type="button" class="button gray" 
    value="mrc" onclick='c("Created....................")'>
    <input type="button" class="button gray" 
    value="m-" onclick='c("...............by............")'>
    <input type="button" class="button gray" value="
    m+" onclick='c(".....................Anoop")'>
    <input type="button" class="button pink" 
    value="/" onclick='v("/")'></p>
    <p><input type="button" class="button black" 
    value="7" onclick='v("7")'><input type="button" 
    class="button black" value="8" onclick='v("8")'>
    <input type="button" class="button black" value="9" 
    onclick='v("9")'><input type="button" 
    class="button pink" value="*" onclick='v("*")'></p>
    <p><input type="button" class="button black" 
    value="4" onclick='v("4")'><input type="button" 
    class="button black" value="5" onclick='v("5")'>
    <input type="button" class="button black" value="6" 
    onclick='v("6")'><input type="button" 
    class="button pink" value="-" onclick='v("-")'></p>
    <p><input type="button" class="button black" 
    value="1" onclick='v("1")'><input type="button" 
    class="button black" value="2" onclick='v("2")'>
    <input type="button" class="button black" value="3" 
    onclick='v("3")'><input type="button" 
    class="button pink" value="+" onclick='v("+")'></p>
    <p><input type="button" class="button black" 
    value="0" onclick='v("0")'><input type="button" 
    class="button black" value="." onclick='v(".")'>
    <input type="button" class="button black" value="C" 
    onclick='c("")'><input type="button" 
    class="button orange" value="=" onclick='e()'></p>
</div>
</div>

Here, I created the div (.box) which represent the structure of calculator. Inside it, I created two div tags, one for display (inside this, I added input type="text" to display the result and set this to read only) and one for Keys. Here, you see some onclick event about which I will talk later.

Preview (Using the Above Code Calculator looks like below)

image1

Create CSS Stylesheet

 body
{
background-color:tan;
} 
.box
{
background-color:#3d4543;
height:300px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
} 

Here, I set background color for body and set the height, width and border radius of class box (.box).

Preview

CSS

.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
} 

Here, I set .display background-color, width, height and position. Inside it, we have an input box, I also adjust its height, width, color, background-color and position.

Preview

CSS

.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}

Here, I adjust position of div (.keys). I use Double Class Selector( example: class=button gray). By the use of this, I set .button width, height, border-radius, cursor, etc. This helps me in making all my buttons of the same width, height, etc. Then I set .button.gray color, background-color, etc.

After that, I create :active (The :active pseudo selector will match when an element is being pressed down on by the mouse Cursor.) for buttons. The thing I have done here is to change the top border color to black and bottom color to same as button color. This gives button feel of pressing down.

Preview

Finally, we have created a Calculator but it does not work. Now we have to do scripting for it (using JavaScript).

Create Script (Using JavaScript)

function c(val)
{
document.getElementById("d").value=val;
}
function v(val)
{
document.getElementById("d").value+=val;
}
function e() 
{ 
try 
{ 
  c(eval(document.getElementById("d").value)) 
} 
catch(e) 
{
  c('Error') 
} 
}  

Here, I have created three functions. Function c(val) is used for clearing the data from the display. When we click on "C" button, then onclick='c("")' event runs and searches for c(val) function and displays the value according to the parameter passed inside it (here, we have not passed any parameter so the input screen appears blank or clear).

Function v(val) is used for typing numbers as well as mathematical operators.

Function e() is used for evaluating, i.e., on clicking "=" button, value inside the Id="d" is solved.

You can also download the source file for viewing.

Final Preview (Tried and Tested in Chrome)

image5

That's all. Hope you like it.

Thanks!

My other Posts (Tips and Tricks)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Anoop Kr Sharma
Student
India India

You may also be interested in...

Pro
Pro

Comments and Discussions

 
Questioncalc input Pin
Farras Prabowo3-Oct-16 15:12
memberFarras Prabowo3-Oct-16 15:12 
QuestionWhat about image? Pin
Member 1247330020-Apr-16 4:41
memberMember 1247330020-Apr-16 4:41 
Questionnot working Pin
Member 1238468114-Mar-16 6:37
memberMember 1238468114-Mar-16 6:37 
QuestionRe: not working Pin
Anoop Kr Sharma15-Mar-16 9:20
professionalAnoop Kr Sharma15-Mar-16 9:20 
Questionerror Pin
Member 1192301426-Sep-15 19:46
memberMember 1192301426-Sep-15 19:46 
AnswerRe: error Pin
Anoop Kr Sharma26-Sep-15 20:57
professionalAnoop Kr Sharma26-Sep-15 20:57 
QuestionPercent Button Pin
Member 1141224529-Jan-15 10:11
memberMember 1141224529-Jan-15 10:11 
QuestionUsing Enter Key to Evaluate Pin
Member 113483302-Jan-15 7:45
memberMember 113483302-Jan-15 7:45 
AnswerRe: Using Enter Key to Evaluate Pin
Anoop Kr Sharma4-Jan-15 20:46
professionalAnoop Kr Sharma4-Jan-15 20:46 
GeneralRe: Using Enter Key to Evaluate Pin
Bladehawk274-Jan-15 21:25
memberBladehawk274-Jan-15 21:25 
GeneralRe: Using Enter Key to Evaluate Pin
Anoop Kr Sharma5-Jan-15 2:58
professionalAnoop Kr Sharma5-Jan-15 2:58 
Questionwhat does the (val) function do is it Jquery Pin
Mohsin Paruk7-Nov-14 7:08
memberMohsin Paruk7-Nov-14 7:08 
AnswerRe: what does the (val) function do is it Jquery Pin
Anoop Kr Sharma7-Nov-14 18:18
professionalAnoop Kr Sharma7-Nov-14 18:18 
GeneralAmazing men Pin
Member 1118801728-Oct-14 15:34
memberMember 1118801728-Oct-14 15:34 
GeneralRe: Amazing men Pin
Anoop Kr Sharma28-Oct-14 18:37
professionalAnoop Kr Sharma28-Oct-14 18:37 
Questioncalculator Pin
Member 1077977327-Apr-14 22:57
memberMember 1077977327-Apr-14 22:57 
QuestionWell done Pin
Member 1045345227-Feb-14 14:25
memberMember 1045345227-Feb-14 14:25 
GeneralRe: Well done Pin
Anoop Kr Sharma27-Feb-14 16:40
professionalAnoop Kr Sharma27-Feb-14 16:40 
QuestionCalculator code Pin
Member 104889136-Feb-14 16:08
memberMember 104889136-Feb-14 16:08 
AnswerRe: Calculator code Pin
Anoop Kr Sharma6-Feb-14 16:45
professionalAnoop Kr Sharma6-Feb-14 16:45 
Questionios app Pin
Faffl Fl16-Oct-13 6:53
memberFaffl Fl16-Oct-13 6:53 
AnswerRe: ios app Pin
Anoop Kr Sharma16-Oct-13 9:34
professionalAnoop Kr Sharma16-Oct-13 9:34 
GeneralThank you for this coding, its very easy to understand............ Pin
Member 1033968016-Oct-13 3:20
memberMember 1033968016-Oct-13 3:20 
GeneralRe: Thank you for this coding, its very easy to understand............ Pin
Anoop Kr Sharma16-Oct-13 6:20
professionalAnoop Kr Sharma16-Oct-13 6:20 
GeneralMy vote of 5 Pin
Mohammad Sharify12-Aug-13 5:54
memberMohammad Sharify12-Aug-13 5:54 
GeneralRe: My vote of 5 Pin
Anoop Kr Sharma12-Aug-13 6:17
professionalAnoop Kr Sharma12-Aug-13 6:17 
GeneralMessage Removed Pin
Arash M. Dehghani4-Aug-13 6:58
memberArash M. Dehghani4-Aug-13 6:58 
GeneralRe: My vote of 5 Pin
Anoop Kr Sharma4-Aug-13 8:59
professionalAnoop Kr Sharma4-Aug-13 8:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170118.1 | Last Updated 4 Aug 2013
Article Copyright 2013 by Anoop Kr Sharma
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid