VB icon

Math Calculator Using Check Box in JavaScript

Email
Submitted on: 11/18/2015 12:32:29 PM
By: Jake R. Pomperada  
Level: Beginner
User Rating: Unrated
Compatibility: JavaScript
Views: 2345
author picture
 
     A program that I wrote the uses check box to select the math operator in JavaScript that will will perform basic arithmetic operations. I include some error detection in checking for the values in our program. If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. My mobile number here in the Philippines is 09173084360.

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
'**************************************
' Name: Math Calculator Using Check Box in JavaScript
' Description:A program that I wrote the uses check box to select the math operator in JavaScript that will will perform basic arithmetic operations. I include some error detection in checking for the values in our program.
If you have some questions please send me an email at jake.r.pomperada@gmail.com and jakerpomperada@yahoo.com. 
My mobile number here in the Philippines is 09173084360.
' By: Jake R. Pomperada
'**************************************

<html>
	<head>
<title>Basic Calculator with Check Box</title>
		<style>
			body,h1 {
				font-family:arial;
				font-size:18px;
				}
			
			label{
				width: 7em;
				float: left;
				text-align: right;
				margin-right: 0.8em;
				display: block
				}
 
			h1 {
				font-family:arial;
				padding-left: 37px;
			}
		.message {
				color: blue;
				font-family:arial;
				font-size:18px;
				font-weight:bolder;
				padding-left: 38px;
}
			.warning {
				color: red;
				font-family:arial;
				font-size:18px;
			font-weight:bolder;
				padding-left: 38px;
	}
				
			 .move {
			font-style:italic;
				padding-left: 32px;
	}	
			 
	 </style>	
	 <script>
function solve() {
 var math_opt = document.getElementsByName("math");
				 var no_one = document.getElementById("no1").value;
				var no_two = document.getElementById("no2").value;
				 
				if (no_one=="") {
				
				var msg = "<span class='warning'>Give the first value.</span>";
document.getElementById('msg').innerHTML = msg;
					return false;
				} 
			 else if (no_two=="") {
				 var msg = "<span class='warning'>Give the second value.</span>";
document.getElementById('msg').innerHTML = msg;
					return false;
				}
				 
if (math_opt[0].checked == true) {
				 
				sum = parseInt(no_one) + parseInt(no_two);
							
results = "<span class='message'> The sum of " + no_one 
					+ " and " + no_two + " is " + sum +".</span>";
					document.getElementById('msg').innerHTML = results;
					return false;
} else if (math_opt[1].checked == true) {
 diff = parseInt(no_one) - parseInt(no_two);
					
results = "<span class='message'> The difference between " 
					+ no_one + " and " + no_two + " is " + diff +".</span>";
				document.getElementById('msg').innerHTML = results;
					return false;
} else if (math_opt[2].checked == true) {
 product = parseInt(no_one) *parseInt(no_two);
					
results = "<span class='message'>The product between " 
					+ no_one + " and " + no_two + " is " + product +".</span>";
				document.getElementById('msg').innerHTML = results;
					return false;
} else if (math_opt[3].checked == true) {
 quotient = parseInt(no_one) / parseInt(no_two);
					
results = "<span class='message'>The quotient between " 
				+ no_one + " and " + no_two + " is " + quotient +". </span>";
				document.getElementById('msg').innerHTML = results;
					return false;
} 
								
				else {
var msg = "<span class='warning'>You must select your math operator.</span>";
document.getElementById('msg').innerHTML = msg;
return false;
}
				
				return true;
}
function reset_msg() {
document.getElementById('msg').innerHTML = '';
	 }
			 
			 function clear()
			 {
			document.getElementById('msg').innerHTML = "";
			no_one="";
			no_two="";
			no_one.focus();
			 }
</script>
</head>
<body>
	<br>
	<h1> Basic Calculator Using Check Box </h1>
		<br>
<form action="" method="POST">
		 <label for="first_value">
		 First Value
		 
		 </label>
		 <input type="text" name="no_one" id="no1" size="5" autofocus>
		 <br><br>
		 <label for="second_value">
		Second Value
		</label>
		<input type="text" name="no_2" id="no2" size="5">
	 <br><br>
<label class="move">Math Operators</label><br>
			<br> <label for="radio1">
			      
<input type="checkbox" name="math" onclick="reset_msg();" />Addition
      
			</label>
<input type="checkbox" name="math" onclick="reset_msg();" />Subtraction
	      
<input type="checkbox" name="math" onclick="reset_msg();" />Multiplication
      
 <input type="checkbox" name="math" onclick="reset_msg();" />Division
      
			 <br><br>
			           
			<input type="submit" value="Compute" onclick="return solve();" />
		        
			<input type="submit" value="Clear" onclick="return clear();" />
			<br><br>
<div id="msg"></div>
 </form>
</body>
</html>


Other 108 submission(s) by this author

 


Report Bad Submission
Use this form to tell us if this entry should be deleted (i.e contains no code, is a virus, etc.).
This submission should be removed because:

Your Vote

What do you think of this code (in the Beginner category)?
(The code with your highest vote will win this month's coding contest!)
Excellent  Good  Average  Below Average  Poor (See voting log ...)
 

Other User Comments


 There are no comments on this submission.
 

Add Your Feedback
Your feedback will be posted below and an email sent to the author. Please remember that the author was kind enough to share this with you, so any criticisms must be stated politely, or they will be deleted. (For feedback not related to this particular code, please click here instead.)
 

To post feedback, first please login.