How to develop an Simple HTML calculator using JavaScript and CSS – Part I

How to develop an Simple HTML calculator using JavaScript and CSS – Part I

JavaScript-calculatorIn this article we will build Simple Calculator with all functionalities as shown on pic using JavaScript and html and CSS for styling.

For the ease of understanding we are dividing this into two parts. In first part we will learn how to create structure for calculator and add some styles to give our calculator nice look.

In second part we will add the functionality for each button and calculation like log, sin, cos, tan and pi etc with basic functionalities of addition, subtraction, multiplication and division.

Building the Calculator

In various website you will find the use of form to display and calculate the various functions, however here we will use buttons without use of form element. We will check the onclick event of button and call the required function.

Lets build the html of our calculator. To build same we need one input filed to display the user entry and result of calculation. This will be our display area. As per our pic you can find we have different color buttons. We have separated our buttons into 4 sections.

1) Number keys with button name “num“,
2) basic keys with name “basickey” these are keys with basic signs like backspace, clear, parenthesis, decimal value etc.
3) key operators with name “keyoperator” for addition, subtraction, multiplication and division.
4) math keys with name “mathkey” to calculate sin, cos, tan etc.

To start with create a div with id “calculator”. Please note you can change the variables and id of JavaScript and html as per yours requirement. After creation of div add one input field with id “cal_display” like below.

<div id=”calculator”>
<input type=”text” id=”cal_display” value=”0″>
<!– will add more html here –>
</div>

Now create two more div with id “cal_keys” and “opr_keys” like below. Add these div inside “calculator” div.

<div id=”cal_keys”> <!– Will add buttons here–> </div>
<div id=”opr_keys”> <!– Will add buttons here–> </div>

Now as per design add buttons inside “cal_keys” div we will add number keys and basic keys on this div. There should be total 18 buttons as per our design inside “cal_keys” like below.

<button class=”grey” name=”basickey” value=”clear”>C</button>
<button class=”grey” name=”basickey” value=”back”> <– </button>
<button class=”grey” value=”equal” name=”keyoperater”>=</button>
<button name=”num”>7</button>
<button name=”num”>8</button>
<button name=”num”>9</button>
<button name=”num”>4</button>
<button name=”num”>5</button>
<button name=”num”>6</button>
<button name=”num”>1</button>
<button name=”num”>2</button>
<button name=”num”>3</button>
<button class=”hotpink” name=”basickey” value=”negative”>&#177</button>
<button name=”num”>0</button>
<button class=”hotpink” name=”basickey” value=”.”>.</button>
<button class=”hotpink” name=”basickey” value=”parenthopen”>(</button>
<button class=”hotpink” name=”basickey” value=”parenthclose”>)</button>
<button class=”hotpink” name=”mathkey” value=”cos”>cos</button>

Similarly add keyoperator keys and math keys on another div with id “opr_keys“. There are total 11 buttons as per design. Please note the special character used to display pi and sqr button etc.

<button class=”orange” name=”keyoperater” value=”pi”>&pi;</button>
<button class=”hotpink” name=”mathkey” value=”per”>%</button>
<button class=”orange” name=”mathkey” value=”exp”>x&#94;</button>
<button class=”hotpink” name=”keyoperater” value=”divide”>/</button>
<button class=”orange” name=”mathkey” value=”log”>ln</button>
<button class=”hotpink” name=”keyoperater” value=”multiply”>*</button>
<button class=”orange” name=”mathkey” value=”sqrt”>&#8730;</button>
<button class=”hotpink” name=”keyoperater” value=”substract”>-</button>
<button class=”orange” name=”mathkey” value=”sqr”>X<sup>&#50;</sup></button>
<button class=”hotpink” name=”keyoperater” value=”add”>+</button>
<button class=”hotpink” name=”mathkey” value=””>sin</button>
<button class=”hotpink” name=”mathkey” value=”tan”>tan</button>
Once done your code should look like below. Please don’t forgot adding basic html structure on your page. Add this code inside your body tag of html or main tag if using HTML5.

<div id=”calculator”>
<input type=”text” id=”cal_display” value=”0″>

<div id=”cal_keys”>

