In this page, we are going to be making a calculator with basic HTML, CSS and JAVASCRIPT. Our calculator will only able to perform basic and advance math operations: addition, subtraction, multiplication, division, square root , value of pi and square value. To better understand these codes you would need to have a little knowledge of HTML, CSS and JAVASCRIPT.
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 sqrt()
{
let x = document.getElementById("result").value
let y = Math.sqrt(x)
document.getElementById("result").value = y
}
function pow()
{
let x = document.getElementById("result").value
let y = Math.pow(x,2)
document.getElementById("result").value = y
}
function pi() {var x=Math.PI; document.getElementById("result").value = x} 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"]
{ cursor: pointer; border-radius: 12px; font-family: "Times New Roman", Times, serif; font-size:25px; background-color:white;
color: red;
border: solid blue 3dip;
width:43px; height:43px;
}
input[type="text"]
{ font-family: "Times New Roman", Times, serif; background-color:#E5E5FF; font-size:30px; color:red; border: solid black 2dip; width:240px; height:50px; }
</style>
</head>
<title>MY ADVANCE CALCULATOR</title> <body bgcolor="yellow"> <H1> <marquee bgcolor="#000080" style="color: #FFFFFF; font-family: Book Antiqua" behavior="alternate" > *** PROJECT USING HTML, CSS AND JAVASCRIPT***</marquee></H1> <script>
function myFunction() {
window.open("nbnbnbnbjxkbv");
}
</script>
<center>
<style>#calc{width:290px;height:300px;} </style><form name="calc"><table id="calc"border=20> <tr>
<td colspan="5"><input id="result" type="text" name="input1" placeholder="Enter Here..."/></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> <td><input onclick="clr()" type="button" value="c" /> </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> <td><input onclick="sqrt()" 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> <td><input onclick="pow()" type="button" value="x^2" /> </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> <td><input onclick="pi()" type="button" value="Π" /> </td> </tr> </table> </form> <br> </center></body></html>
check here