In this series, we are going to be making a simple calculator with basic HTML, CSS and JavaScript. Our calculator will only able to perform basic math operations: addition, subtraction, multiplication and division. To better understand these codes you would need to have a little knowledge of HTML and CSS.
If you don’t already know them, no need to worry. I simplified this the calculator code below.
<html>
<head>
<script>
function dis(val)
{
document.getElementById("result").value+=val
}
function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
function clr()
{
document.getElementById("result").value = ""
}
</script>
<style>
.title{
margin-bottom: 10dip;
text-align:center;
width:200dip;
color:green;
border: solid blue 3dip;
}
input[type="button"]
{
background-color:yellow;
color: black;
border: solid black 2dip;
width:100%
}
input[type="text"]
{
background-color:#E5E5FF;
color:red;
border: solid black 2dip;
width:100%
}
</style>
</head>
<body bgcolor="#B2B2FF"> <center>
<script>
function myFunction() {
window.open("nbnbnbnbjxkbv");
}
</script>
<div class="title"> Advanced Calculator </div>
<table border="1">
<tr>
<td colspan="7"><input id="result" type="text" /></td>
<td><input onclick="clr()" type="button" value="c" /> </td>
</tr>
<tr>
<td><input onclick="dis('1')" type="button" value="1" /> </td>
<td><input onclick="dis('2')" type="button" value="2" /> </td>
<td><input onclick="dis('3')" type="button" value="3" /> </td>
<td><input onclick="dis('/')" type="button" value="/" /> </td>
</tr>
<tr>
<td><input onclick="dis('4')" type="button" value="4" /> </td>
<td><input onclick="dis('5')" type="button" value="5" /> </td>
<td><input onclick="dis('6')" type="button" value="6" /> </td>
<td><input onclick="dis('-')" type="button" value="-" /> </td>
</tr>
<tr>
<td><input onclick="dis('7')" type="button" value="7" /> </td>
<td><input onclick="dis('8')" type="button" value="8" /> </td>
<td><input onclick="dis('9')" type="button" value="9" /> </td>
<td><input onclick="dis('+')" type="button" value="+" /> </td>
</tr>
<tr>
<td><input onclick="dis('.')" type="button" value="." /> </td>
<td><input onclick="dis('0')" type="button" value="0" /> </td>
<td><input onclick="solve()" type="button" value="=" /> </td>
<td><input onclick="dis('*')" type="button" value="*" /> </td>
</tr>
</table>
</center>
</body>
</html>