Showing posts with label javascript calculator. Show all posts
Showing posts with label javascript calculator. Show all posts

Thursday, March 31, 2016

Math Calculator in JavaScript

A simple math calculator that I wrote using JavaScript as my programming language what the program does is that it will ask the user to give two integer number and then our program will find the sum, difference, product and quotient of the two number given by the user.

If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

Add me at Facebook my address is jakerpomperada@gmail.com and jakerpomperada@yahoo.com

My mobile number here in the Philippines is 09173084360.



Sample Program Output


Program Listing

<html>
<style>
body {
  background-color:lightgreen;
  font-family:arial;
  font-size:20px;
  font-weight:bold;
  color:blue;
}
p {
  font-family:arial;
  font-size:20px;
  font-weight:bold;
  color: blue;
  }
  
div.text { 
  margin: 0; 
  padding: 0; 
  padding-bottom: 1.25em; 

div.text label { 
  margin: 0; 
  padding: 0; 
  display: block; 
  font-size: 100%; 
  padding-top: .1em; 
  padding-right: 2em; 
  width: 8em; 
  text-align: right; 
  float: left; 

div.text input, 
div.text textarea { 
  margin: 0; 
  padding: 0; 
  display: block; 
  font-size: 100%; 

input:active, 
input:focus, 
input:hover, 
textarea:active, 
textarea:focus, 
textarea:hover { 
  background-color: lightyellow; 
  border-color: yellow; 

</style>  
<body><br>
<h2 align="left"> Simple Math Calculator </h2>
<br>
<div class="text"> 
    <label for="val1">Item Value No. 1</label> 
    <input type="text" size="5" name="val1" id="val1" maxlength="5"/> 
</div> 

<div class="text"> 
    <label for="val2">Item Value No. 2</label> 
    <input type="text" size="5" name="val2" id="val2" maxlength="5"/> 
</div> 
<button onclick="compute()" title="Click here to find the result."> Ok </button> &nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="clear_all()" title="Click here to clear the text fields."> Clear </button>
<br><br><br>
<p id="display1"> </p>
<p id="display2"> </p>
<p id="display3"> </p>
<p id="display4"> </p>

<script>
function compute()
{

var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;

var sum = parseInt(val1) + parseInt(val2);
var subtract = parseInt(val1) - parseInt(val2);
var product = parseInt(val1) * parseInt(val2);
var quotient = parseInt(val1) / parseInt(val2);


 document.getElementById("display1").innerHTML = "The sum of " + val1 + " and " + val2 + " is " + sum + ".";
 document.getElementById("display2").innerHTML = "The difference between " + val1 + " and " + val2 + " is " + subtract + ".";
 document.getElementById("display3").innerHTML = "The product between " + val1 + " and " + val2 + " is " + product + ".";
 document.getElementById("display4").innerHTML = "The quotient between " + val1 + " and " + val2 + " is " + quotient + ".";

}

function clear_all()
{
document.getElementById("display1").innerHTML ="";
document.getElementById("display2").innerHTML ="";
document.getElementById("display3").innerHTML ="";
document.getElementById("display4").innerHTML =""; 
document.getElementById("val1").value="";
document.getElementById("val2").value="";
document.getElementById("val1").focus();
}
</script>
</body>
<html>