Simple calculator using JQuery and HTML..
<html>
<head>
<title>Two textbox, when enter data in one textbox, it appears in second textbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Addition
$("#add").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a + +b);
});
//Subtraction
$("#sub").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a - +b);
});
//Multiplication
$("#mul").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a * +b);
});
//Division
$("#divsion").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a / +b);
});
// Reset Values
$("#reset").click(function(){
$("#cal1").val("");
$("#cal2").val("");
$("#result").val("");
});
});
</script>
<body>
<h2> Simple Calculator</h2>
<div>
Enter Number:<input type = "text" id = "cal1">
Enter Number:<input type = "text" id = "cal2">
Result:<input type = "text" id = "result"><br><br><br>
<button type = "button" id ="add">Add</button>
<button type = "button" id ="sub">Subtract</button>
<button type = "button" id ="mul">Multiply</button>
<button type = "button" id ="divsion">Division</button>
<button type = "button" id ="reset">Reset</button>
</div>
</body>
</html>
<head>
<title>Two textbox, when enter data in one textbox, it appears in second textbox</title>
<link rel="stylesheet" type="text/css" href="style.css">
/<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Addition
$("#add").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a + +b);
});
//Subtraction
$("#sub").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a - +b);
});
//Multiplication
$("#mul").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a * +b);
});
//Division
$("#divsion").click(function(){
var a = $("#cal1").val();
var b = $("#cal2").val();
$("#result").val(+a / +b);
});
// Reset Values
$("#reset").click(function(){
$("#cal1").val("");
$("#cal2").val("");
$("#result").val("");
});
});
</script>
<body>
<h2> Simple Calculator</h2>
<div>
Enter Number:<input type = "text" id = "cal1">
Enter Number:<input type = "text" id = "cal2">
Result:<input type = "text" id = "result"><br><br><br>
<button type = "button" id ="add">Add</button>
<button type = "button" id ="sub">Subtract</button>
<button type = "button" id ="mul">Multiply</button>
<button type = "button" id ="divsion">Division</button>
<button type = "button" id ="reset">Reset</button>
</div>
</body>
</html>
Its a great pleasure reading your post.Its full of information I am looking for and I love to post a comment that "The content of your post is awesome" Great work.
ReplyDeletecalculator