.jpeg)
Example of calculator using html and css
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator created by Asibur Rahman</title>
</head>
<style>
body{
background:url();
background-color:blue;
font-family:Tahoma;
}
.container{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
width:100vw;
}
#container{
width:200px;
padding:8px 8px 20px 8px;
margin:20px auto;
background-color:#ABABAB;
border-radius:4px;
border-top:2px solid #fff;
border-right:2px solid #fff;
border-bottom:2px solid #C1C1C1;
border-left: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:42px;
width:174px;
padding:0 10px;
border-radius:4px;
border-top:2px solid #C1C1C1;
border-right:2px solid #C1C1C1;
border-bottom:2px solid #fff;
border-left:2px solid #fff;
background-color:#fff;
box-shadow:inset 0px 0px 0px 10px #030303, inset 0px -20px 1px rgba(150, 150, 150, -2);
font-size:20px;
color:#666;
text-align:right;
font-weight:400;
}
.button{
display:inline-block;
margin:2px;
width:42px;
height:42px;
font-size:16px;
font-weight:bold;
border-radius:4px;
}
.mathButtons{
margin:2p: 2px 6px 2px;
color:#fff;
text-shadow:-1px -1px 0px #44006F;
background-color:#434343;
border-top:2px solid #C1C1C1;
border-right:2px solid #C1C1C1;
border-bottom:2px solid #181818;
border-left:2px solid #181818;
box-shadow:0px 0px 2px #030303, Inset 0px -20px 1px #2E2E2E;
}
.digits{
color:#181818;
text-shadow:1px 1px 0px #FFF;
background-color:#EBEBEB;
border-top:2px solid #FFF;
border-right:2px solid #FFF;
border-bottom:2px solid #C1C1C1;
border-left:2px solid #C1C1C1;
border-radius:4px;
box-shadow:0px 0px 2px #030303, inset 0px -20px 1px #DCDCDC;
}
#clearButton{
margin:2p: 2px 6px 2px;
color:#fff;
text-shadow:-1px -1px 0px #44006F;
background-color:#AD1B1B;
border-top:2px solid #C1C1C1;
border-right:2px solid #C1C1C1;
border-bottom:2px solid #181818;
border-left:2px solid #181818;
box-shadow:0px 0px 2px #030303, Inset 0px -20px 1px #AD1B1B;
}
.digits:hover,
.mathButtons:hover,
#clearButton:hover{
background-color:#FFBA75;
box-shadow:0px 0px 2px #FFBA75, inset 0px -20px 1px #FF8000;
border-top:2px solid #FFF;
border-right:2px solid #FFF;
border-bottom:2px solid #AE5700;
border-left:2px solid #AE5700;
}
</style>
<body>
<div class="container">
<fieldset id="container">
<form name="calculator">
<input id="display" type="text" name="display" readonly>
<input class="button digits" type="button" value="7" onclick="calculator.display.value +-='7'">
<input class="button digits" type="button" value="8" onclick="calculator.display.value +-='8'">
<input class="button digits" type="button" value="9" onclick="calculator.display.value +-='9'">
<input class="button mathButtons" type="button" value="+-" onclick="calculator.display.value +-='+'">
<br>
<input class="button digits" type="button" value="4" onclick="calculator.display.value +-='4'">
<input class="button digits" type="button" value="5" onclick="calculator.display.value +-='5'">
<input class="button digits" type="button" value="6" onclick="calculator.display.value +-='6'">
<input class="button mathButtons" type="button" value="-" onclick="calculator.display.value +-='-'">
<br>
<input class="button digits" type="button" value="1" onclick="calculator.display.value +-='1'">
<input class="button digits" type="button" value="2" onclick="calculator.display.value +-='2'">
<input class="button digits" type="button" value="3" onclick="calculator.display.value +-='3'">
<input class="button mathButtons" type="button" value="X" onclick="calculator.display.value +-='*'">
<br>
<input id="clearButton" class="button" type="button" value="C" onclick="calculator.display.value =''">
<input class="button digits" type="button" value="0" onclick="calculator.display.value +-='0'">
<input class="button mathButtons" type="button" value="=" onclick="calculator.display.value = eval(calculator.display.value)">
<input class="button mathButtons" type="button" value="/" onclick="calculator.display.value +-='/'">
</form>
</fieldset>
</div>
</body>
</html>
.jpeg)
