Gui Calculator Method 2 (By using Parametric Functions)
M2-R5.1 · Chapter 6: JavaScript and Angular JS · 3 min read
Basic GUI Calculator
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<style>
table,tr,td{
border-radius: 3px;
background-color: cadetblue;
}
table{
border: 2px solid black;
}
td{
width:25px;
}
button{
width: 25px;
background-color: green;
color: aliceblue;
border: 2px inset rgb(0, 0, 0);
}
input{
border: 2px solid black;
width: 85px;
text-align: right;
background-color: rgb(195, 178, 135) ;
}
#eq{
width: 60px;
}
</style>
</head>
<body>
<center> <div>
<table >
<h1>Calculator</h1>
<tr>
<td colspan="3"><input type="text" id="display"></td>
<td><button onclick="cl()" >C</button></td>
</tr>
<tr align="center">
<td><button onclick="inpp(7)">7</button></td>
<td><button onclick="inpp(8)">8</button></td>
<td><button onclick="inpp(9)">9</button></td>
<td><button onclick="inpp('/')">/</button></td>
</tr>
<tr align="center">
<td><button onclick="inpp(4)">4</button></td>
<td><button onclick="inpp(5)">5</button></td>
<td><button onclick="inpp(6)">6</button></td>
<td><button onclick="inpp('*')">X</button></td>
</tr>
<tr align="center">
<td><button onclick="inpp(1)">1</button></td>
<td><button onclick="inpp(2)">2</button></td>
<td><button onclick="inpp(3)">3</button></td>
<td><button onclick="inpp('-')">-</button></td>
</tr>
<tr align="center">
<td><button onclick="inpp(0)">0</button></td>
<td colspan="2"><button id="eq" onclick="equal()">=</button></td>
<td><button id="add" value="+" onclick="inpp('+')">+</button></td>
</tr>
</table></div></center>
<script>
function inpp(a){
document.getElementById('display').value+=a;
}
function cl(){
document.getElementById('display').value="";
}
function equal(){
var res=eval( document.getElementById('display').value);
document.getElementById('display').value=res;
}
</script>
</body>
</html>