<button class=”grey” name=”basickey” value=”clear”>C</button>
<button class=”grey” name=”basickey” value=”back”> <– </button>
<button class=”grey” value=”equal” name=”keyoperater”>=</button>
<button name=”num”>7</button>
<button name=”num”>8</button>
<button name=”num”>9</button>
<button name=”num”>4</button>
<button name=”num”>5</button>
<button name=”num”>6</button>
<button name=”num”>1</button>
<button name=”num”>2</button>
<button name=”num”>3</button>
<button class=”hotpink” name=”basickey” value=”negative”>&#177</button>
<button name=”num”>0</button>
<button class=”hotpink” name=”basickey” value=”.”>.</button>
<button class=”hotpink” name=”basickey” value=”parenthopen”>(</button>
<button class=”hotpink” name=”basickey” value=”parenthclose”>)</button>
<button class=”hotpink” name=”mathkey” value=”cos”>cos</button>




</div>
<div id=”opr_keys”>
<button class=”orange” name=”keyoperater” value=”pi”>&pi;</button>
<button class=”hotpink” name=”mathkey” value=”per”>%</button>
<button class=”orange” name=”mathkey” value=”exp”>x&#94;</button>
<button class=”hotpink” name=”keyoperater” value=”divide”>/</button>
<button class=”orange” name=”mathkey” value=”log”>ln</button>
<button class=”hotpink” name=”keyoperater” value=”multiply”>*</button>
<button class=”orange” name=”mathkey” value=”sqrt”>&#8730;</button>
<button class=”hotpink” name=”keyoperater” value=”substract”>-</button>
<button class=”orange” name=”mathkey” value=”sqr”>X<sup>&#50;</sup></button>
<button class=”hotpink” name=”keyoperater” value=”add”>+</button>
<button class=”hotpink” name=”mathkey” value=””>sin</button>
<button class=”hotpink” name=”mathkey” value=”tan”>tan</button>
</div>
</div>
In our code you can find the different class given to each buttons. These are for the colors of button. You can give your own class or color as per your requirement. If you would like to use our color then CSS for the same is below.
header{
width: 320px;
margin: auto;
}

main{
margin: auto;
background-color: skyblue;
width: 350px;
height: 360px;
padding: 10px 10px;
border: 15px solid gray;
border-radius: 20px;

}

#cal_display{
border: 4px solid lightgray;
background-color: #EEE;
height: 40px;
line-height: 40px;
margin: 0 0 15px 0;
padding: 0 5px 0 5px;
text-align: right;
color: black;
font-size: 24px;
font-weight: bold;
font-family: sans-serif ‘Times new roman’;
width: 94%;
}

#cal_keys{
width:200px;
float: left;

}
#cal_keys button{
width:50px;
height:40px;
background-color: black;
margin: 0px 14px 10px 0px;
color: #fff;
font-size:18px;
}
#opr_keys{

width:135px;
clear: left;
float:right;
margin: -302px 0 0 0;
text-align: right;
}

#opr_keys button{
width:50px;
height:40px;
background-color: black;
margin: 0px 0px 10px 15px;
color: #fff;
font-size:18px;
float: left;
}

.grey{
background-color: grey !important;
}

.orange{
background-color: orange !important;
}

.hotpink{
background-color: hotpink !important;
}

footer{
width: 180px;
margin: auto;
font-size: 10px;
padding-top: 10px;
}

If implemented properly your calculator design should look similar to the image or if you have changed the css then color could be different. however basic structure will be same.

Now we need to add the functionality of all buttons. Here if user click on any number key then it should be visible on our input field called “cal_display”. Once user click on the addition, subtraction, division, or multiplication button system should remember the input value and function clicked to perform the calculation and display the next value. Try to add this basic function yourself first and see how good you can do with the same. In our comment section you can write your feedback or requirement if you would like to add some other functionality in your calculator. We will try to give answer on the same asap.

In next part we will show you how to complete the calculator after adding JavaScript file and create different functions to calculate different values as per BOD-MAS formula if user add parenthesis to calculate.

 

Next: How to develop an Simple HTML calculator using JavaScript and CSS – Part II

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.