<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<style>
div{
border:5px solid rgb(207, 32, 32);
display: inline-block;
}
</style>
</head>
<body >
<center>
<h1 style="color: black;">Calculater</h1>
<div>
<input type="text" id="a" style="background-color: lightblue; width: 100px;">
<button onclick="clear()" style="background-color: lightred;">C</button>
<br><br>
<button onclick="num(7)">7</button>
<button onclick="num(8)">8</button>
<button onclick="num(9)">9</button>
<button onclick="num('%')" style="background-color: pink;">%</button>
<br><br>
<button onclick="num(4)">4</button>
<button onclick="num(5)">5</button>
<button onclick="num(6)">6</button>
<button onclick="num('*')" style="background-color: pink;">*</button>
<br><br>
<button onclick="num(1)">1</button>
<button onclick="num(2)">2</button>
<button onclick="num(3)">3</button>
<button onclick="num('-')" style="background-color: pink;">-</button>
<br><br>
<button onclick="num(0)">0</button>
<button onclick="num(.)">.</button>
<button onclick="equal()" style="background-color: darkcyan;" >=</button>
<button onclick="num('+')" style="background-color: pink;">+</button>
</div>
</center>
</body>
<script>
function num(val)
{
document.getElementById("a").value+=val
}
function clear()
{
document.getElementById("a").value=""
}
function equal()
{
var cal=document.getElementById("a").value
var c=eval(cal)
document.getElementById("a").value=c
}
</script>
</html>
No comments:
Post a Comment