Interface and functionality of the Calculator using HTML, CSS and JAVASCRIPT.
Example :
<html>
<head>
<title>Calculator</title>
<style>
div{
padding: 10px;
background-color: lightgray;
width:fit-content;
}
input[type="button"]
{
width: 50px;
height: 50px;
border-radius: 5px;
}
input[type="button"]:hover
{
background-color:cornflowerblue;
}
</style>
<script>
var num1;
var operator;
function btnClick(caption)
{
var txt=document.getElementById("txt1");
if((caption=='+')||(caption=='-')||(caption=='X')||(caption=='/'))
{
operator=caption;
num1=txt.value;
txt.value="";
}
else if(caption=="==")
{
if(operator=='+')
{
txt.value=parseInt(num1)+parseInt(txt.value);
}
else if(operator=='-')
{
txt.value=parseInt(num1)-parseInt(txt.value);
}
else if(operator=='X')
{
txt.value=parseInt(num1)*parseInt(txt.value);
}
else if(operator=='/')
{
txt.value=parseInt(num1)/parseInt(txt.value);
}
}
else
{
txt.value=txt.value + caption;
}
}//end of function
function txtKeyPress()
{
}//end of function
</script>
</head>
<body>
<div>
<input type="text" id="txt1" disabled="true" onKeyPress="txtKeyPress()" style="width: 100%;
height: 40px;" />
<table>
<tr>
<td><input type="button" value="7" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="8" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="9" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="/" onClick="btnClick(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="5" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="6" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="X" onClick="btnClick(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="2" onClick="btnClick(this.value)"/></td>
<td><input type="button" value="3" onClick="btnClick(this.value)"/></td>
<td><input type="button" value="-" onClick="btnClick(this.value)" /></td>
</tr>
<tr>
<td><input type="button" value="0" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="." onClick="btnClick(this.value)" /></td>
<td><input type="button" value="==" onClick="btnClick(this.value)" /></td>
<td><input type="button" value="+" onClick="btnClick(this.value)" /></td>
</tr>
</table>
</div>
</body>
</html>