How to Create a Calculator using HTML CSS and JavaScript (Creating Calculator

How to Create a Calculator using HTML CSS and JavaScript (Creating Calculator | GUI Web App)

4 years ago

Hi, In this page I have shared a programming code to make a simple calculator program. This workable calculator code is written in HTML/CSS and JavaScript Code. It is just a basic web app that you can easily create.

<html> 
<head> <title> Calculator </title> 
<style>
.head{
	background-color: #dd5599; 
	padding: 25px;
	border-radius: 0px 0px 20px 20px; 
	color: yellow;
}

input{
	background-color: black; 
	color: white;
	margin: 3px;
	font-size: 18px;
	border:3px solid black; 
	border-radius: 10px;
	height: 50px;
	width: 50px;
	margin-left: 3px;
}
input:hover{
	background-color: #C6C6C6; 
	color: black;
	border: 3px solid #C6C6C6; 
	cursor: pointer;
}
.dbox{
	background-color: #dddddd;
	border: 8px ridge white;
	border-radius: 0px 0px 0px 0px; 
	width: 240px;
	color: black;
	font-weight: bold;
	text-align: right;
	font-size: 22px;
	margin-top: 10px;
}
.dbox:hover{
	background-color: #dddddd;
	border: 8px ridge white;
	border-radius: 0px 0px 0px 0px;
}

.round{
	background-color:rgb(200, 100, 50); 
	border: 3px outset rgb(200, 100, 50);
	border-radius: 10px;
	padding: 5px;
}

#AC{
	background-color: red;
	border: 5px inset red;
}
</style> 

<script type="text/javascript"> 
function AddDigit(num){
	Calculator.Display.value=Calculator.Display.value+num; 
}

function Clear(){
	document.Calculator.Display.value=null; 
}

function Erase(){
	Calculator.Display.value=Calculator.Display.value.slice(0,Calculator.Display.value.length-1);
}

</script> 

</head> 
<body> 

<h1 class="head">
 <marquee scrollamount="4"> 
 It is a simple Calculator Program designed using HTML, JavaScript and CSS code.  
 </marquee>
 </h1> 

<form name="Calculator"> 
<table border="0" align="center" class="round"> 
<tr> 
	<td> 
		<input class="dbox" type="text" maxlength="30" size="30" name="Display" value="0"> 
	</td> 
</tr> 
<tr> 
	<td> <input type="button" value="ON" name="AC" onClick="Clear()" id="AC"> 
	     <input type="button" value="<-" name="Er" onClick="Erase()"> 
	     <input type="button" value="(" name="bropn" onClick="AddDigit('(')">
	     <input type="button" value=")" name="brclos" onClick="AddDigit(')')">
	</td>
</tr> 
<tr> 	
	<td> <input type="button" value="7" name="seven" onClick="AddDigit('7')">
	     <input type="button" value="8" name="eight" onClick="AddDigit('8')"> 
	     <input type="button" value="9" name="nine" onClick="AddDigit('9')"> 
	     <input type="button" value="+" name="add" onClick="AddDigit('+')"> 
        </td>
</tr> 
<tr> 
	<td> <input type="button" value="4" name="four" onClick="AddDigit('4')"> 
	     <input type="button" value="5" name="five" onClick="AddDigit('5')"> 
	     <input type="button" value="6" name="six" onClick="AddDigit('6')"> 
	     <input type="button" value="-" name="sub" onClick="AddDigit('-')"> 
        </td> 
</tr> 
<tr> 
	<td> <input type="button" value="1" name="one" onClick="AddDigit('1')"> 
	     <input type="button" value="2" name="two" onClick="AddDigit('2')"> 
	     <input type="button" value="3" name="three" onClick="AddDigit('3')"> 
	     <input type="button" value="   x   " name="pro" onclick="AddDigit('*')"> 
        </td> 
</tr> 
<tr> 
	<td> <input type="button" value="0" name="zero" onClick="AddDigit('0')"> 
	     <input type="button" value="." name="dot" onClick="AddDigit('.')"> 
	     <input type="button" value="=" name="equal" onClick="Display.value=eval(Display.value)">  
	     <input type="button" value="/" name="div" onClick="AddDigit('/')"> 
        </td> 
</tr> 
</table> 
	
</form>  
</body> 
</html>