Calculator

by anoopsuda

HTML

<form name="calculator">
<div class="calculatorblock">
<input id="display" class="screen"  value="" placeholder="0" readonly/>


 

<div class="buttonset">
<div class="row">
<input type="button" value="/" onclick="display.value += '/'">
<input type="button" value="*" onclick="display.value += '*'">
<input type="button" value="-" onclick="display.value += '-'">
<input type="button" value="+" onclick="display.value += '+'">
</div>
<div class="row">
<input type="button" value="9" onclick="display.value += '9'">
<input type="button" value="8" onclick="display.value += '8'">
<input type="button" value="7" onclick="display.value += '7'">
<input type="button" value="6" onclick="display.value += '6'">
</div>
<div class="row">
<input type="button" value="5" onclick="display.value += '5'">
<input type="button" value="4" onclick="display.value += '4'">
<input type="button" value="3" onclick="display.value += '3'">
<input type="button" value="2" onclick="display.value += '2'">
</div>
<div class="row">
<input type="button" value="1" onclick="display.value += '1'">
<input type="button" value="0" onclick="display.value += '0'">
<input type="button" value="." onclick="display.value += '.'">
<input type="button" value="=" onclick="display.value = eval(display.value)">
</div>
<div class="row">
<input type="button"  value="C" onclick="display.value = ''">
<input type="button"  value="DE" onclick="display.value = display.value.toString().slice(0,-1)">
</div>
</div>
</div>
 </form>

CSS

div, input { box-sizing: border-box;}
.calculatorblock { width:300px; height:auto; border:solid 1px red; padding:16px;  }
.screen {border:solid 1px black; width:100%; height:40px; padding:8px; text-align:right; font-size:18px; font-weight:bold;}
.row {display:flex;     display: flex;
    justify-content: space-between;
    padding: 8px 0;}
    button {width:48px; height:48px;}