Calci0.1
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.b{
height:50px;
width:250px;
border:2px solid grey;
padding:0px;
box-shadow: 2px 3px 5px 3px black;
background:lightgrey;
}
.a{
height:10px;
width:60px;
margin:0px;
padding:px;
box-shadow:inset 0px 1px 1px 1px black;
font-size:9px;
}
.c{
margin-right:4.9px;
}
.d{
border:2px solid grey;
height:150px;
width:250px;
display:grid;
grid-template-columns:1fr 1fr;
background:lightgrey;
text-align:center;
box-shadow: 2px 3px 5px 3px black;
}
button{
height:50px;
width:50px;
margin:0px;
padding:0px;
background:;
box-shadow:2px 3px 5px 3px black;
}
font{
text-shadow:0.6px 0.8px black;
dispaly:bold;
}
.b1{
margin-top:3px;
margin-left:-46px;
margin-right:0px;
}
.b2{
margin-top:3px;
margin-left:-49px;
margin-right:120px;
}
.b3{
margin-left:-46px;
margin-right:0px;
margin-top:-3px;
}
.b4{
margin-left:-49px;
margin-right:120px;
margin-top:-3px;
}
.e{
margin-top:-150px;
margin-left:165px;
border:1px solid grey;
width:84px;
font-size:10px;
box-shadow:inset 0px 0.8px 0.5px 1px black;
background:white;
}
.br{
height:2px;
width:125px;
border1px solid grey;
margin-top:46px;
margin-left:10px;
background-color:lightgrey;
box-shadow:0.7px 0.8px 2px 1px black;
}
.br1{
width:2px;
height:132px;
background-color:lightgrey;
margin-top:-65px;
margin-left:72px;
box-shadow:0.7px 0.8px 2px 1px black;
border1px solid grey;
}
</style>
</head>
<body>
<div class="b"><font size="2px" class="c"> INPUT THE FIRST NO.= </font><input type="text" class="a" id="in" ><br><font size="2px"> INPUT THE SECON NO.=</font><input type="text" class="a" id="im">
</div>
<div class="d" id="prasad">
<div><button class="b1" id="g1" onclick="f()">+</button></div>
<div><button class="b2" id="g2"onclick="g()">-</button></div>
<div><button class="b3" id="g3"onclick="h()">×</button></div>
<div><button class="b4" id="g4"onclick="i()">÷</button></div>
</div>
<div class="e">
<div id="answer"class="box">Ans:</div>
</div>
<div class="br"></div>
<div class="br1"></div>
<script>
function f()
{
var a=document.getElementById("in").value;
var b=document.getElementById("im").value;
var c=parseFloat(a)+parseFloat(b);
if(!isNaN(c))
{
document.getElementById("answer").innerHTML="Ans:"+c
}
{
document.getElementById("g1").style.backgroundColor="lightblue";
}
{
document.getElementById("g2").style.backgroundColor="white";
}
{
document.getElementById("g3").style.backgroundColor="white";
}
{
document.getElementById("g4").style.backgroundColor="white";
}
}
</script>
<script>
function g()
{
var a=document.getElementById("in").value;
var b=document.getElementById("im").value;
var c=parseFloat(a)-parseFloat(b);
if(!isNaN(c))
{
document.getElementById("answer").innerHTML="Ans:"+c
}
{
document.getElementById("g2").style.backgroundColor="lightblue";
}
{
document.getElementById("g1").style.backgroundColor="white";
}
{
document.getElementById("g3").style.backgroundColor="white";
}
{
document.getElementById("g4").style.backgroundColor="white";
}
}
</script>
<script>
function h()
{
var g=document.getElementById("in").value;
var h=document.getElementById("im").value;
var i=parseFloat(g)*parseFloat(h);
if(!isNaN(i))
{
document.getElementById("answer").innerHTML="Ans:"+i
}
{
document.getElementById("g3").style.backgroundColor="lightblue";
}
{
document.getElementById("g1").style.backgroundColor="white";
}
{
document.getElementById("g2").style.backgroundColor="white";
}
{
document.getElementById("g4").style.backgroundColor="white";
}
}
</script>
<script>
function i()
{
var j=document.getElementById("in").value;
var k=document.getElementById("im").value;
var l=parseFloat(j)/parseFloat(k);
if(!isNaN(l))
{
document.getElementById("answer").innerHTML="Ans:"+l
}
{
document.getElementById("g4").style.backgroundColor="lightblue";
}
{
document.getElementById("g1").style.backgroundColor="white";
}
{
document.getElementById("g2").style.backgroundColor="white";
}
{
document.getElementById("g3").style.backgroundColor="white";
}
}
</script>
</body>
</html>
Comments
Post a Comment