HOW TO MAKE CALCULATOR :
OUTPUT:
CODE:
<!DOCTYPE html>
<html>
<head>
<title>abc</title>
<style>
h1{
font-size: 70px;
font-style: initial;
background:linear-gradient(seagreen, darksalmon,lightgrey);
-webkit-background-clip: text;
color: transparent;
}
div{
border: 3px solid rgba(173, 29, 29, 0.397);
background-color: darksalmon;
width: 200px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
button{
border: 2px solid black;
border-top-right-radius: 10px;
background-color: rgba(0, 139, 139, 0.438);
font-size: large;
}
</style>
</head>
<body>
<center><h1>CALCULATOR</h1></center>
<br><br>
<center><div>
<input type="text" id="m"><br><br>
<button onclick="num(7)">7</button>
<button onclick="num(8)">8</button>
<button onclick="num(9)">9</button>
<button onclick="num('*')">*</button><br><br>
<button onclick="num(4)" >4</button>
<button onclick="num(5)">5</button>
<button onclick="num(6)">6</button>
<button onclick="num('-')" >-</button><br><br>
<button onclick="num(1)" >1</button>
<button onclick="num(2)" >2</button>
<button onclick="num(3)" >3</button>
<button onclick="num('+')">+</button><br><br>
<button>()</button>
<button onclick="num(0)" >0</button>
<button onclick="num('.')" >.</button>
<button onclick="eql()">=</button><br><br>
<button onclick="clr()">clear</button>
</div></center>
</body>
<script>
function num(val)
{
document.getElementById("m").value+=val
}
function eql()
{
var cal=document.getElementById("m").value
var c=eval(cal)
document.getElementById("m").value=c
}
function clr()
{
document.getElementById("m").value=""
}
</script>
</html>
No comments:
Post a Comment