Calculator by HTML & CSS

on
CALCULATOR BY HTML AND CSS3
Languages what have been used here are html and css3.

SOURCE CODE

<html>
<head>
<title>calculator</title>
<style type="text/css">
body{margin: 0;padding:0;box-sizing: border-box;}
body{background: #e9ebee;}
.container-one{background:white;
                box-shadow: 2px 2px 7px 5px gray;
                width: 300px;
                height: 500px;
                        text-align: center;
                        margin-top: 70px;
                        margin-left: 0%;}
                       form{padding-top: 10px;  }
   #display{box-shadow: inset 1px 1px 4px 1px gray;width: 210px;height: 25px;
                                   border- radius: 9px;font-size: 25px;}

    .buttondigits{background:white;color:black;font-weight: bold;font-size: 30px;
                                          cursor: pointer;
    border:none;box-shadow: 1px 1px 4px 1px gray;border-radius: 3px;
                        width: 30px;margin:7px;}
       .buttondigits:active{box-shadow: inset 1px 1px 4px 1px gray;}

    .mathbuttons{background:red;color:black;font-weight: bold;font-size: 30px;
                                           border-radius: 5px;cursor: pointer;border:none;width: 30px;margin:7px;}
    .mathbuttons:active{box-shadow: inset 1px 1px 4px 1px black; }

    .mathbuttonss{background:black;color:white;font-weight: bold;font-size: 30px;
                                            border-radius: 5px;cursor: pointer;border:none;width: 30px;margin:7px;}
    .mathbuttonss:active{box-shadow: inset 1px 1px 4px 1px white; }
    h3{font-family: sans-serif;font-size: 15px;}
</style>
</head>
<body>
<div class="container-one">
<marquee><h3>Web Calculator only by HTML &amp; CSS</h3></marquee>

<form name="cal">
<input id="display" name="display" readonly="" type="text" /><br /><br />
<input class="buttondigits" onclick="cal.display.value += '1'" type="button" value="1" />
<input class="buttondigits" onclick="cal.display.value += '2'" type="button" value="2" />
<input class="buttondigits" onclick="cal.display.value += '3'" type="button" value="3" />
<input class="mathbuttons" onclick="cal.display.value += '+'" type="button" value="+" />
<br /><br />
<input class="buttondigits" onclick="cal.display.value += '4'" type="button" value="4" />
<input class="buttondigits" onclick="cal.display.value += '5'" type="button" value="5" />
<input class="buttondigits" onclick="cal.display.value += '6'" type="button" value="6" />
<input class="mathbuttons" onclick="cal.display.value += '-'" type="button" value="-" />
<br /><br />
<input class="buttondigits" onclick="cal.display.value += '7'" type="button" value="7" />
<input class="buttondigits" onclick="cal.display.value += '8'" type="button" value="8" />
<input class="buttondigits" onclick="cal.display.value += '9'" type="button" value="9" />
<input class="mathbuttons" onclick="cal.display.value += '*'" type="button" value="x" />
<br /><br />
<input class="buttondigits" onclick="cal.display.value += '0'" type="button" value="0" />
<input class="mathbuttonss" id="del" onclick="cal.display.value= ''" type="button" value="C" />
<input class="mathbuttons" onclick="cal.display.value =eval(cal.display.value)" type="button" value="=" />
<input class="mathbuttons" onclick="cal.display.value += '/'" type="button" value="/" />


</form>
</div>

</body>
</html>
calculator

Web Calculator only by HTML & CSS








Comments

Post a Comment