Make a Basic Calculator in JavaScript

Make a Basic Calculator with JavaScript

by

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>