Showing posts with label Addition and Product of Numbers in JQuery. Show all posts
Showing posts with label Addition and Product of Numbers in JQuery. Show all posts

Monday, April 29, 2019

Addition and Product of Numbers in JQuery

A simple program that I wrote using JQuery to ask the user two number and then the program will compute the sum and product of the two numbers and display the result on the screen.

I am currently accepting programming work, IT projects, school and application development, programming projects, thesis and capstone projects, IT consulting work, computer tutorials, and web development work kindly contact me in the following email address for further details.  If you want to advertise on my website kindly contact me also in my email address also. Thank you.
My email address is the following jakerpomperada@gmail.com, jakerpomperada@aol.com, and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.

My telephone number at home here in Bacolod City, Negros Occidental Philippines is  +63 (034) 4335675.

Here in Bacolod I also accepting computer repair, networking and Arduino Project development at a very affordable price.

My personal website is http://www.jakerpomperada.com



Sample Program Output


Program Listing

sum_product.html

<html>
<head>
<title>Addition and Product of Numbers</title>
<script src="jquery-3.4.0.min.js"></script>
<style>
body {
 background-color:white;
 font-family: arial;
 font-size:15px;
 font-weight:bold;
 }

 .input_bold {
    font-weight: bold;
 font-size:15px;
 color:blue;
}

.input_bold2 {
    font-weight: bold;
 font-size:15px;
 color:black;
 }

.left {
    width: 15%;
    float: left;
    text-align: right;
}
.right {
    width: 50%;
    margin-left: 10px;
    float:left;
}

.header {
    width: 30%;
    float: left;
    text-align: right;
}

h4 {
text-align: center;
}
</style> 
<script>
    /* solve button */
$(document).ready(function() {
    //this calculates values automatically 
    sum();
    $("#solve").click(function() {
        sum();
    });

/* clear button */
    $("#clear").click(function(){
    $("#num1").val('');
    $("#num2").val('');
    $("#sum").val('');
    $("#subt").val('');
    $("#num1").focus();
   });

});

function sum() {
            var num1 = document.getElementById('num1').value;
            var num2 = document.getElementById('num2').value;
var result = parseInt(num1) + parseInt(num2);
var result1 = parseInt(num2) * parseInt(num1);
            if (!isNaN(result)) {
                document.getElementById('sum').value = result;
document.getElementById('subt').value = result1;
            }
        }
   
   </script>
</head>
<body>
<form>
<br><br>
<div class="header">
<h3>Addition and Product of Numbers</h3>
</div>
<br><br><br><br>
<div class="left">
Give a value No. 1
</div>
<div class="right">
 <input type="text" id="num1"  name="num1"  class="input_bold2 "size="10" autofocus/><br>
</div>
<br><br>
<div class="left">
Give a value No. 2
</div>
<div class="right">
 <input type="text" id="num2" name="num2"  class="input_bold2" size="10" /><br>
</div>
<br><br>
<div class="left">
 The total sum is
</div> 
<div class="right">
 <input type="text" id="sum" name="sum"  class="input_bold" size="10" readonly />
</div> 
<br><br>
<div class="left">
 The product is
</div>
<div class="right">
 <input type="text" id="subt" name="subt" class="input_bold" size="10" readonly/><br>
</div>
 <br><br><br>
 <div class="left">
<button type= "button" id ="solve">Solve</button>    
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="right">
<button type= "button" id ="clear">Clear </button> 
<br>
</div>
</form>
</body>
</html>