simple calculator program in javascript using functions – Create a JavaScript Calculator using the JavaScript, HTML and CSS programming languages.

simple calculator program in javascript using functions

Contents

Dynamic JavaScript Calculator using the HTML, CSS and JavaScript. also you can check my Calculator Using PHP

Use calcAddition() function to calcAddition the number in textview.

function calcAddition(num) 
{
	document.livecalcfrm.textview.value = document.livecalcfrm.textview.value + num;
}

Use equal() function to return the result based on passed values.

function equal()
{
	var exp = document.livecalcfrm.textview.value;
	if(exp)
	{
		document.livecalcfrm.textview.value = eval(exp)
	}
}

Create a simple calculator using Javascript

index.html

<!-- simple calculator program in javascript using functions -->
<!DOCTYPE html>
<html>
<head>
<title>
Calculator Program in JavaScript
</title>

<script>
function calcAddition(num) 
{
document.livecalcfrm.textview.value = document.livecalcfrm.textview.value + num;
}

// Use equal() function to return the result based on passed values.
function equal()
{
var exp = document.livecalcfrm.textview.value;
if(exp)
{
document.livecalcfrm.textview.value = eval(exp)
}
}

function backspace()
{
var exp = document.livecalcfrm.textview.value;
document.livecalcfrm.textview.value = exp.substring(0, exp.length - 1); /* remove the element from total length ? 1 */
}


</script>

<style>
.formstyle
{
width: 300px;
height: 330px;
margin: 20px auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
text-align: center;
background-color: grey;
}

h1 {
	text-align: center;
	padding: 23px;
	background-color: skyblue;
	color: white;
	}
input:hover
{
background-color: green;
}
	
*{
margin: 0;
padding: 0;
}

.btn{
width: 50px;
height: 50px;
font-size: 25px;
margin: 2px;
cursor: pointer;
background-color: red;
color: white;

}

.textview{
width: 223px;
margin: 5px;
font-size: 25px;
padding: 5px;
background-color: lightgreen;
}	
	
</style>
</head>
<body>
<h1> Calculator Program in JavaScript - www.pakainfo.com</h1>
 <div class= "formstyle">
 <form name = "livecalcfrm">
 <input class= "textview" name = "textview">
 </form>
 <center>
 <table >
 <tr> 
	<td> <input class = "btn" type = "button" value = "C" onclick = "livecalcfrm.textview.value = ' ' " > </td>
	<td> <input  class = "btn" type = "button" value = "B" onclick = "backspace()" > </td>
	<td> <input  class = "btn" type = "button" value = "/" onclick = "calcAddition('/')" > </td>
	<td> <input class = "btn" type = "button" value = "x" onclick = "calcAddition('*')" > </td>
	</tr>
	
	 <tr> 
	<td> <input class = "btn" type = "button" value = "7" onclick = "calcAddition(7)" > </td>
	<td> <input class = "btn" type = "button" value = "8" onclick = "calcAddition(8)" > </td>
	<td> <input class = "btn" type = "button" value = "9" onclick = "calcAddition(9)" > </td>
	<td> <input class = "btn" type = "button" value = "-" onclick = "calcAddition('-')" > </td>
	</tr>
	
	 <tr> 
	<td> <input class = "btn" type = "button" value = "4" onclick = "calcAddition(4)" > </td>
	<td> <input class = "btn" type = "button" value = "5" onclick = "calcAddition(5)" > </td>
	<td> <input class = "btn" type = "button" value = "6" onclick = "calcAddition(6)" > </td>
	<td> <input class = "btn" type = "button" value = "+" onclick = "calcAddition('+')" > </td>
	</tr>
	
	 <tr> 
	<td> <input class = "btn" type = "button" value = "1" onclick = "calcAddition(1)" > </td>
	<td> <input class = "btn" type = "button" value = "2" onclick = "calcAddition(2)" > </td>
	<td> <input class = "btn" type = "button" value = "3" onclick = "calcAddition(3)" > </td>
	<td rowspan = 5> <input class = "btn" style = "height: 110px" type = "button" value = "=" onclick = "equal()"> </td>
	</tr>
	<tr>
	<td colspan = 2> <input class = "btn" style = "width: 106px" type = "button" value = "0" onclick = "calcAddition(0)" > </td>
	<td> <input class = "btn" type = "button" value = "." onclick = "calcAddition('.')"> </td>
	</tr>
	</table>
	</center>
 </div>
 </body>
 </html>

I hope you get an idea about simple calculator program in javascript using functions.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

simple calculator program in javascript using functions

Create a simple calculator using Javascript

Related posts: