If you have just started learning javascript, you may be assigned by someone to create a basic project of calculator using javascript, so in this article, I will provide you simple code of creating a calculator using javascript's eval function, which does the all work for you on a single button click.

The very first step is to look out for a header so each browser knows what to expect. Headers are not a part of this tutorial. However, you can find loads of information by typing 'HTML headers' into google. So copy the code below and paste it into a blank document and then save it as 'SimpleCalculator.html' in a folder called 'javascript-calculator'.

<!DOCTYPE html>
<html>
	<head>
	<title> Simple Calculation</title>
        <!--Include CSS/JS here, if there is any-->
        </head>
</html>

Now, we will be creating the main body part of the Calculator, so basically, we will be providing button 0-9 and all other mathematical operators buttons like Plus(+), minus(-), divide(/) & multiple (*)

Here is the form with table in which we are providing these buttons to user

<body>
    <form NAME="myForm">
        <table BORDER=2>
            <tr>
                <td align="center">
                    <input TYPE="text" ID="screen" NAME="screen" style="width:99%">
                    <br/>
                </td>
            </tr>
            <tr>
                <td>
                    <input TYPE="button" NAME="7" VALUE="  7  " onclick="updateTextbox(7)">
                    <input TYPE="button" NAME="8" VALUE="  8  " onclick="updateTextbox(8)">
                    <input TYPE="button" NAME="9" VALUE="  9  " onclick="updateTextbox(9)">
                    <input TYPE="button" NAME="+" VALUE="  +  " onclick="updateTextbox('+')">
                    <br>
                    <input TYPE="button" NAME="4" VALUE="  4  " onclick="updateTextbox(4)">
                    <input TYPE="button" NAME="5" VALUE="  5  " onclick="updateTextbox(5)">
                    <input TYPE="button" NAME="6" VALUE="  6  " onclick="updateTextbox(6)">
                    <input TYPE="button" NAME="-" VALUE="  -  " onclick="updateTextbox('-')">
                    <br>
                    <input TYPE="button" NAME="1" VALUE="  1  " onclick="updateTextbox(1)">
                    <input TYPE="button" NAME="2" VALUE="  2  " onclick="updateTextbox(2)">
                    <input TYPE="button" NAME="3" VALUE="  3  " onclick="updateTextbox(3)">
                    <input TYPE="button" NAME="*" VALUE="  x  " onclick="updateTextbox('*')">
                    <br>
                    <input TYPE="button" NAME="c" VALUE="  c  " onclick="reset();">
                    <input TYPE="button" NAME="0" VALUE="  0  " onclick="updateTextbox(0)">
                    <input TYPE="button" NAME="=" VALUE="  =  " onclick="result();">
                    <input TYPE="button" NAME="/" VALUE="  /  " onclick="updateTextbox('/')">
                </td>
            </tr>
        </table>
    </form>
</body>

In above HTML code, we have just added buttons for our user, with each line has 4 buttons and then <br/>, now if you have noticed we have also added javascript funciton, which we will call on button click

One of the main javascript function is updateTextbox(), which update's the textbox with id=screen on clicking a button, for example, if we click "5" on a calculator, updateTextbox(5) is called, which will add/append text "5" into the main screen using the following JS code

function updateTextbox(value){
		document.getElementById("screen").value += value;
}

The second important & most function will be the result(), which evaluates all the text data written in the screen textbox using javascript's Eval function

function result(){
		document.getElementById("screen").value = eval(document.getElementById("screen").value);
	}

the last JS function which we will be using is reset(), which clear's the screen textbox data

function reset(){
		document.getElementById("screen").value = '';
	}

so your complete JS code will be as below

<script type = "text/javascript">
	function updateTextbox(value){
		document.getElementById("screen").value += value;
	}
	
	function result(){
		document.getElementById("screen").value = eval(document.getElementById("screen").value);
	}
	
	function reset(){
		document.getElementById("screen").value = '';
	}
	</script>

which we will be placing just before </head> in the HTML, so your complete HTML code with calculator function's will be

<!DOCTYPE html>
<html>

	<head>
	<title> Simple Calculation</title>
	<script type = "text/javascript">
	
	function updateTextbox(value){
		document.getElementById("screen").value += value;
	}
	
	function result(){
		document.getElementById("screen").value = eval(document.getElementById("screen").value);
	}
	
	function reset(){
		document.getElementById("screen").value = '';
	}
	
	</script>
	</head>
	<body>
				<form NAME="myForm">
			<table BORDER=2>
				<tr>
					<td align="center">
						<input TYPE="text" ID="screen" NAME="screen" style="width:99%"><br/>
				</td>
				</tr>
				<tr>
					<td>
						<input TYPE="button" NAME="7"   VALUE="  7  " onclick="updateTextbox(7)">
						<input TYPE="button" NAME="8"   VALUE="  8  " onclick="updateTextbox(8)">
						<input TYPE="button" NAME="9" VALUE="  9  " onclick="updateTextbox(9)">
						<input TYPE="button" NAME="+"  VALUE="  +  " onclick="updateTextbox('+')">
						<br>
						<input TYPE="button" NAME="4"  VALUE="  4  " onclick="updateTextbox(4)">
						<input TYPE="button" NAME="5"  VALUE="  5  " onclick="updateTextbox(5)">
						<input TYPE="button" NAME="6"   VALUE="  6  " onclick="updateTextbox(6)">
						<input TYPE="button" NAME="-" VALUE="  -  " onclick="updateTextbox('-')">
						<br>
						<input TYPE="button" NAME="1" VALUE="  1  " onclick="updateTextbox(1)">
						<input TYPE="button" NAME="2" VALUE="  2  " onclick="updateTextbox(2)">
						<input TYPE="button" NAME="3"  VALUE="  3  " onclick="updateTextbox(3)">
						<input TYPE="button" NAME="*" VALUE="  x  " onclick="updateTextbox('*')">
						<br>
						<input TYPE="button" NAME="c" VALUE="  c  " onclick="reset();">
						<input TYPE="button" NAME="0"  VALUE="  0  " onclick="updateTextbox(0)">
						<input TYPE="button" NAME="="  VALUE="  =  " onclick="result();">
						<input TYPE="button" NAME="/"   VALUE="  /  " onclick="updateTextbox('/')">
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

You can also style buttons by giving them CSS, this step is optional but I am providing the CSS code below

input[type=button] 
{
  display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    background-color: #538fbe;
    margin:10px ;
    font-size: 16px;
    border: 1px solid #2d6898;
    width:50px;
    text-align:center;
     background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
    -webkit-box-shadow: 0px 3px 0px #2b638f, 0px 3px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0px 3px 0px #2b638f, 0px 3px 10px rgba(0,0,0,.2);
box-shadow: 0px 3px 0px #2b638f, 0px 3px 10px rgba(0,0,0,.2);
}

Complete Output would be as below

simple-calculator-using-javascript.png

Gif image demo

simple-calculator-javascript-min.gif


Thanks for reading, feel free to ask any question's related to this in comment's section.