<!DOCTYPE html>
<html>
<head>
<title>HTML Calc</title>
</head>
<script>
function insert(num) {
document.form.textview.value = document.form.textview.value + num
}
function back() {
var exp = document.form.textview.value;
document.form.textview.value = exp.substring(0,exp.length-1)
}
function empty() {
document.form.textview.value ="";
}
function equal() {
let val = document.form.textview.value;
if(val){
document.form.textview.value = eval(val)
}
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%)
}
.button {
width: 50px;
height: 50px;
font-size: 25;
margin: 2;
background: rgba(95,199,239,.90);
border:none;
}
.button:hover {
background: rgba(75,179,219,1);
}
.textview {
text-align: right;
width:192px;
height: 25px;
margin-left:2px;
font-size: 25;
padding: 5px;
}
html {
background: linear-gradient(#e66465, #9198e5)!important;
height:100%;
}
</style>
<body>
<div class="main">
<form name="form">
<input class="textview" name="textview" type="text">
</form>
<table>
<tr>
<td><input class="button" type="button" onclick="empty()" value="C"></td>
<td><input class="button" type="button" onclick="back()" value="<"></td>
<td><input class="button" type="button" onclick="insert('/')" value="/"></td>
<td><input class="button" type="button" onclick="insert('*')" value="*"></td>
</tr>
<tr>
<td><input class="button" type="button" onclick="insert(1)" value="1"></td>
<td><input class="button" type="button" onclick="insert(2)" value="2"></td>
<td><input class="button" type="button" onclick="insert(3)" value="3"></td>
<td><input class="button" type="button" onclick="insert('+')" value="+"></td>
</tr>
<tr>
<td><input class="button" type="button" onclick="insert(4)" value="4"></td>
<td><input class="button" type="button" onclick="insert(5)" value="5"></td>
<td><input class="button" type="button" onclick="insert(6)" value="6"></td>
<td><input class="button" type="button" onclick="insert('-')" value="-"></td>
</tr>
<tr>
<td><input class="button" type="button" onclick="insert(7)" value="7"></td>
<td><input class="button" type="button" onclick="insert(8)" value="8"></td>
<td><input class="button" type="button" onclick="insert(9)" value="9"></td>
<td rowspan="5"><input style="height:102px" class="button" type="button" onclick="equal()" value="="></td>
</tr>
<tr>
<td colspan="2"><input style="width:102px" class="button" type="button" onclick="insert(0)" value="0"></td>
<td><input class="button" type="button" onclick="insert('.')" value="."></td>
</table>
</div>
</body>
</html>