First, let’s start with our HTML and CSS. Thanks to CSS grid, we can get a nice calculator shape on the page quickly
Make a Basic Calculator in JavaScript
<html>
<head>
<title>Calculator</title>
<style>
#text1,#text2{
}
button{
width:100%;
height:100%;
}
</style>
<script>
function event1(x){
document.getElementById("text1").value+=x;
}
function event2(){
var x = document.getElementById("text1").value;
document.getElementById("text1").value = eval(x);
}
</script>
</head>
<body>
<center>
<table border="1">
<tr>
<th colspan=4><h1>Calculator</h1></th>
</tr>
<tr >
<td colspan=4><input type="text" id="text1" placeholder="0" style="text-align:right;"/></td>
</tr>
<tr>
<td></td>
<td><button type="button" value="/" onClick="event1(this.value)">/</button></td>
<td><button type="button" value="*" onClick="event1(this.value)">*</button></td>
<td><button type="button" value="-" onClick="event1(this.value)">-</button></td>
</tr>
<tr>
<td><button type="button" value="7" onClick="event1(this.value)">7</button></td>
<td><button type="button" value="8" onClick="event1(this.value)">8</button></td>
<td><button type="button" value="9" onClick="event1(this.value)">9</button></td>
<td rowspan=2><button type="button" value="+" style="height:50px;" onClick="event1(this.value)">+</td>
</tr>
<tr>
<td><button type="button" value="4" onClick="event1(this.value)">4</button></td>
<td><button type="button" value="5" onClick="event1(this.value)">5</button></td>
<td><button type="button" value="6" onClick="event1(this.value)">6</button></td>
</tr>
<tr>
<td><button type="button" value="1" onClick="event1(this.value)">1</button></td>
<td><button type="button" value="2" onClick="event1(this.value)">2</button></td>
<td><button type="button" value="3" onClick="event1(this.value)">3</button></td>
<td rowspan=2><button type="button" style="height:48px;" onClick="event2()" >=</button></td>
</tr>
<tr>
<td colspan=2><button type="button" style="width:100%">0</button></td>
<td><button type="button">.</button></td>
</tr>
</table>
</center>
</body>
</html>