calculator use html with source code

-

 Source code 

Share with your friends 

<html>
<head>
<title> Calculator </title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.wrap{
width:215px;
margin:10px 50px;
background: ;
border:10px solid lightblue;
padding:5px;
border-radius: 10px;
box-shadow:3px 2px 20px 0px #000;
}

.disp{
width:100%;
padding:10px;
font-size: 22px;
font-weight:bold;
border-radius: 10px;
border:3px solid #000;
box-shadow: 3px 3px 5px 0px;
font-size:30px;
margin-bottom:30px;
}
.button{
background: rgb(255,70,255);
border:none;
width:50px;
height:50px;
text-align:center;
margin:0px 0px;
font-size:22px;
border-radius: 100%;
}
.del{
width:100%;
height: 40px;
background: rgb(69,50,255);
border:none;
outline:none;
margin: 0px px;
font-size: 25px;
text-align:center;
margin: 5px 0px;
border-radius: 10px;
}
.button2{
background:rgb(255,155,76);
width:50px;
height: 50px;
border:none;
outline:none;
margin: 3px 0px;
font-size:22px;
border-radius:100%;
}
.eql{
width:50px;
height: 50px;
font-size:22px;
border-radius: 100%;
border:none;
background:rgb(255,31,98);
box-shadow:2px 1px 10px 0px blue;
}
.txt{
margin:5px 30px;
font-size: 25px;
font-weight:bold;
font-family:Courier new,monospace;

}
</style>
</head>
<body>
<div class="wrap">
<form name="cal" >
<input class="disp"  type="text" name="display" >
<br><br>
<input class="button"  type="button" value="9"  onclick="cal.display.value+='9' " >
<input class="button" value="8"  onclick="cal.display.value+='8' " >
<input  class="button" type="button" value="7"  onclick="cal.display.value+='7' " >
<input class="button2"   type="button" value="+"  onclick="cal.display.value+='+'">
<br>
<input  class="button" type="button" value="6"  onclick="cal.display.value+='6' " >
<input  class="button" type="button" value="5"  onclick="cal.display.value+='5' " >
<input  class="button" type="button" value="4"  onclick="cal.display.value+='4' " >
<input class="button2"  type="button" value="-"  onclick="cal.display.value+='-'">
<br>
<input  class="button" type="button" value="3"  onclick="cal.display.value+='3' " >
<input  class="button"type="button" value="2"  onclick="cal.display.value+='2' " >
<input  class="button" type="button" value="1"  onclick="cal.display.value+='1' " >
<input class="button2"  type="button" value="X"  onclick="cal.display.value+='*'">
<br>
<input  class="button2" type="button" value="%"  onclick="cal.display.value+='%' " >
<input  class="button" type="button" value="0"  onclick="cal.display.value+='0' " >
<input  class="button2" type="button" value="/"  onclick="cal.display.value+='/' " >
<input class="eql" type="button" value="="  onclick="cal.display.value =eval(cal.display.value) ">
<br>
<input class=" del"  type="button" value="CLEAR"  onclick="cal.display.value =' ' "  >
</form>
<marquee behavior="slide" >
<b class="txt"> CALCULATOR <b>
</marquee>
</div>
</body>
</html>

THANK YOU 


Comments

Post a Comment