3D CALCULATOR
SOURCE CODE
<!DOCTYPE html>
<html>
<head>
<title>CALCULATOR</title>
<style type="text/css">
*{margin: 0;
padding: 0;
box-sizing: border-box;}
body{background: #e9ebee;}
.container{width: 300px;
height: 500px;
background: darkblue;
margin-top: 5%;
margin-left: 40%;
padding: 30px;
border-radius: 30px;
box-shadow: 3px 3px 5px 4px black;}
#display{background: #e9ebee;
border-radius: 5px;
width: 200px;
height: 35px;
padding: 5px;
font-size: 25px;
margin-left: 20px;
box-shadow: inset 2px 2px 3px 2px black;
margin-top: 20px;
outline: none;}
.btndigits{font-size: 20px;
height: 40px;
width: 30px;
padding: 3px;
font-weight: bold;
color: black;
background: #e9ebee;
margin-left: 8px;
border-radius: 5px;
margin-bottom: 5px;
box-shadow: 2px 2px 2px 2px black;
border:none;
cursor: pointer;
outline: none;
}
.btndigits:active{box-shadow: inset 2px 2px 2px 2px black;}
.mathdigits{font-size: 20px;
height: 40px;
width: 30px;
padding: 3px;
font-weight: bold;
color: white;
background: black;
margin-left: 8px;
border:none;
border-radius: 5px;
box-shadow: 1px 1px 2px 2px #e9ebee;
cursor: pointer;
outline: none;}
.mathdigits:active{box-shadow:inset 1px 1px 2px 2px #e9ebee;}
.del{background: blue;
color: white;
font-family: sans-serif;
font-size: 25px;
padding: 5px;
width: 200px;
height: 50px;
letter-spacing: 2px;
border-radius: 10px;
margin-left: 20px;
outline: none;
border:none;
box-shadow: 2px 2px 4px 3px black;}
.del:active{box-shadow:inset 2px 2px 4px 3px black;}
.section{margin-left: 15px;
margin-top: 30px;}
@media(max-width: 600px){
.container{width:200px ;
height:350px ;
margin-left: 5px;}
#display{width:100px ;
height:15px ;
font-size:15px ;}
.mathdigits{font-size:10px ;
height:20px ;
width:15px ;
padding:1px ;}
.btndigits{font-size:10px ;
height:20px ;
width:15px ;
padding:1px ;}
.section{margin-left:7px ;
margin-top: 10px;}
.del{width:100px ;
height:25px ;
font-size:15px ;}
}
</style>
</head>
<body>
<div class="container">
<form name="cal">
<input type="text" name="display" id="display" readonly><br><br>
<div class="section">
<input type="button" value="1" class="btndigits" onclick="cal.display.value+='1'">
<input type="button" value="2" class="btndigits" onclick="cal.display.value+='2'">
<input type="button" value="3" class="btndigits" onclick="cal.display.value+='3'">
<input type="button" value="4" class="btndigits" onclick="cal.display.value+='4'">
<input type="button" value="+" class="mathdigits" onclick="cal.display.value+='+'">
<br><br>
<input type="button" value="5" class="btndigits" onclick="cal.display.value+='5'">
<input type="button" value="6" class="btndigits" onclick="cal.display.value+='6'">
<input type="button" value="7" class="btndigits" onclick="cal.display.value+='7'">
<input type="button" value="8" class="btndigits" onclick="cal.display.value+='8'">
<input type="button" value="-" class="mathdigits" onclick="cal.display.value+='-'">
<br><br>
<input type="button" value="9" class="btndigits" onclick="cal.display.value+='9'">
<input type="button" value="0" class="btndigits" onclick="cal.display.value+='0'">
<input type="button" value="=" class="mathdigits" onclick="cal.display.value=eval(cal.display.value)">
<input type="button" value="/" class="mathdigits" onclick="cal.display.value+='/'">
<input type="button" value="*" class="mathdigits" onclick="cal.display.value+='*'"></div>
<br><br>
<input type="button" value="Delete" class="del" onclick="cal.display.value=''">
</form>
</div>
</body>
</html>
Comments
Post a Comment