VB icon

Calculator

Email
Submitted on: 4/27/2018 9:13:52 PM
By: Prashant Sethi 
Level: Beginner
User Rating: Unrated
Compatibility: JavaScript
Views: 1476
 
     Its a basic calculator functionality built completely in Javascript. Many of the exceptions are not coded but this is a good start to improve further on the calculator functionality. Save the below code as index.html and open it on any browser window.

 
code:
Can't Copy and Paste this?
Click here for a copy-and-paste friendly version of this code!
				
'**************************************
' Name: Calculator
' Description:Its a basic calculator functionality built completely in Javascript. Many of the exceptions are not coded but this is a good start to improve further on the calculator functionality.
Save the below code as index.html and open it on any browser window.
' By: Prashant Sethi
'**************************************

<!doctype html>
<html>
	<head>
		<title>My JavaScript Calculator</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0">
	</head>
	<body>
<form>
<input type="button" id = "one" value="1" name="onebutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "two" value="2" name="twobutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "three" value="3" name="threebutton" onclick=funcDisplayVal(event) class="mybutton">
<br>
<input type="button" id = "four" value="4" name="fourbutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "five" value="5" name="fivebutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "six" value="6" name="sixbutton" onclick=funcDisplayVal(event) class="mybutton">
<br>
<input type="button" id = "seven" value="7" name="sevenbutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "eight" value="8" name="eightbutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "nine" value="9" name="ninebutton" onclick=funcDisplayVal(event) class="mybutton">
<br>
<input type="button" id = "zero" value="0" name="zerobutton" onclick=funcDisplayVal(event) class="mybutton">
<input type="button" id = "cancel" value="C" name="cancelbutton" onclick=funcCancelVal() class="mybutton">
<input type="button" id = "plus" value="+" name="plusbutton" onclick=funcPlusVal() class="mybutton">
<br>
<input type="button" id = "minus" value="-" name="minusbutton" onclick=funcMinusVal() class="mybutton">
<input type="button" id = "multiply" value="*" name="multiplybutton" onclick=funcMultiplyVal() class="mybutton">
<input type="button" id = "divide" value="/" name="dividebutton" onclick=funcDivideVal() class="mybutton">
<input type="button" id = "equal" value="=" name="equalbutton" onclick=funcDisplayResult() class="mybutton">
</form>
	<br>
	<input id = "calcresult" name="resultbox" class="result" type="text" disabled="true"></input>
	<br>
	<script type="text/javascript">
var firstValue = "fv";
	var secondValue = "sv";
	var seconditem = false;
	var operator = "";
	function funcDisplayVal(event){
		if(seconditem == false){
			document.getElementById("calcresult").value= document.getElementById("calcresult").value + event.target.value;
			firstValue = parseInt(document.getElementById("calcresult").value);
		}
		else{
			document.getElementById("calcresult").value= document.getElementById("calcresult").value + event.target.value;
			secondValue = parseInt(document.getElementById("calcresult").value);			
		}
	}
	function funcPlusVal(){
		if(firstValue != "fv"){
			document.getElementById("calcresult").value= "";
			seconditem = true;
			operator = "plus";
		}
		else {
			alert("Enter 1st Value to operate on.");
		}	
	}
	function funcMinusVal(){
		if(firstValue != "fv"){
			document.getElementById("calcresult").value= "";
			seconditem = true;
			operator = "minus";
		}
		else {
		alert("Enter 1st Value to operate on.");
		}	
	}
	function funcMultiplyVal(){
		if(firstValue != "fv"){
			document.getElementById("calcresult").value= "";
			seconditem = true;
			operator = "multiply";
		}
		else {
			alert("Enter 1st Value to operate on.");
		}	
	}
	function funcDivideVal(){
		if(firstValue != "fv"){
			document.getElementById("calcresult").value= "";
			seconditem = true;
			operator = "divide";
		}
		else {
			alert("Enter 1st Value to operate on.");
		}	
	}	
	
	function funcDisplayResult(){
		var finalval = 0;	
	if(secondValue != "sv"){
		switch(operator){
		case "plus":
			finalval = Number(firstValue) + Number(secondValue);
			document.getElementById("calcresult").value= finalval;
			seconditem = false;
			break;
		case "minus":
			finalval = Number(firstValue) - Number(secondValue);
			document.getElementById("calcresult").value= finalval;
			seconditem = false;
			break;
		case "multiply":
			finalval = Number(firstValue) * Number(secondValue);
			document.getElementById("calcresult").value= finalval;
			seconditem = false;
			break;
		case "divide":
			finalval = Number(firstValue) / Number(secondValue);
			document.getElementById("calcresult").value= finalval;
			seconditem = false;
			break;
		}
	}
	else{
		alert("Enter 2nd Value to operate on.");
	}
		seconditem = false;
 	firstValue = "fv";
		secondValue = "sv";
		operator = "";
	}
	function funcCancelVal(){
		firstValue = "fv";
		secondValue = "sv";
		seconditem = false;
		operator = "";
		document.getElementById("calcresult").value= "";
	}
	</script>
<style>
body{
font-family: Arial, Helvetica, sans-serif;
}
.mybutton{
width: 60px;
		height:60px;
color: blue; 
		font-size:20px; 
}
 
.result {
color: firebrick;
text-align: left;
width: 260px;
		height:60px;
		font-size: 20px;
}
</style>
	</body>
</html>


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.