For creating a basic calculator in JavaScript, we use table structure, input type button, and JavaScript functions.
- Input type button use is to take input from the user.
- The table structure use is to create calculator structure.
- Functions to evaluate the data.
Three simple functions to process all data
Script
1. element()
Which is used to read values from each button
function element(val){
document.getElementById('result').value+=val;
}
2. solve()
This function performs all arithmetic operations like(+,-,/,*)
function solve(){
var value1= document.getElementById('result').value;
let res = eval(value1);
document.getElementById('result').value=res;
}
3. clearElement()
Which is used to clear input value in the calculator
function element(val){
document.getElementById('result').value+=val;
}
HTML
<body>
<div id='wrap'>
<table border="1">
<tr>
<td colspan="3"><input type="text" id="result" readonly></td>
<td><input type="button" value="C" onClick="clearElement()"></td>
</tr>
<tr>
<td><input type="button" value="1" onClick="element('1')"></td>
<td><input type="button" value="2" onClick="element('2')"></td>
<td><input type="button" value="3" onClick="element('3')"></td>
<td><input type="button" value="+" onClick="element('+')"></td>
</tr>
<tr>
<td><input type="button" value="4" onClick="element('4')"></td>
<td><input type="button" value="5" onClick="element('5')"></td>
<td><input type="button" value="6" onClick="element('6')"></td>
<td><input type="button" value="-" onClick="element('-')"></td>
</tr>
<tr>
<td><input type="button" value="7" onClick="element('7')"></td>
<td><input type="button" value="8" onClick="element('8')"></td>
<td><input type="button" value="9" onClick="element('9')"></td>
<td><input type="button" value="/" onClick="element('/')"></td>
</tr>
<tr>
<td><input type="button" value="*" onClick="element('*')"></td>
<td><input type="button" value="0" onClick="element('0')"></td>
<td><input type="button" value="." onClick="element('.')"></td>
<td><input type="button" value="=" onClick="solve()"></td>
</tr>
</table>
</div>
</body>
CSS
<style type="text/css">
body,html{
matgin:0px;
}
input[type="button"]{
border:none;
width:100%;
outline: none;
}
#wrap
{
margin:10%;
}
</style>
Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read? christmas gift ideas singapore
ReplyDeleteGreat blog here! Also your website loads up very fast! What host are you using? Can I get your affiliate link to your host? I wish my website loaded up as fast as yours lol. content marketing singapore
ReplyDeleteExcellent post but I was wanting to know if you could write a litte more on this subject? I'd be very grateful if you could elaborate a little bit further. Bless you! workspace rental singapore
ReplyDeleteHeya are using Wordpress for your blog platform? I'm new to the blog world but I'm trying to get started and set up my own. Do you need any html coding expertise to make your own blog? Any help would be really appreciated! setting up a trust in singapore
ReplyDelete