calculater

object oriented js demo

by Nikita Jadhao

HTML

<div id="calculater">
      <form >
    	  <div id="inputCal">
    	  	<input type="text" id="displayInput" Size="16"></div>
      		<div id="row1">
      		<input type="button" value="1" onclick="calculate(this)">
            <input type="button" value="2" onclick="calculate(this)">
            <input type="button" value="3" onclick="calculate(this)">
            <input type="button" value=" + " onclick="calculate(this)">
      		</div>
      		<div id="row2">
			<input type="button" value="4" onclick="calculate(this)">
			<input type="button" value="5" onclick="calculate(this)">
			<input type="button" value="6" onclick="calculate(this)">
			<input type="button" value=" - " onclick="calculate(this)">
	  		</div>
	  		<div id="row3">
			<input type="button" value="7" onclick="calculate(this)">
			<input type="button" value="8" onclick="calculate(this)">
			<input type="button" value="9" onclick="calculate(this)">
			<input type="button" value=" x " onclick="calculate(this)">
	 		</div>
		  	<div id="row4">
			<input type="button" value="c" onclick="calculate(this)">
			<input type="button" value="0" onclick="calculate(this)">
			<input type="button" value=" = " onclick="calculate(this)">
			<input type="button" value=" / " onclick="calculate(this)">
			
		</div>
	</form>
	</div>

CSS

@CHARSET "ISO-8859-1";

#inputCal{
	width:250px;
	height:50px;
	background-color:#D63333;
	border-radius:10px;
}
#displayInput{
	width:220px;
	height:15px;
	border-radius:10px;
}

.marginCal{
	margin:10px auto auto 10px ;
	width:250px;
}
input{
	margin:10px auto auto 10px ;
	width:40px;
}

#calculater{
	background: -webkit-linear-gradient(top, #EEEeee 0%, #EEEeee 55%, #EEEeee 100%);
	margin:100px 40% 100px 40%;
	width:250px;
	border:5px inset #EEEeee;
	border-radius:13px;
	-moz-box-shadow: 30px 30px 50px black;
	-toolkit-box-shadow: 30px 30px 50px black;
}

JavaScript

function Calculator(){
	 this.operation = " " ;	
	 this.total  = 0;
}	

Calculator.reset = function(input){
	 inputEle = document.getElementById("displayInput");
	 inputEle.value = "0";
	 operation = " " ;
};
		
Calculator.operations = function(input){
	inputEle = document.getElementById("displayInput");
	
		operation = input.value;
		total = parseFloat(inputEle.value);
  	    inputEle.value ="";
	
};

Calculator.numbers = function(input){
	  inputEle = document.getElementById("displayInput");
	  inputEle.value =  inputEle.value + input.value ;
};


Calculator.equals = function(){
	inputEle = document.getElementById("displayInput");
	var curentValue = parseFloat(inputEle.value);
	var answer = 0;
if(operation == " + ") {
answer = total + curentValue;
}
else if(operation == " x ") {
answer = total * curentValue;
}
else if(operation == " - ") {
answer = total - curentValue;
}
else if(operation == " / ") {
answer = total / curentValue;
}
inputEle.value = answer;
};

function calculate(input){
		
	if(input.value == "c"){
		Calculator.reset(input);
	}
	else if(input.value == " = "){
		Calculator.equals();
	}
	else if( input.value == " x " || input.value == " + " || input.value == " - " || input.value == " / "){
		Calculator.operations(input);
	}
	else{	
		Calculator.numbers(input);
	}
}