rpn_calculator.md

JavaScript

var display      = document.getElementById("inner-display");
var inputBtns    = document.getElementsByClassName("input-btn");
var clearBtn     = document.getElementById("clear");
var equalsBtn    = document.getElementById("equals");
var spaceBtn     = document.getElementById("space");
var binaryBtn    = document.getElementById("binary");
var hexBtn       = document.getElementById("hex");
var theStack     = [];
var inputElement = "";

function updateTheStack () {
	theStack.push(inputElement);
	inputElement = "";
}

function isElementOperand (string) {
	if(string == "x" || string == "+" || string == "-" || string == "/"){
		return true;
	}else{
		return false;
	}
}

function toBinary (string) {
	return parseInt(display.innerText).toString(2);
}

function toHex (string) {
	return parseInt(display.innerText).toString(16);
}

function binaryClicked (event) {
	display.innerHTML = toBinary(display.innerHTML);
}

function hexClicked (event) {
	display.innerHTML = toHex(display.innerHTML);
}

function inputClicked(event){
	display.innerHTML += this.innerHTML;
	inputElement += this.innerHTML;
}

function equalsClicked(event){
	updateTheStack();
	display.className = "fadeout";
	setTimeout(function(){
		display.className = "fadein";
		theStack = calculateTheStack(theStack);
		display.innerHTML = theStack[0];
	},500);
}

function clearClicked(event){
	display.className = "fadeout";
	setTimeout(function(){
		display.innerHTML = "&nbsp;";
		display.className = "";
	},500);
	theStack = [];
	inputElement = "";
}

function spaceClicked (event) {
	display.innerHTML += " ";
	updateTheStack();
}

function calculateTheStack(stack){
	//takes an array as a stack in reverse polish notation
	//go through the stack, when an operand is encountered, replace the operand
	//and the two numbers before it with the result of the calculation until
	//no more operands are found
	//return the shortened array
	for (var i = 0; i < stack.length; i++) {
		if ( isElementOperand(stack[i]) ) {
			stack.splice(i-2, 3, evaluateOneExpression(stack[i-2],stack[i-1],stack[i]) );
		    calculateTheStack(stack);
		}
	}
	return stack;
}

function evaluateOneExpression(firstNum, secondNum, operand){
	var firstNum = parseInt(firstNum);
	var secondNum = parseInt(secondNum);

	switch(operand){
		case "+":
			return firstNum+secondNum;
		case "-":
			return firstNum-secondNum;
		case "x":
			return firstNum*secondNum;
		case "/":
			return firstNum/secondNum;
	}
}

for (var i = 0; i < inputBtns.length; i++) {
	inputBtns[i].addEventListener('click',inputClicked);
}
clearBtn.addEventListener('click',clearClicked);
equalsBtn.addEventListener('click',equalsClicked);
spaceBtn.addEventListener('click',spaceClicked);
binaryBtn.addEventListener('click',binaryClicked);
hexBtn.addEventListener('click',hexClicked);

HTML

<html>
<head>
	<title>My Javascript Calculator</title>
	<link rel="stylesheet" href="/css/bootstrap/bootstrap.css">
	<link rel="stylesheet" href="/css/calculator.css">
	<link rel="stylesheet" href="/css/animations.css">
</head>
<body>
	<div class="container">
		<div class="row">
				<h1>My JS Calculator in Reverse Polish Notation</h1>
			<div class="col-md-5 col-md-offset-2 calculator">
				<div class="display row">
					<div class="col-md-12">
						<a href="" class="btn btn-lg btn-block display-element"><span id="inner-display">&nbsp;</span></a>
					</div>
				</div><!--/.display-->
				<div class="buttons row">
					<div class="col-md-3">
						<a class="btn btn-lg btn-block input-btn calc-btn" id="one">1</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="four">4</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="seven">7</a>
						<a class="btn btn-lg btn-block calc-btn" id="clear">C</a>
						<a class="btn btn-lg btn-block calc-btn" id="space">Space</a>
					</div>
					<div class="col-md-3">
						<a class="btn btn-lg btn-block input-btn calc-btn" id="two">2</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="five">5</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="eight">8</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="zero">0</a>
						<a class="btn btn-lg btn-block calc-btn" id="binary">Bin</a>
					</div>
					<div class="col-md-3">
						<a class="btn btn-lg btn-block input-btn calc-btn" id="three">3</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="six">6</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="nine">9</a>
						<a class="btn btn-lg btn-block calc-btn" id="equals">=</a>
						<a class="btn btn-lg btn-block calc-btn" id="hex">Hex</a>
					</div>
					<div class="col-md-3">
						<a class="btn btn-lg btn-block input-btn calc-btn" id="plus">+</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="minus">-</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="times">x</a>
						<a class="btn btn-lg btn-block input-btn calc-btn" id="divide">/</a>
						<!-- <a class="btn btn-lg btn-block input-btn calc-btn">.</a> -->
					</div>
				</div>

			</div><!--/.calculator-->
			<div class="col-md-12">
				<h3>Reverse Polish Notation too confusing?</h3>
				<h3>Go back to the original <a href="/calculator.html">calculator</a>.</h3>
			</div>
		</div><!--/.row-->
	</div><!--/.container-->
</body>
<script type="text/javascript" src ="/js/rpn_calculator.js" ></script>
</html>

zgulde/rpn_calculator.md