Sunday, 12 July 2020

Simple Calculator in HTML

  • Start notepad.exe
  • Type:
<!doctype HTML>
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function showTheAdd(){
 var abc = document.getElementById('n1').value;
 var def = document.getElementById('n2').value;
 document.getElementById('data').innerHTML=parseInt(abc)+ parseInt(def);
}
function showTheSubs(){
 var abc = document.getElementById('n1').value;
 var def = document.getElementById('n2').value;
 document.getElementById('data').innerHTML=parseInt(abc)- parseInt(def);
}
function showTheMult(){
 var abc = document.getElementById('n1').value;
 var def = document.getElementById('n2').value;
 document.getElementById('data').innerHTML=parseInt(abc)* parseInt(def);
}
function showTheDiv(){
 var abc = document.getElementById('n1').value;
 var def = document.getElementById('n2').value;
 document.getElementById('data').innerHTML=parseInt(abc)/ parseInt(def);
}
</script>
</head>
<body bgcolor="red" topmargin="200">
<form id="frm" autocomplete="off">
<table align="center" border="1">
<tr><td colspan="4">First Number&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="number" id="n1" /></td></tr>
<tr><td colspan="4">Second Number&nbsp;&nbsp;&nbsp;<input type="number" id="n2" /></td></tr>
<tr>
    <td align="center"><button type="button" onClick="javascript:return showTheAdd();">Add</button></td>
    <td align="center"><button type="button" onClick="javascript:return showTheSubs();">Substract</button></td>
    <td align="center"><button type="button" onClick="javascript:return showTheMult();">Multiply</button></td>
    <td align="center"><button type="button" onClick="javascript:return showTheDiv();">Divide</button></td>
</tr>
<tr><td align="center" colspan="4"><button type="reset">Reset</button></td></tr>
<tr><td colspan="4" align="center"><label id="data"></label></td></tr>
</table>
</form>
</body>
</html>
  • Save this file as calc.cmd
  • This can be used as a simple calculator to add, substract, multiply and divide.

No comments:

Post a Comment

Algorithmic Pixel Art: The Beauty of Aliasing

Discussed  here More images in  Google drive Some outputs: Forward to anyone who says aliasing is ugly.