<html>
<head>
<title>Calculator by Mahesh Raj Joshi</title>
<p>making this calculator! please click any number of this calculator</p>
<style>
body{
background:url(C.jpg);
background-color:#FFF;
font-family:Tahoma;
}
.container{
display:flex;
align-item:center;
justity-content:center;
height:30%;
width:30%;
}
#container{
width:300px;
padding:8px 8px 20px 8px;
margin:200px 100px;
background-color:ABABAAB;
border-radius:4px;
border-top:2px solid
border-right:2px solid #FFF;
border-left:2px solid #C1C1C1;
border-buttom:2px solid #C1C1C1;
box-shadow:-3px 3px 7px rgba(0,0,0,.6),inset -100px 0px 100px rgba(255,255,255,.5);
}
#display{
display:block:
margin:15px auto;
height:70px;
width:300px;
padding:0 10px;
border-radius:4px;
border-right:2px solid#C1C1C1;
border-top:2px solid#C1C1C1;
border-button:2px solid#FFF;
border-left:2px solid#FFF;
background-color:#FFF;
box-shadow:inset 0px 0px 10px #030303,inset 0px -20px 1px rgba(150 , 150 , 150, .2);
font-size:28px;
color:#666;
text-align:right;
font-weight:400;
}
.button{
display:inline-block;
margin:2px;
width:60px:
height:60px;
font-size:19px;
font-weight:bold;
border-radius:4px;
}
.mathButton{
margin:2px 2px 6px 2px;
color:#FFF;
text-shadow:-1px -1px 0px #44006F;
background-color:#434343;
border-top:2px solid #C1C1C1;
border-right:2px solid #C1C1C1C1;
border-left:2px solid #181818;
border-buttom:2px solid #181818;
box-shadow:0px 0px 2px #030303,insel 0px -20px 1px #2E2E2E;
height:60px;
width:60px;
}
.digits{
color:#181818;
text-shadow:1px 1px 0px #FFF;
background-color:#EBEBEB;
border-top:2px solid#FFF;
border-right:2px solid#FFF;
border-buttom:2px solid#C1C1C1;
border-left:2px solid#C1C1C1;
border-radius:4px;
box-shadow:0px 0px 2px #030303,insel 0px -20px 1px #DCDCDC;
height:60px;
width:60px;
}
.digits:hover,
.mathButton:hover,
#clearButton:hover{
background-color:#FFBA75;
box-shadow:0px 0px 2px #FFBA75,insel 0px -20px 1px#FF80000;
border-top:2px solid #FFF;
border-right:2px solid #FFF;
border-left:2px solid #AF5700;
border-buttom:2px solid #AF5700;
}
#clearButton {
color:#181818;
text-shadow:-1px -1px 0px #44006F;
background-color:#D20000;
border-top:2px solid#FF8484;
border-right:2px solid#FF8484;
border-buttom:2px solid#800000;
border-left:2px solid#800000;
box-shadow:0px 0px 2px #030303,insel 0px -20px 1px #800000;
height:60px;
width:60px;
}
</style>
</head>
<body>
<div class="container">
<fieldset id="container">
<form name="calculator">
<input id="display" name="display" readonly="" type="text" />
<input class="button digits" onclick="calculator.display.value+='7'" type="button" value="7" />
<input class="button digits" onclick="calculator.display.value+='8'" type="button" value="8" />
<input class="button digits" onclick="calculator.display.value+='9'" type="button" value="9" />
<input class="button mathButton" onclick="calculator.display.value+='+'" type="button" value="+" />
<input class="button digits" onclick="calculator.display.value+='4'" type="button" value="4" />
<input class="button digits" onclick="calculator.display.value+='5'" type="button" value="5" />
<input class="button digits" onclick="calculator.display.value+='6'" type="button" value="6" />
<input class="button mathButton" onclick="calculator.display.value+='-'" type="button" value="-" />
<input class="button digits" onclick="calculator.display.value+='1'" type="button" value="1" />
<input class="button digits" onclick="calculator.display.value+='2'" type="button" value="2" />
<input class="button digits" onclick="calculator.display.value+='3'" type="button" value="3" />
<input class="button mathButton" onclick="calculator.display.value+='*'" type="button" value="x" />
<input class="button" id="clearButton" onclick="calculator.display.value=''" type="button" value="C" />
<input class="button digits" onclick="calculator.display.value+='0'" type="button" value="0" />
<input class="button mathButton" onclick="calculator.display.value=eval(calculator.display.value)" type="button" value="=" />
<input class="button mathButton" onclick="calculator.display.value+='/'" type="button" value="/" />
</form>
</fieldset>
</div>
</body>
</html>
Comments