danhyun · November 23, 2013 21:45
diff --git a/index.html b/index.html
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8">
 	<title>MTA Fare Calculator</title>
 	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
 </head>
 <body>
 	<div class="container">
 		<div class="header">
 			<h3>MTA Fare Calculator</h3>
 		</div>
 		<form class="form-horizontal" role="form">
 			<div class="form-group">
 				<div class="col-sm-offset-2 col-sm-10">
 					<div class="radio">
 						<label><input type="radio" name="cardType" value="new" checked> New Card ($1.00 fee)</label>
 					</div>
 				</div>
 			</div>
 			
 			<div class="form-group">
 				<div class="col-sm-offset-2 col-sm-10">			
 					<div class="radio">
 						<label><input type="radio" name="cardType" value="existing"> Existing Card</label>
 					</div>
 				</div>
 			</div>
 			
 			<div class="form-group">
 				<label for="existingBalance" class="col-sm-2 control-label">Existing balance</label>
 				<div class="col-sm-10">
 					<input id="existingBalance" name="existingBalance" class="form-control" type="number" placeholder="Existing balance" disabled value="0" min=0 max=1000 step=0.01>
 				</div>
 			</div>
 			
 			<div class="form-group">
 				<div class="col-sm-offset-2 col-sm-10">
 					<button class="btn btn-primary" type="submit">Calculate</button>
 				</div>
 			</div>
 			
 		</form>

 		<div class="row">
 			<div class="col-sm-offset-2 col-sm-10">
 				<table class="table table-condensed table-hover">
 					<thead><tr><th>You should pay</th><th>With Bonus</th><th>For Balance</th><th>Number of rides</th></tr></thead>
 					<tbody></tbody>
 				</table>
 			</div>
 		</div>
 	</div>
 	
 	<script src="https://code.jquery.com/jquery.min.js"></script>
 	<script>
 		(function() {

 			var baseFare = 2.50;
 			var newCardFee = 1.00;
 			var minAmountForBonus=5;
 			var bonus=0.05;
 			var machineIncrements = 0.05;
 			
 			var cash = function(credit, existing) {
 				existing = isNaN(existing) ? 0 : parseFloat(existing);
 				var amountBonus = 0;
 				if (credit >= minAmountForBonus) {
 					amountBonus = parseFloat((credit * bonus).toFixed(2));
 				}
 				var newBalance = credit + amountBonus + existing;
 				return  {
 					whatToPay: credit,
 					bonus: amountBonus,
 					balance: newBalance
 				};
 			};
 			
 			$('body').on('submit', 'form', function(e) {
 				e.preventDefault();
 				
 				var form = $(this).serialize().split("&");
 				
 				var existingBalance = $('#existingBalance:not([disabled])').val() || 0;
 				
 				var isNewCard = $('input[name="cardType"]:checked').val() === 'new';
 				
 				var tbody = $('tbody').empty();

 				var amount = machineIncrements;
 				var i = 0;
 				while (amount < 120) {
 					var credit = parseFloat((i++ * machineIncrements).toFixed(2));
 					var card = cash(credit, existingBalance);
 					var amount = card.whatToPay;
 					if (isNewCard) {
 						amount += 1;
 					}
 					
 					if (amount > 0) {
 						var trips = parseFloat(card.balance.toFixed(2)) / baseFare;
 						if (trips > 0 && trips % 1 === 0) {
 							var contents = ['$' + amount.toFixed(2), '$' + card.bonus.toFixed(2), '$' + card.balance.toFixed(2), trips].join('</td><td>'); 
 							tbody.append(['<tr><td>', contents, '</td></tr>'].join(''));
 						}
 					}
 				}
 			});
 			
 			$('body').on('change', 'input[name="cardType"]', function() {
 				var existing = this.value ==='existing';
 				
 				if (existing && $(this).is(':checked')) {
 					$('#existingBalance').removeAttr('disabled').focus();
 				} else {
 					$('#existingBalance').attr('disabled', true);
 				}
 				
 			});
 			
 		})();
 	</script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>MTA Fare Calculator</title>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container">
	<div class="header">
	<h3>MTA Fare Calculator</h3>
	</div>
	<form class="form-horizontal" role="form">
	<div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
	<div class="radio">
	<label><input type="radio" name="cardType" value="new" checked> New Card ($1.00 fee)</label>
	</div>
	</div>
	</div>

	<div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
	<div class="radio">
	<label><input type="radio" name="cardType" value="existing"> Existing Card</label>
	</div>
	</div>
	</div>

	<div class="form-group">
	<label for="existingBalance" class="col-sm-2 control-label">Existing balance</label>
	<div class="col-sm-10">
	<input id="existingBalance" name="existingBalance" class="form-control" type="number" placeholder="Existing balance" disabled value="0" min=0 max=1000 step=0.01>
	</div>
	</div>

	<div class="form-group">
	<div class="col-sm-offset-2 col-sm-10">
	<button class="btn btn-primary" type="submit">Calculate</button>
	</div>
	</div>

	</form>

	<div class="row">
	<div class="col-sm-offset-2 col-sm-10">
	<table class="table table-condensed table-hover">
	<thead><tr><th>You should pay</th><th>With Bonus</th><th>For Balance</th><th>Number of rides</th></tr></thead>
	<tbody></tbody>
	</table>
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery.min.js"></script>
	<script>
	(function() {

	var baseFare = 2.50;
	var newCardFee = 1.00;
	var minAmountForBonus=5;
	var bonus=0.05;
	var machineIncrements = 0.05;

	var cash = function(credit, existing) {
	existing = isNaN(existing) ? 0 : parseFloat(existing);
	var amountBonus = 0;
	if (credit >= minAmountForBonus) {
	amountBonus = parseFloat((credit * bonus).toFixed(2));
	}
	var newBalance = credit + amountBonus + existing;
	return {
	whatToPay: credit,
	bonus: amountBonus,
	balance: newBalance
	};
	};

	$('body').on('submit', 'form', function(e) {
	e.preventDefault();

	var form = $(this).serialize().split("&");

	var existingBalance = $('#existingBalance:not([disabled])').val() \|\| 0;

	var isNewCard = $('input[name="cardType"]:checked').val() === 'new';

	var tbody = $('tbody').empty();

	var amount = machineIncrements;
	var i = 0;
	while (amount < 120) {
	var credit = parseFloat((i++ * machineIncrements).toFixed(2));
	var card = cash(credit, existingBalance);
	var amount = card.whatToPay;
	if (isNewCard) {
	amount += 1;
	}

	if (amount > 0) {
	var trips = parseFloat(card.balance.toFixed(2)) / baseFare;
	if (trips > 0 && trips % 1 === 0) {
	var contents = ['$' + amount.toFixed(2), '$' + card.bonus.toFixed(2), '$' + card.balance.toFixed(2), trips].join('</td><td>');
	tbody.append(['<tr><td>', contents, '</td></tr>'].join(''));
	}
	}
	}
	});

	$('body').on('change', 'input[name="cardType"]', function() {
	var existing = this.value ==='existing';

	if (existing && $(this).is(':checked')) {
	$('#existingBalance').removeAttr('disabled').focus();
	} else {
	$('#existingBalance').attr('disabled', true);
	}

	});

	})();
	</script>
	</body>
	</html>