HTML - Javascript calculator
by ne on 2021-09-29 under Javascript
If you are looking for a pure html-javascript calculator having same feel, as your palm (but just for a beginner level).
The below might work for you:
<html>
<head>
<title>Naveen Soni</title>
<script type="text/javascript">
var op='',first=0,second=0;
var bar,setClear=false;
function calculator(i){
var p=parseInt(i);
if(p>=0 && p<=9){if(setClear==true) bar.value=""; bar.value+=p; setClear=false;}
else{
first=parseInt(bar.value);
setClear=true;
op=i;
}
}
function showPad(){
bar=document.getElementById("bar");
var padList="";
for(i=0;i<10;i++){if(i%3==0) padList+="<br>"; padList+="<button id='"+i+"' onclick='calculator("+i+")'>"+i+"</button>";}
document.getElementById("theButtonPad").innerHTML=padList;
}
function calculate()
{
var result;
second=parseInt(bar.value);
switch(op)
{
case '+': result=first+second; break;
case '-': result=first-second; break;
case '*': result=first*second; break;
case '/': result=first/second; break;
default:
first>=second?result=first:result=second;
}
bar.value=result;
}
</script>
</head>
<body onload="showPad()">
<div style="margin-left:300px;text-align:center; background-color:lightyellow; width:300px;">
<input type="text" id="bar"><br>
<div id="theButtonPad">
</div>
<div id="operators">
<button onclick="calculator('+')">+</button>
<button onclick="calculator('-')">-</button>
<button onclick="calculator('*')">*</button>
<button onclick="calculator('/')">/</button>
<button onclick="calculate()">=</button>
<button onclick="document.getElementById('bar').value='';">C</button>
<div>
</div>
</body>
</html>