Teaching some JS

calculator.js

<script type="text/javascript">
	/**
	 *	Variables we'll need. The mode (adding, subtracting, etc),
	 *	the two numbers, and a pointer to the number we're setting up
	 *	at any point in time.
	 */
	var mode = '';
	var number1;
	var number2;
	var currentNumber = number1;

	/**
	 *	Updates the number display. "event" is a touch - we grab the target (the button), then
	 *	grab its inner text. We add it to our display.
	 */
	function updateNumberDisplay(event) {
		var value = event.target.innerText;
		document.getElementById('value_area').innerHTML += value;
	}

	/**
	 *	Gets the equals button, and sets an event listener for when it's tapped
	 *	to compute the values we've got and then display it. The end then resets
	 *	the application to its original status so people can do a new equation.
	 */
	var equalsButton = document.getElementById('ID_OF_EQUALS_BTN');	
	equalsButton.addEventListener('click', function() {
		var newNumber = 0;
		
		if(mode == "add") {
			newNumber = number1 + number2;
		}
		
		if(mode == "subtract") {
			newNumber = number1 - number2;
		}
		
		if(mode == "multiply") {
			newNumber = number1 * number2;
		}
		
		if(mode == "divide") {
			newNumber = number1 / number2;
		}
		
		document.getElementById('value_area').innerHTML = parseInt(newNumber, 10);
		number1 = 0;
		mode = '';
		currentNumber = number1;
	}, false);
	
	/**
	 *	Grab the "add" button, and add an event listener for when it's tapped.
	 *	This event listener just swaps us to setting up the second number of the
	 *	equation, and sets the mode for down the road.
	 *
	 *	If the mode has already been set, we do nothing.
	 */
	var addBtn = document.getElementById('ID_OF_ADD_BTN');
	addBtn.addEventListener('click', function() {
		if(mode == '') return false;
		
		var numberSection = document.getElementById('NUMBER_DISPLAY_ID');
		number1 = parseFloat(numberSection.innerText)
		currentNumber = number2;		
		mode = "add";
	}, false);

	/**
	 *	Grab the "subtract" button, and add an event listener for when it's tapped.
	 *	This event listener just swaps us to setting up the second number of the
	 *	equation, and sets the mode for down the road.
	 *
	 *	If the mode has already been set, we do nothing.
	 */	
	var subtractBtn = document.getElementById('ID_OF_SUBTRACT_BTN');
	subtractBtn.addEventListener('click', function() {
		if(mode == '') return false;
		
		var numberSection = document.getElementById('NUMBER_DISPLAY_ID');
		number1 = parseFloat(numberSection.innerText)
		currentNumber = number2;		
		mode = "subtract";
	}, false);

	/**
	 *	Grab the "multiply" button, and add an event listener for when it's tapped.
	 *	This event listener just swaps us to setting up the second number of the
	 *	equation, and sets the mode for down the road.
	 *
	 *	If the mode has already been set, we do nothing.
	 */		
	var multiplyBtn = document.getElementById('ID_OF_MULTIPLY_BTN');
	multiplyBtn.addEventListener('click', function() {
		if(mode == '') return false;
		
		var numberSection = document.getElementById('NUMBER_DISPLAY_ID');
		number1 = parseFloat(numberSection.innerText)
		currentNumber = number2;		
		mode = "multiply";
	}, false);

	/**
	 *	Grab the "divide" button, and add an event listener for when it's tapped.
	 *	This event listener just swaps us to setting up the second number of the
	 *	equation, and sets the mode for down the road.
	 *
	 *	If the mode has already been set, we do nothing.
	 */			
	var divideBtn = document.getElementById('ID_OF_DIVIDE_BTN');
	divideBtn.addEventListener('click', function() {
		if(mode == '') return false;
		
		var numberSection = document.getElementById('NUMBER_DISPLAY_ID');
		number1 = parseFloat(numberSection.innerText)
		currentNumber = number2;		
		mode = "divide";
	}, false);

	/**
	 *	Grabs the buttons for numbers, and adds an event listener for when they're tapped
	 *	by looping over them. They're set to call a function called "updateNumberDisplay",
	 *	which we set up above.
	 */		
	var numberBtns = document.getElementsByClassName('CLASS_NAME_OF_NUMBER_BTNS');
	numberBtns.forEach(function(btn, i) {
		btn.addEventListener('click', updateNumberDisplay, false);
	});
</script>