Last active
August 29, 2015 14:17
-
-
Save martypdx/9b389e1c1999ae8afb2b to your computer and use it in GitHub Desktop.
Codefellows Donut Shop reference implementation
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> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="main.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Super! Donut Shops</h1> | |
| </header> | |
| <main> | |
| <section> | |
| <table id='shops'> | |
| <tr> | |
| <th>location | |
| <th>hours | |
| <th>per day | |
| </table> | |
| </section> | |
| <section id='detail' style='display: none;'> | |
| <header> | |
| <h2 class='header'></h2> | |
| </header> | |
| <table class='hours-detail'> | |
| <tr> | |
| <th>start | |
| <th>end | |
| <th>customers | |
| <th>to bake | |
| </table> | |
| </section> | |
| </main> | |
| <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> | |
| <script src='donut-shops.js'></script> | |
| <script src='main.js'></script> | |
| </body> | |
| </html> |
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
| function getShops(){ | |
| function Hour(time, customers, perCustomer){ | |
| this.time = time; | |
| this.customers = customers; | |
| this.toBake = Math.ceil(customers * perCustomer); | |
| } | |
| function Shop(location, open, close, min, max, perCustomer){ | |
| this.location = location; | |
| this.open = open; | |
| this.close = close; | |
| this.hours = []; | |
| this.perDay = 0; | |
| var range = close - open, random, hour; | |
| for(var h = 0; h < range; h++){ | |
| random = getRandomInt(min, max); | |
| hour = new Hour(open + h, random, perCustomer); | |
| this.hours.push(hour); | |
| this.perDay += hour.toBake; | |
| } | |
| } | |
| function getRandomInt(min, max) { | |
| return Math.floor(Math.random() * (max - min)) + min; | |
| } | |
| return [ | |
| new Shop('Downtown', 7, 18, 8, 43, 4.50), | |
| new Shop('Capitol Hill', 7, 18, 4, 37, 2.00), | |
| new Shop('South Lake Union', 7, 18, 9, 23, 6.33), | |
| new Shop('Wedgewood', 7, 18, 2, 28, 1.25), | |
| new Shop('Ballard', 7, 18, 8, 58, 3.75) | |
| ]; | |
| } |
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
| body { | |
| font-family: sans-serif; | |
| font-size: 10pt; | |
| color: rgb( 20, 20, 20 ); | |
| } | |
| table { | |
| border: 1px solid lightblue; | |
| padding: 10px; | |
| border-collapse: collapse; | |
| } | |
| tr { | |
| height: 40px; | |
| } | |
| th, td { | |
| padding: 10px; | |
| } | |
| tr:nth-child(even) { | |
| background-color: lightsteelblue; | |
| } | |
| #shops tr:not(:nth-child(1)):hover { | |
| background-color: steelblue; | |
| color: white; | |
| cursor: pointer; | |
| } | |
| #shops { | |
| width: 400px; | |
| } | |
| #shops th:nth-child(2), #shops td:nth-child(2) { | |
| text-align: center; | |
| } | |
| #shops th:nth-child(3), #shops td:nth-child(3) { | |
| text-align: right; | |
| } | |
| .hours-detail { | |
| width: 400px; | |
| } | |
| .hours-detail th, .hours-detail td { | |
| text-align: right; | |
| } |
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
| (function init(){ | |
| var $shops = $('#shops'), | |
| shops = getShops(); | |
| shops.forEach(function(shop){ | |
| var $row = $('<tr>').data('shop', shop); | |
| function addCell(text){ | |
| $row.append($('<td>').text(text)); | |
| } | |
| addCell(shop.location); | |
| var open = formatTime(shop.open); | |
| var close = formatTime(shop.close); | |
| addCell(open + ' - ' + close); | |
| addCell(shop.perDay); | |
| $shops.append($row); | |
| $row.click(function(){ | |
| var shop = $(this).data('shop'); | |
| showDetail(shop); | |
| }) | |
| }); | |
| function formatTime(time){ | |
| var hour = time % 12 || '12', | |
| meridian = time < 12 ? 'am' : 'pm'; | |
| return hour + ':00 ' + meridian; | |
| } | |
| var $detail = $('#detail'), | |
| $header = $detail.find('.header'), | |
| $table = $detail.find('.hours-detail'); | |
| function showDetail(shop){ | |
| $detail.hide(); | |
| $header.text(shop.location); | |
| $table.find('tr').not(':first-child').remove(); | |
| shop.hours.forEach(function(hour){ | |
| var $row = $('<tr>'); | |
| function addCell(text){ | |
| $row.append($('<td>').text(text)); | |
| } | |
| addCell(formatTime(hour.time)); | |
| addCell(formatTime(hour.time + 1)); | |
| addCell(hour.customers); | |
| addCell(hour.toBake); | |
| $table.append($row); | |
| }); | |
| $detail.fadeIn(); | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment