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>&nbsp;&nbsp;&nbsp;
<button type = "button" id ="sub">Subtract</button>&nbsp;&nbsp;&nbsp;
<button type = "button" id ="mul">Multiply</button>&nbsp;&nbsp;&nbsp;
<button type = "button" id ="divsion">Division</button>&nbsp;&nbsp;&nbsp;
<button type = "button" id ="reset">Reset</button>
</div>
</body>
</html>

Comments

  1. 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.
    calculator

    ReplyDelete

Post a Comment

Popular posts from this blog

how to customize dashboard in active admin gem in rails 4

fibonacci series in Ruby