<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

Contact Form

Name

Email *

Message *

Followers