JavaScript Procedural ATM part 2 - solution code

js-stm-lab-2-solution.html

<h1>ATM</h1>
<form id="atm" action="#" method="post">
  <select name="choice" id="choice">
		<option selected>-- select choice --</option>
		<option value="deposit">deposit</option>
		<option value="withdrawal">withdrawal</option>
	</select>
	<input type="text" id="amount" name="amount" placeholder="amount">
	<input id="submit" type="submit" value="submit">
</form>
<p id="balance">balance: $0.0</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
	$(function() {

		var balance 			= 	0.0,
				amountInput 	= 	$('#amount'),
				balanceArea 	= 	$('#balance'),
				choiceSelect  = 	$('#choice'),
				submitBtn 		= 	$('#submit'),
				atmForm 			= 	$('#atm');

		function do_transaction(action) {

			var amount = parseFloat(amountInput.val());

			if (isNaN(amount) || amount === '') {
				balanceArea.text('Fool don\'t be playin!');
			} else {
				if(action === 'deposit') {
					balance += amount;
				} else if (action === 'withdrawal') {
					balance -= amount;
				}
				balanceArea.text('balance: $'+balance);
			}
		}

		atmForm.submit(function() {

			var choice = choiceSelect.val();

			if (choice === 'deposit') {
				do_transaction(choice);
			} else if (choice === 'withdrawal') {
				do_transaction(choice);
			}
			return false;
		});

		////////// Select Menu Aesthetics //////////

		amountInput.hide();
		submitBtn.hide();

		choiceSelect.change(function() {

			var choice = choiceSelect.val();

			if (choice === 'deposit' || choice === 'withdrawal') {
				amountInput.show().val('');
				submitBtn.show();
			} else {
				amountInput.hide().val('');
				submitBtn.hide();
			}
		});
	});
</script>