How to make a very Simple Calculator using JavaScript

Simple calculator using JavaScript

We can create the calculator, converter, etc. in javascript. Many of site provide the facilities of converters like kg to grams etc. they all use Javascript to run that program.

In this calculator, we use HTML tags because browser only knows markup tags so we can create the interface of calculator using HTML and use CSS for some styling and JavaScript for the main logic of that calculator and produce results.

So, first of all, I write the simple structure of HTML file and in this file, JavaScript is placed at the end of the body because we have to perform some functions on click event, and if the script is on the top of the page, it will not produce the right result.

Above is the basic structure for the HTML file.

Now I create first a table in body tag so that the semantic of the calculator is well managed. Although tables are not good practices and they are not good for responsive web pages, this time, we just focus on the calculator and its calculations.

So first row is for inputs and all other row have four cell which contains 1-9 digits +,-,*, /, = operators and cancel button.

As the first row is full on all the below columns in other word 1st row expand on four columns so to do this, we use colspan attribute to expand a row cell to more than one cell.

 

calculator structure html
calculator structure HTML

Code:

Buttons:

Now to create buttons, we will use <input> element having type button and put some onclick event on all buttons and give it a value to show on the interface.

Now put all the buttons in some sequence I used the standard sequence from left bottom to up 1-9 and operators on the right side.

Like the button for digit nine is:

<input type=”button” onclick=”nine()” value=”9″>

And put an input box in 1st row which contain all the inputs using input type=”text”

And give it an ID so that we call it in JavaScript and use the value of it and after it shows the result of it as in calculators.

Now the new code looks like this:

simple calculator buttons html
simple calculator buttons HTML

Now we have to write the code for onclick events. As in code, every button has its onclick event, so we have to write their event handler functions in javascript.

So let’s start first we need the input element box so that we show in it what user press. So we get that element by its ID. In our case we give it id=ans, so code for it is:

now we have that element stored in x, and we use javascript document properties like values to show and calculate results.

Now the code for digit one button in this we have and onclick event which calls function name one(). So we simply add 1 to result and result is our input box.

We write that code because if the user presses some key again then it will be added to the previous value and then show it as a string. So the complete code for one() is:

 

For all other digits the code will be same simply function name and the value will be change like for button 2, code is:

Same as for three, four and so on….

Now take a look at operators code as in digits the operators -, +, * ,/ have the same code but this time we store these operators as a characters variables in the result string.

Above is the code for subtraction operator same code is for add, mul and divide just change the sign.

Now take a look on clear button. Like the name, it just has to clear everything so in this function we just have to putt null in result.value.

Now when we click button and add values input box will be like:

simple calculator using javascript
simple calculator using javascript

It will be saved as 5 ‘+’ 3 ‘+’ 9 ‘-‘ 8

So when user press = equal button we need to calculate the result in another word we have to convert those characters into operators because ‘ + ’ ! =  + . So in Javascript

eval( ) function is used to convert the string to decimal numbers. So the code for the equal function is:

Now your calculator code is complete save the code and runs it.

Complete Code for JavaScript Calculator:

Download HTML javascript calculator (HTML file) or watch a live javascript calculator demo

View Live Demo of Calculator web Application

Download HTML javascript calculator (HTML file)