CREATE A SIMPLE CALCULATOR USING HTML
First I created the table so that all the buttons are placed in a tabular form.
Then the form, so that all the buttons works perfectly.
Then, I added the styling using Css
And Lastly, I added the Scripting to make the buttons functional. The scriptings are All in the onclick event attribute.
<center><form name="calculator">
<table>
<tr>
<td colspan="6">
<input type="text" name="display" id="display"placeholder="0"disabled>
</td>
</tr>
<tr>
<td><input type="button" name="one" value="1" onclick="calculator.display.value += '1'; navigator.vibrate(100)"></td>
<td><input type="button" name="two" value="2" onclick="calculator.display.value += '2'; navigator.vibrate(100)"></td>
<td><input type="button" name="three" value="3" onclick="calculator.display.value += '3'; navigator.vibrate(100)"></td>
<td><input type="button" id="operator" name="plus" value="+" onclick="calculator.display.value += '+'; navigator.vibrate(100)"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" onclick="calculator.display.value += '4'; navigator.vibrate(100)"></td>
<td><input type="button" name="five" value="5" onclick="calculator.display.value += '5'; navigator.vibrate(100)"></td>
<td><input type="button" name="six" value="6" onclick="calculator.display.value += '6'; navigator.vibrate(100)"></td>
<td><input type="button" name="minus" value="-" id="operator" onclick="calculator.display.value += '-'; navigator.vibrate(100)"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7" onclick="calculator.display.value += '7'; navigator.vibrate(100)"></td>
<td><input type="button" name="eight" value="8" onclick="calculator.display.value += '8'; navigator.vibrate(100)"></td>
<td><input type="button" name="nine" value="9" onclick="calculator.display.value += '9'; navigator.vibrate(100)"></td>
<td><input type="button" name="divide" value="/" onclick="calculator.display.value += '/'; navigator.vibrate(100) "id="operator"></td>
</tr>
<tr>
<td><input type="button" name="clear" value="c" id="clear" onclick="calculator.display.value = ''; navigator.vibrate(100)"></td>
<td><input type="button" name="zero" value="0" onclick="calculator.display.value += '0'; navigator.vibrate(100)"></td>
<td><input type="button" name="calc" value="=" onclick="calculator.display.value = try{calculator.display.value= eval(calculator.display.value)} catch(err){calculator.display.value='math ERROR'} finally{ if(calculator.display.value == 'undefined'){calculator.display.value=''}}; navigator.vibrate(100); navigator.vibrate(100)"></td>
<td><input type="button" name="multiply" value="*" onclick="calculator.display.value += '*'; navigator.vibrate(100)" id="operator"></td>
</tr>
<tr>
<td><input type="button" name="dp" value="." onclick="calculator.display.value += '.'; navigator.vibrate(100)"></td>
<td><input type="button" name="del" value="del" onclick="calculator.display.value = (calculator.display.value).substring(0, (calculator.display.value).length-1); navigator.vibrate(100)"></td>
<td><input type="button" name="dz" value="00" onclick="calculator.display.value +='00'; navigator.vibrate(100)"/>
</td>
<td>
<input type="button" name="x²" value="x²" onclick="calculator.display.value = calculator.display.value*calculator.display.value;
navigator.vibrate(100)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="sin" value="sin" onclick="calculator.display.value= Math.sin(calculator.display.value);
navigator.vibrate(100)"/>
</td>
<td>
<input type="button" name="sqrt" value="sqrt" onclick="calculator.display.value= Math.sqrt(calculator.display.value);
navigator.vibrate(100)"/>
</td>
<td>
<input type="button" name="log" value="ln" onclick="calculator.display.value= Math.log(calculator.display.value); navigator.vibrate(100)"/>
</td>
<td>
<input type="button" name="tan" value="tan" onclick="calculator.display.value= Math.tan(calculator.display.value); navigator.vibrate(100)"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="" value="cos" onclick="calculator.display.value= Math.cos(calculator.display.value);navigator.vibrate(100)"/>
</td>
<td>
<input type="button" name="exp" value="exp" onclick="calculator.display.value= Math.exp(calculator.display.value); navigator.vibrate(100)"/>
</td>
<td><input type="button" name="(" value="(" onclick="calculator.display.value+='('; navigator.vibrate(100)"/>
</td>
<td>
<input type="button" name=")" value=")" onclick="calculator.display.value+=')'; navigator.vibrate(100)"/>
</td>
</tr>
</center>
</table>
<style>
/*created by chigozie anyaeji*/
body {
background-color:rgba(0, 4, 0, 12);
-webkit-user-select:none;
}
#display{
width: 260px;
font-size: 26px;
text-align: right;
background-color: white;
float: left;
height:50px;
border-radius:4px;
margin:5px;
border:0;
user-select:none;
}
input[type="button"]{
outline: 0;
position: relative;
left: 5px;
top: 5px;
border: 0;
color: #495069;
background-color: #fff;
border-radius: 3px;
width: 50px;
height: 40px;
float: left;
margin: 2px;
font-size: 20px;
box-shadow: 0 4px rgba(0,0,0,0.2);
margin-bottom: 5px;
}
input[type="button"]:hover{
border: 0 solid #000;
color: #495069;
background-color: #fff;
border-radius: 4px;
width: 50px;
height: 40px;
float: left;
margin: 2px;
font-size: 20px;
backdrop-filter:blur(5px);
box-shadow:0 2px #cee9ea;
background-color:rgba(0, 0, 0, .2);
}
#display:active {
top: 5px;
width: 270px;
font-size: 26px;
text-align: right;
background-color: #bcbd95;
box-shadow: 0 4px rgba(0, 7, 0, 0.2);
}
table{
margin: auto;
background-color: #222;
width: 295px;
max-width: 295px;
height: 325px;
text-align: center;
border-radius: 4px;
padding-right: 10px;
}
#operator{
background-color: #cee9ea;
}
#clear{
background-color:red;
}
</style>
OUTPUT
Thanks for viewing. If you dont understand any of the above then comment. You can also send your questions, codes and teachings though the floating chat button or through comment and get them published.
Wow this is wonderful thanks bro
ReplyDeleteThanks��
Delete