Created
November 13, 2013 14:07
-
-
Save danhyun/7449682 to your computer and use it in GitHub Desktop.
MTA Fare Calculator as of 2013 March Fare Hike
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Number of Trips</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(numberOfTrips, existing) { | |
| return (numberOfTrips * baseFare - (existing || 0)) / (1 + bonus); | |
| }; | |
| $('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 i = 1; | |
| for (;i<30;i++) { | |
| var amount = cash(i, existingBalance); | |
| if (isNewCard) { | |
| amount += 1; | |
| } | |
| amount = amount.toFixed(2); | |
| if (amount > 0) { | |
| if ((amount * 100) % (machineIncrements * 100) == 0) { | |
| tbody.append('<tr><td>$' + amount + '</td><td>' + i + '</td></tr>'); | |
| } | |
| } | |
| } | |
| }); | |
| $('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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment