Hi Friends...
In this article we learn how to make a calculator using html and java script
Your design will look like this
In this calculator user will choose operation which he or she wants to perform then click choose then he or she will have to fill two numbers for operation then click submit for result.
Step 1: Html Code
<html>
<head>
</head>
<script type="text/javascript">
function deepak() {
if (document.getElementById('a').checked == true) {
document.getElementById('bb').value = 'Add';
}
else if (document.getElementById('b').checked == true) {
document.getElementById('bb').value = 'Sub';
}
else if (document.getElementById('c').checked == true) {
document.getElementById('bb').value = 'Mul';
}
else if (document.getElementById('d').checked == true) {
document.getElementById('bb').value = 'Div';
}
else {
alert("select any option");
}
}
function amit() {
if (document.getElementById('i1').value == "" || document.getElementById('i2').value == "") {
alert("enter the value");
}
else {
var aaa = document.getElementById('bb').value;
if (aaa == "") {
document.getElementById('cc').value == "enter two number";
}
else {
if (aaa == "Add") {
var abc1 = document.getElementById('i1').value;
var abc2 = document.getElementById('i2').value;
var result = Number(abc1) + Number(abc2);
document.getElementById('cc').value = result;
}
else if (aaa == "Sub") {
var abc1 = document.getElementById('i1').value;
var abc2 = document.getElementById('i2').value;
var result = Number(abc1) - Number(abc2);
document.getElementById('cc').value = result;
}
else if (aaa == "Mul") {
var abc1 = document.getElementById('i1').value;
var abc2 = document.getElementById('i2').value;
var result = Number(abc1) * Number(abc2);
document.getElementById('cc').value = result;
}
else if (aaa == "Div") {
var abc1 = document.getElementById('i1').value;
var abc2 = document.getElementById('i2').value;
var result = Number(abc1) / Number(abc2);
document.getElementById('cc').value = result;
}
}
}
}
</script>
<body>
<div style="margin-left:550px; margin-top:50px;padding:10px; border:2px groove #ff6a00; width:180px;">
<table>
<tr>
<td>Choose an option
</td>
</tr>
<tr>
<td>
<input type="text" disabled id="bb">
</td>
</tr>
<tr>
<td>
<input type="radio" name="a" id="a">Add<br>
<input type="radio" name="a" id="b">Sub<br>
<input type="radio" name="a" id="c">Mul<br>
<input type="radio" name="a" id="d">Div<br>
</td>
</tr>
<tr>
<td>
<input type="button" value="choose" onclick="deepak()"><br>
</td>
</tr>
<tr>
<td><input type="text" id="i1" placeholder="Enter number first"><br>
<input type="text" id="i2" placeholder="Enter number second"><br>
<input type="text" disabled id="cc" placeholder="Result"><br>
</td>
</tr>
<tr>
<td>
<input type="button" value="submit" onclick="amit()"><br>
</td>
</tr>
</table>
</div>
</body>
</html>
Your design will look like this
Demo :
0 comments:
Post a Comment