Programming Examples
JavaScript Calulatore design and program
Write a JavaScript Code to Perform The Calculator Functionality.
<html>
<head>
<script>
function type_data(data)
{
document.getElementById("output").value=document.getElementById("output").value+data;
}
function cal()
{
document.getElementById("output").value=eval(document.getElementById("output").value)
}
function clear_data()
{
document.getElementById("output").value="";
}
function back_one()
{
var x=document.getElementById("output").value;
document.getElementById("output").value=x.substr(0,x.length-1);
}
</script>
<style>
input[type="text"]
{
padding:10px;
width:100%
font-size:30px;
color:white;
background: rgb(76,77,12);
background: radial-gradient(circle, rgba(76,77,12,1) 45%, rgba(18,20,18,1) 100%);
}
input[type="button"]
{
padding:10px;
color:white;
width:40px;
height:40px;
box-shadow:1px 1px 1px white;
border-radius:4px;
background: rgb(34,195,195);
background: radial-gradient(circle, rgba(34,195,195,1) 45%, rgba(10,119,156,1) 100%);
}
table
{
border:2px solid gray;
box-shadow:3px 4px 4px black;
margin-top:70px;
background:gray;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td colspan="4"><input id="output" type="text" readonly/> </td>
</tr>
<tr>
<td><input type="button" value="C" onclick="clear_data()"/></td>
<td><input type="button" value="%" onclick="type_data(this.value)"/></td>
<td><input type="button" value="⇐" onclick="back_one()"/></td>
<td><input type="button" value="/" onclick="type_data(this.value)"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="type_data(this.value)"/></td>
<td><input type="button" value="8" onclick="type_data(this.value)"/></td>
<td><input type="button" value="9" onclick="type_data(this.value)"/></td>
<td><input type="button" value="*" onclick="type_data(this.value)"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="type_data(this.value)"/></td>
<td><input type="button" value="5" onclick="type_data(this.value)"/></td>
<td><input type="button" value="6" onclick="type_data(this.value)"/></td>
<td><input type="button" value="-" onclick="type_data(this.value)"/></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="type_data(this.value)"/></td>
<td><input type="button" value="2" onclick="type_data(this.value)"/></td>
<td><input type="button" value="3" onclick="type_data(this.value)"/></td>
<td><input type="button" value="+" onclick="type_data(this.value)"/></td>
</tr>
<tr>
<td><input type="button" value="00" onclick="type_data(this.value)"/></td>
<td><input type="button" value="0" onclick="type_data(this.value)"/></td>
<td><input type="button" value="." onclick="type_data(this.value)"/></td>
<td><input type="button" value="=" onclick="cal()"/></td>
</tr>
</table>
</body>
</html>Output/ Explanation: