diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 0000000..d82d945 --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1 @@ +* @forbiddenvoid @richardkalehoff @asparr diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..e9d54b2 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,353 @@ +@charset "utf-8"; +/* CSS Document */ + +body,td,th,p{ + font-family: Arial, Helvetica, sans-serif; + font-size: 12pt; + color: #333; + line-height: 1.5em; +} +body { + background-color: #fdfdfd; + margin: 0; + position:relative; +} +ul, li { + font-family: Arial, Helvetica, sans-serif; + font-size: 12pt; + color: #333; +} +a { + color: orange; + text-decoration: none; +} +a:hover, a:focus { + color: #3397db; + text-decoration: underline; +} +a img{ + border: none 0px #fff; +} +h1, h2, h3, h4, h5, h6 { + + font-family: Arial, Helvetica, sans-serif; + margin: 0px; +} +hr { + width:80%; +} +/*article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block; +}*/ +#maincontent { + /*background-color: #f3f3f3;*/ + min-height: 100%; +} +#footer { + max-width: 100%; + background-color: #252831; + color: #aaa; + font-size: 10pt; + letter-spacing: 1px; + padding: 25px; + text-align: center; + text-transform: uppercase; +} +/* ====================== Navigation ====================== */ +nav { + line-height: 2em; + background-color: #252831; + text-align:center; + /*max-width:900px;*/ +} +nav h1 { + margin: auto; + padding: 15px; + /*max-width:900px;*/ +} +nav h1 a { + color: #fff; + font-size: 14pt; + font-weight: 200; + letter-spacing: 10px; + text-transform: uppercase; +} +#breadcrumb { + padding: 10px 40px 16px; + list-style: none; + background-color: #eee; + font-size: 14px; + margin: 0; + /*max-width: 900px*/ +} + +/* Display list items side by side */ +#breadcrumb li { + display: inline; +} + +/* Add a slash symbol (/) before/behind each list item */ +#breadcrumb li+li:before { + padding: 8px; + color: black; + content: "/\00a0"; +} + +/* Add a color to all links inside the list */ +#breadcrumb li a { + color: #0275d8; + text-decoration: none; +} + +/* Add a color on mouse-over */ +#breadcrumb li a:hover { + color: #01447e; + text-decoration: underline; +} +/* ====================== Map ====================== */ +#map { + height: 400px; + width: 100%; + background-color: #ccc; +} +/* ====================== Restaurant Filtering ====================== */ +.filter-options { + width: 100%; + /*height: 50px;*/ + background-color: #252831; + align-items: center; +} +.filter-options h2 { + color: white; + /*font-size: 1rem;*/ + font-weight: normal; + line-height: 1.5em; + margin: 0 20px; +} +.filter-options select { + background-color: white; + border: 1px solid #fff; + font-family: Arial,sans-serif; + font-size: 12pt; + height: 35px; + letter-spacing: 0; + margin: 10px; + padding: 0 10px; + width: 200px; +} + +.aria-label { + display: none; +} + +/* ====================== Restaurant Listing ====================== */ +#restaurants-list { + background-color: #f3f3f3; + list-style: outside none none; + margin: 0; + padding: 30px 15px 60px; + text-align: center; + /*display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center;*/ +} +#restaurants-list li { + background-color: #fff; + border: 1px solid #ccc; + font-family: Arial,sans-serif; + margin: 16px; + min-height: 380px; + padding: 10px; + max-width: 310px; + /*display: inline-flex; + /*flex-direction:column;*/ + display:inline-block; + text-align: center; +} +#restaurants-list .restaurant-img { + background-color: #ccc; + display: block; + margin: 0; + max-width: 100%; + min-height: 100%; + min-width: 100%; +} +#restaurants-list li h3 { + color: #f18200; + font-family: Arial,sans-serif; + font-size: 14pt; + font-weight: 200; + letter-spacing: 0; + line-height: 1.3em; + margin: 20px 0 10px; + text-transform: uppercase; +} +#restaurants-list p { + margin: 0; + font-size: 12pt; +} +#restaurants-list li a { + background-color: #252831; + border-bottom: 3px solid #eee; + color: #fff; + display: inline-block; + font-size: 12pt; + margin: 15px 0 10px; + padding: 8px 30px 10px; + text-align: center; + text-decoration: none; + text-transform: uppercase; +} + +/* ====================== Restaurant Details ====================== */ +.inside header { + /*position: fixed;*/ + top: 0; + max-width: 100%; + /*z-index: 1000;*/ +} +.inside #map-container { + background: blue none repeat scroll 0 0; + /*height: 87%; + position: fixed; + right: 0; + top: 80px;*/ + max-width: 100%; +} +/*.inside #map { + background-color: #ccc; + height: 100%; + width: 100%; +}*/ +.inside #footer { + bottom: 0; + /*position: absolute;*/ +} +#restaurant-name { + color: #f18200; + font-family: Arial,sans-serif; + font-size: 22pt; + font-weight: 200; + letter-spacing: 0; + margin: 20px 0 20px; + text-transform: uppercase; + line-height: 1.1; +} +#restaurant-img { + width: 90%; + padding-bottom: 10px; + max-width: 960px; + border-radius: 20px 0px 20px 0px; +} +#restaurant-address { + font-size: 14pt; + margin: 10px 0px; +} +#restaurant-container { + text-align: center; +} +#restaurant-cuisine { + background-color: #333; + color: #ddd; + font-size: 14pt; + font-weight: 300; + letter-spacing: 10px; + margin: 0 0 20px; + padding: 2px 0; + text-align: center; + text-transform: uppercase; + width: 100%; +} +#restaurant-hours { + margin-left: auto; + margin-right: auto; + text-align: left; + padding-bottom:15px; + /*max-width: 80%;*/ +} +#restaurant-hours th { + line-height: 1.2em; +} +#restaurant-container, #reviews-container { + border-bottom: 1px solid #d9d9d9; + border-top: 1px solid #fff; + /*padding-bottom:30px; + padding: 140px 40px 30px;*/ + /*width: 50%;*/ +} +/*#reviews-container { + padding: 30px 40px; +}*/ +#reviews-container h3 { + color: #f58500; + font-size: 24pt; + font-weight: 300; + text-align: center; + /*letter-spacing: -1px;*/ + padding-bottom: 5px; + padding-top: 5px; + line-height:1.5em; +} +/*#reviews-list { + margin: 0; + padding: 0; +}*/ + +#reviews-list { + padding:0px; +} +#reviews-list li { + background-color: #fff; + border: 2px solid #f3f3f3; + display: block; + list-style-type: none; + padding:0px; + /*margin: 0 0 30px;*/ + overflow: hidden; + /*padding: 0 20px 20px;*/ + position: relative; + width: 85%; + max-width:600px; + margin-left:auto; + margin-right:auto; + margin-bottom:20px; + border-radius: 0px 0px 10px 0px; +} +#reviews-list li p { + text-indent:10px; +} +#restaurant-hours td { + color: #666; +} + +#reviewer-name { + background-color: #333; + color: #ddd; + font-size: 14pt; + font-weight: 300; + margin: 0px; + width: 100%; + border-radius: 10px 0px 0px 0px; +} + +#reviewer-comments { + padding-left: 15px; + padding-right: 15px; +} + +/* Media Queries + +@media screen and (min-width: 834px) { + li { + max-width: 350px; + } +}*/ + +/*@media screen and (min-width: 900px) { + body { + width: 1200px; + margin-left: auto; + margin-right: auto; + } +}*/ diff --git a/data/restaurants.json b/data/restaurants.json new file mode 100644 index 0000000..76e4729 --- /dev/null +++ b/data/restaurants.json @@ -0,0 +1,393 @@ +{ + "restaurants": [{ + "id": 1, + "name": "Mission Chinese Food", + "neighborhood": "Manhattan", + "photograph": "1@1x.jpg", + "address": "171 E Broadway, New York, NY 10002", + "latlng": { + "lat": 40.713829, + "lng": -73.989667 + }, + "cuisine_type": "Asian", + "operating_hours": { + "Monday": "5:30 pm - 11:00 pm", + "Tuesday": "5:30 pm - 12:00 am", + "Wednesday": "5:30 pm - 12:00 am", + "Thursday": "5:30 pm - 12:00 am", + "Friday": "5:30 pm - 12:00 am", + "Saturday": "12:00 pm - 4:00 pm, 5:30 pm - 12:00 am", + "Sunday": "12:00 pm - 4:00 pm, 5:30 pm - 11:00 pm" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "Mission Chinese Food has grown up from its scrappy Orchard Street days into a big, two story restaurant equipped with a pizza oven, a prime rib cart, and a much broader menu. Yes, it still has all the hits — the kung pao pastrami, the thrice cooked bacon —but chef/proprietor Danny Bowien and executive chef Angela Dimayuga have also added a raw bar, two generous family-style set menus, and showstoppers like duck baked in clay. And you can still get a lot of food without breaking the bank." + }, + { + "name": "Morgan", + "date": "October 26, 2016", + "rating": 4, + "comments": "This place is a blast. Must orders: GREEN TEA NOODS, sounds gross (to me at least) but these were incredible!, Kung pao pastrami (but you already knew that), beef tartare was a fun appetizer that we decided to try, the spicy ma po tofu SUPER spicy but delicous, egg rolls and scallion pancake i could have passed on... I wish we would have gone with a larger group, so much more I would have liked to try!" + }, + { + "name": "Jason", + "date": "October 26, 2016", + "rating": 3, + "comments": "I was VERY excited to come here after seeing and hearing so many good things about this place. Having read much, I knew going into it that it was not going to be authentic Chinese. The place was edgy, had a punk rock throwback attitude, and generally delivered the desired atmosphere. Things went downhill from there though. The food was okay at best and the best qualities were easily overshadowed by what I believe to be poor decisions by the kitchen staff." + } + ] + }, { + "id": 2, + "name": "Emily", + "neighborhood": "Brooklyn", + "photograph": "2@1x.jpg", + "address": "919 Fulton St, Brooklyn, NY 11238", + "latlng": { + "lat": 40.683555, + "lng": -73.966393 + }, + "cuisine_type": "Pizza", + "operating_hours": { + "Monday": "5:30 pm - 11:00 pm", + "Tuesday": "5:30 pm - 11:00 pm", + "Wednesday": "5:30 pm - 11:00 pm", + "Thursday": "5:30 pm - 11:00 pm", + "Friday": "5:30 pm - 11:00 pm", + "Saturday": "5:00 pm - 11:30 pm", + "Sunday": "12:00 pm - 3:00 pm, 5:00 pm - 11:00 pm" + }, + "reviews": [{ + "name": "Steph", + "date": "October 26, 2016", + "rating": 4, + "comments": "Five star food, two star atmosphere. I would definitely get takeout from this place - but dont think I have the energy to deal with the hipster ridiculousness again. By the time we left the wait was two hours long." + }, + { + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "This cozy Clinton Hill restaurant excels at both straightforward and unusual wood-fired pizzas. If you want a taste of the latter, consider ordering the Emily, which is topped with mozzarella, pistachios, truffled sottocenere cheese, and honey. The menu includes salads and a handful of starters, as well as a burger that some meat connoisseurs consider to be among the best in the city." + }, + { + "name": "Sam", + "date": "October 26, 2016", + "rating": 5, + "comments": "5 star atmosphere as it is very cozy with great staff. 5 star food as their Emmy burger is outrageously good. and its on a pretzel bun.. Too juicy for its own good and downright addicting. Also try the Colony pizza. Many others looked like worth competitors, but the Colony really found its way to my heart. when you start with a great crust, top it with top notch cheese and sauce, you've got a winner. But, if you go a step further and add the salty from the pepperoni, the sweet from the honey, and the spicy from the chili oil.... your mouth is confused and happy at the same time." + } + ] + }, { + "id": 3, + "name": "Kang Ho Dong Baekjeong", + "neighborhood": "Manhattan", + "photograph": "3@1x.jpg", + "address": "1 E 32nd St, New York, NY 10016", + "latlng": { + "lat": 40.747143, + "lng": -73.985414 + }, + "cuisine_type": "Asian", + "operating_hours": { + "Monday": "11:30 am - 2:00 am", + "Tuesday": "11:30 am - 2:00 am", + "Wednesday": "11:30 am - 2:00 am", + "Thursday": "11:30 am - 2:00 am", + "Friday": "11:30 am - 6:00 am", + "Saturday": "11:30 am - 6:00 am", + "Sunday": "11:30 am - 2:00 am" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "The tables at this 32nd Street favorite are outfitted with grills for cooking short ribs, brisket, beef tongue, rib eye, and pork jowl. The banchan plates are uniformly good, and Deuki Hong’s menu also includes winning dishes like stir-fried squid noodles, kimchi stew, and seafood pancakes. If it’s available, make sure to order the kimchi and rice “lunchbox.” Baekjeong is a great place for large groups and birthday parties." + }, + { + "name": "ZS", + "date": "October 26, 2016", + "rating": 5, + "comments": "I've been to Korea before and many other Korean BBQ places. We had the regular pork belly and a beef (forgot which cut) and a seafood tofu soup. Two meat and a soup was just prefect for the two of us. We could have done one meat and one soup. The portions of the meat are great! The beef was juicy, tender and so good. The sides were excellent. " + }, + { + "name": "Emily", + "date": "October 26, 2016", + "rating": 2, + "comments": "MEH. I've tried their Jersey location as well but Kang Ho Dong meat quality is severely decreasing. A Korean bbq place with whatever meat? I think NOT!" + } + ] + }, { + "id": 4, + "name": "Katz's Delicatessen", + "neighborhood": "Manhattan", + "photograph": "4@1x.jpg", + "address": "205 E Houston St, New York, NY 10002", + "latlng": { + "lat": 40.722216, + "lng": -73.987501 + }, + "cuisine_type": "American", + "operating_hours": { + "Monday": "8:00 am - 10:30 pm", + "Tuesday": "8:00 am - 10:30 pm", + "Wednesday": "8:00 am - 10:30 pm", + "Thursday": "8:00 am - 2:30 am", + "Friday": "8:00 am - Sat", + "Saturday": "Open 24 hours", + "Sunday": "Sat - 10:30 pm" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 5, + "comments": "In 127 years, little has changed at Katz's. It remains one of New York's — and the country's — essential Jewish delicatessens. Every inch of the massive Lower East Side space smells intensely of pastrami and rye loaves. The sandwiches are massive, so they are best when shared. Order at the counter, and don't forget to tip your slicer — your sandwich will be better for it." + }, + { + "name": "Allen", + "date": "October 26, 2016", + "rating": 5, + "comments": "If I lived in NY and got diabetes from eating here every single time I ate, I would do it over and over and over again just for that first bite. These guys know how to make a sandwich. The heart attack comes free of charge! Came by while I was visiting NYC. First pit-stop when I come back :)!" + }, + { + "name": "David", + "date": "October 26, 2016", + "rating": 2, + "comments": "Ok so four of us came. One more later who didn't order becauase it's so expensive and simple. Seriously, a bunch of meat albeit you can sample beforehand on rye/white/wheat bread. Cheese extra. Pickles free, you can just ask them at the pickup counter. But seriously 20 bucks gone for an non-flavored half sandwich. And a line that is long, especially if you want seating. I'm down to just take a quick look where Sally and Harry sat and leave to the other delis all around NYC. Oh and they accept Samsung pay." + } + ] + }, { + "id": 5, + "name": "Roberta's Pizza", + "neighborhood": "Brooklyn", + "photograph": "5@1x.jpg", + "address": "261 Moore St, Brooklyn, NY 11206", + "latlng": { + "lat": 40.705089, + "lng": -73.933585 + }, + "cuisine_type": "Pizza", + "operating_hours": { + "Monday": "11:00 am - 12:00 am", + "Tuesday": "11:00 am - 12:00 am", + "Wednesday": "11:00 am - 12:00 am", + "Thursday": "11:00 am - 12:00 am", + "Friday": "11:00 am - 12:00 am", + "Saturday": "10:00 am - 12:00 am", + "Sunday": "10:00 am - 12:00 am" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "Roberta's is the epicenter of the modern Brooklyn food scene.The pizzas are fantastic, but the restaurant really flexes its muscles with the vegetable dishes. In addition to the pies, consider ordering the radishes, the romaine salad, the roasted beets, and some of the charcuterie." + }, + { + "name": "Raymond", + "date": "October 26, 2016", + "rating": 4, + "comments": "Roberta's, one of the better pizzas I have had in my life. Very trendy and hipsterish spot. Came here for lunch on a random weekday afternoon and when we arrived, there was a line forming already. The space is a bit cramped. You'll get to know your neighbors soon enough. The pizza is just delightful and delicious. It's a ncie plus that you get to see them firing up the pizzas in the corner. The major issue with Roberta's is the trek out to the Williamsburg/Bushwick." + }, + { + "name": "Laurel", + "date": "October 26, 2016", + "rating": 4, + "comments": "The pizza is fantastic, not THE best I've ever had, but would definitely go back since it has great food and great ambiance. Definitely worth going to. It has A LOT of hype in the New York food scene, and I question if it deserves all of it, but it's still a totally great spot to hit up when in the area!!" + } + ] + }, { + "id": 6, + "name": "Hometown BBQ", + "neighborhood": "Brooklyn", + "photograph": "6@1x.jpg", + "address": "454 Van Brunt St, Brooklyn, NY 11231", + "latlng": { + "lat": 40.674925, + "lng": -74.016162 + }, + "cuisine_type": "American", + "operating_hours": { + "Monday": "Closed", + "Tuesday": "12:00 pm - 10:00 pm", + "Wednesday": "12:00 pm - 10:00 pm", + "Thursday": "12:00 pm - 10:00 pm", + "Friday": "12:00 pm - 11:00 pm", + "Saturday": "12:00 pm - 11:00 pm", + "Sunday": "12:00 pm - 9:00 pm" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "Barbecue aficionados agree that Billy Durney is cooking up some of the best Texas-style barbecue in the city. Straightforward classics like smoked brisket and baby back ribs are always a strong choice, but there are also options like pork belly tacos and a lamb belly banh mi. The space is sprawling in a way that feels like the real deal, and Durney himself can usually be found working the room, and keeping a watchful eye on the smoking meats. It's counter service only, and there's often a line, but for the scene and certainly for the meat, it's easily worth the trip to Red Hook." + }, + { + "name": "Michelle", + "date": "October 26, 2016", + "rating": 4, + "comments": "Overall, a great try of New York BBQ. The restaurant décor is rustic with a good amount of seats to sit and enjoy the meal. I definitely would love to come back and try that monster of a beef rib!" + }, + { + "name": "Ai-Mei", + "date": "October 26, 2016", + "rating": 4, + "comments": "mmmmmm, what a gem this is in bklyn! I loveeee how soft their brisket is here. Their pork tacos are to die for, their different variety of ribs and lastly, their lamb is not gamey at all. Super wallet friendly for the amount they give you. I highly recommend this spot- after eating here, you can definitely walk over for Steve's key lime pies." + } + ] + }, { + "id": 7, + "name": "Superiority Burger", + "neighborhood": "Manhattan", + "photograph": "7@1x.jpg", + "address": "430 E 9th St, New York, NY 10009", + "latlng": { + "lat": 40.727397, + "lng": -73.983645 + }, + "cuisine_type": "American", + "operating_hours": { + "Monday": "11:30 am - 10:00 pm", + "Tuesday": "Closed", + "Wednesday": "11:30 am - 10:00 pm", + "Thursday": "11:30 am - 10:00 pm", + "Friday": "11:30 am - 10:00 pm", + "Saturday": "11:30 am - 10:00 pm", + "Sunday": "11:30 am - 10:00 pm" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "Brooks Headley’s tiny East Village cafe is so much more than a veggie burger spot — it's one of the best bang-for-your-buck restaurants in Lower Manhattan. Headley and his crew turn seasonal vegetables into delectable salads and riffs on American comfort food favorites. The specials menu changes daily, and the rest of the menu is constantly evolving. You can get a lot of food to eat here for under $15 per person." + }, + { + "name": "Gabriel", + "date": "October 26, 2016", + "rating": 5, + "comments": "I was turned on to this place following the glowing NYT review. Its near my area of the city so I figured why not go? Man they weren't kidding, Superiority Burger is probably the best vegetarian experience I've ever had!" + }, + { + "name": "Shivi", + "date": "October 26, 2016", + "rating": 4, + "comments": "Great flavors and very satisfying. Craving a sandwich, I stopped by on a Friday night with a vegetarian friend. Super small location with just a few seats inside. Ambiance is a bit industrial, good is definitely much more sophisticated than the look of the place! Ordered the superiority burger anda side of potato salad. The potato salad was very light and tasted clean ( less mayo, lots of dill and some cucumber) -- refreshing for a humid summer night! Sandwich was surprisingly delicious - it is very small ( funny allusion to a White Castle burger) but it packs a punch! Not only are there layers of flavors ( amazing sauces) but the party itself had a great texture Ahmed flavor-- well done and so wonderful! Will definitely stop by again for an overall amazing burger/sandwich. Staff was super nice and accommodating but not out of the way friendly." + } + ] + }, { + "id": 8, + "name": "The Dutch", + "neighborhood": "Manhattan", + "photograph": "8@1x.jpg", + "address": "131 Sullivan St, New York, NY 10012", + "latlng": { + "lat": 40.726584, + "lng": -74.002082 + }, + "cuisine_type": "American", + "operating_hours": { + "Monday": "11:30 am - 3:00 pm, 5:30 pm - 11:00 pm", + "Tuesday": "11:30 am - 3:00 pm, 5:30 pm - 11:00 pm", + "Wednesday": "11:30 am - 3:00 pm, 5:30 pm - 11:00 pm", + "Thursday": "11:30 am - 3:00 pm, 5:30 pm - 11:00 pm", + "Friday": "11:30 am - 3:00 pm, 5:30 pm - 11:30 pm", + "Saturday": "10:00 am - 3:00 pm, 5:30 pm - 11:30 pm", + "Sunday": "10:00 am - 3:00 pm, 5:30 pm - 11:00 pm" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "Over the last five years, The Dutch has turned into the quintessential American restaurant that chef Andrew Carmellini and partners Josh Pickard and Luke Ostrom sought to evoke when it first opened. It’s a great choice when you’re craving a steak, a burger, or oysters, and the menu always includes plentiful seafood options as well as pastas. The Dutch is now an indelible part of the Soho landscape." + }, + { + "name": "Loren", + "date": "October 26, 2016", + "rating": 4, + "comments": "I randomly came here on a Saturday night. I was pleasantly surprised with the food and the service. We had the calamari and the ceviche with avocado, and then the catfish. Oh! Then we had the banana soufflé for dessert with ice cream. It was all delicious and well put together. Would love to eat here again." + }, + { + "name": "Lori", + "date": "October 26, 2016", + "rating": 4, + "comments": "Aside from the slightly claustrophobic dining area and the fact that you may have difficulty hearing your dining companion, I'd return to The Dutch without hesitation. The food is surprisingly well-executed and conceived, and our dinner service flowed smoothly without a hitch. Just make sure to get a reservation in advance, as I'm sure more than just a few other people will have the same idea." + } + ] + }, { + "id": 9, + "name": "Mu Ramen", + "neighborhood": "Queens", + "photograph": "9@1x.jpg", + "address": "1209 Jackson Ave, Queens, NY 11101", + "latlng": { + "lat": 40.743797, + "lng": -73.950652 + }, + "cuisine_type": "Asian", + "operating_hours": { + "Monday": "5:00 pm - 10:00 pm", + "Tuesday": "5:00 pm - 10:00 pm", + "Wednesday": "5:00 pm - 10:00 pm", + "Thursday": "5:00 pm - 10:00 pm", + "Friday": "5:00 pm - 11:00 pm", + "Saturday": "5:00 pm - 11:00 pm", + "Sunday": "5:00 pm - 10:00 pm" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 4, + "comments": "Joshua Smookler’s two-year-old ramen shop serves one of the best tonkotsu broths around. Beyond ramen, Mu also offers some high minded plates, like foie gras-stuffed chicken wings, as well as dry-aged Japanese Wagyu beef specials. Mu is just 10 short minutes away from Midtown via the 7-train." + }, + { + "name": "Brittany", + "date": "October 26, 2016", + "rating": 4, + "comments": "Overall, I would definitely recommend this place if you enjoy thick curly noodles with a thick, intense broth. If you don't there are still other options but I can't vouch for those." + }, + { + "name": "Sally", + "date": "October 26, 2016", + "rating": 4, + "comments": "One of the tastiest and most unique ramen places I've been to in NYC, but also the priciest. I think overall its worth the try. Not an everyday casual ramen shop though." + } + ] + }, { + "id": 10, + "name": "Casa Enrique", + "neighborhood": "Queens", + "photograph": "10@1x.jpg", + "address": "5-48 49th Ave, Queens, NY 11101", + "latlng": { + "lat": 40.743394, + "lng": -73.954235 + }, + "cuisine_type": "Mexican", + "operating_hours": { + "Monday": "5:00 pm - 12:00 am", + "Tuesday": "5:00 pm - 12:00 am", + "Wednesday": "5:00 pm - 12:00 am", + "Thursday": "5:00 pm - 12:00 am", + "Friday": "5:00 pm - 12:00 am", + "Saturday": "11:00 am - 12:00 am", + "Sunday": "11:00 am - 12:00 am" + }, + "reviews": [{ + "name": "Steve", + "date": "October 26, 2016", + "rating": 5, + "comments": "Head to this laid-back Long Island City restaurant for beef tongue tacos, chicken smothered in a heady mole sauce, and a monster crab tostada. New York's only Michelin-starred Mexican restaurant is an especially cool choice for lunch during the week or drinks after work. Eater critic Ryan Sutton awarded this restaurant two stars." + }, + { + "name": "Rob", + "date": "October 26, 2016", + "rating": 5, + "comments": "The hype was real. Please go. Get the ceviche. And the tres leches. You're welcome" + }, + { + "name": "Jason", + "date": "October 26, 2016", + "rating": 4, + "comments": "For a Michelin star restaurant, it's fairly priced and the food is fairly good. Started with a strawberry margarita which was good in flavor but not much alcohol. Had the chicken enchiladas with salsa verde and it was really good. Great balance in flavor and a good portion. Extra tasty with their hot sauces. My wife had the lamb but it was a bit too salty for our taste. Although, it was cooked very well and fell off the bone. The highlight of the night was the tres leches cake. Probably the best I've ever had to be honest. Not too sweet and very milky. Overall, one of my top 3 favorite Mexican in NY." + } + ] + }] +} diff --git a/img/10@1x.jpg b/img/10@1x.jpg new file mode 100755 index 0000000..b7b257f Binary files /dev/null and b/img/10@1x.jpg differ diff --git a/img/10@2x.jpg b/img/10@2x.jpg new file mode 100755 index 0000000..b521ef6 Binary files /dev/null and b/img/10@2x.jpg differ diff --git a/img/10@3x.jpg b/img/10@3x.jpg new file mode 100755 index 0000000..d754a76 Binary files /dev/null and b/img/10@3x.jpg differ diff --git a/img/1@1x.jpg b/img/1@1x.jpg new file mode 100755 index 0000000..16c9e78 Binary files /dev/null and b/img/1@1x.jpg differ diff --git a/img/1@2x.jpg b/img/1@2x.jpg new file mode 100755 index 0000000..542aca9 Binary files /dev/null and b/img/1@2x.jpg differ diff --git a/img/1@3x.jpg b/img/1@3x.jpg new file mode 100755 index 0000000..159eace Binary files /dev/null and b/img/1@3x.jpg differ diff --git a/img/2@1x.jpg b/img/2@1x.jpg new file mode 100755 index 0000000..9fe1b99 Binary files /dev/null and b/img/2@1x.jpg differ diff --git a/img/2@2x.jpg b/img/2@2x.jpg new file mode 100755 index 0000000..5ddbefe Binary files /dev/null and b/img/2@2x.jpg differ diff --git a/img/2@3x.jpg b/img/2@3x.jpg new file mode 100755 index 0000000..fddd2b8 Binary files /dev/null and b/img/2@3x.jpg differ diff --git a/img/3@1x.jpg b/img/3@1x.jpg new file mode 100755 index 0000000..6018895 Binary files /dev/null and b/img/3@1x.jpg differ diff --git a/img/3@2x.jpg b/img/3@2x.jpg new file mode 100755 index 0000000..998d6e6 Binary files /dev/null and b/img/3@2x.jpg differ diff --git a/img/3@3x.jpg b/img/3@3x.jpg new file mode 100755 index 0000000..023d58b Binary files /dev/null and b/img/3@3x.jpg differ diff --git a/img/4@1x.jpg b/img/4@1x.jpg new file mode 100755 index 0000000..eeaa8e1 Binary files /dev/null and b/img/4@1x.jpg differ diff --git a/img/4@2x.jpg b/img/4@2x.jpg new file mode 100755 index 0000000..5d4399e Binary files /dev/null and b/img/4@2x.jpg differ diff --git a/img/4@3x.jpg b/img/4@3x.jpg new file mode 100755 index 0000000..a0df5c3 Binary files /dev/null and b/img/4@3x.jpg differ diff --git a/img/5@1x.jpg b/img/5@1x.jpg new file mode 100755 index 0000000..450be6b Binary files /dev/null and b/img/5@1x.jpg differ diff --git a/img/5@2x.jpg b/img/5@2x.jpg new file mode 100755 index 0000000..c20a166 Binary files /dev/null and b/img/5@2x.jpg differ diff --git a/img/5@3x.jpg b/img/5@3x.jpg new file mode 100755 index 0000000..8210a12 Binary files /dev/null and b/img/5@3x.jpg differ diff --git a/img/6@1x.jpg b/img/6@1x.jpg new file mode 100755 index 0000000..84be723 Binary files /dev/null and b/img/6@1x.jpg differ diff --git a/img/6@2x.jpg b/img/6@2x.jpg new file mode 100755 index 0000000..123dffb Binary files /dev/null and b/img/6@2x.jpg differ diff --git a/img/6@3x.jpg b/img/6@3x.jpg new file mode 100755 index 0000000..6ea54f2 Binary files /dev/null and b/img/6@3x.jpg differ diff --git a/img/7@1x.jpg b/img/7@1x.jpg new file mode 100755 index 0000000..4af8f90 Binary files /dev/null and b/img/7@1x.jpg differ diff --git a/img/7@2x.jpg b/img/7@2x.jpg new file mode 100755 index 0000000..84078bb Binary files /dev/null and b/img/7@2x.jpg differ diff --git a/img/7@3x.jpg b/img/7@3x.jpg new file mode 100755 index 0000000..34b686d Binary files /dev/null and b/img/7@3x.jpg differ diff --git a/img/8@1x.jpg b/img/8@1x.jpg new file mode 100755 index 0000000..5dc26f1 Binary files /dev/null and b/img/8@1x.jpg differ diff --git a/img/8@2x.jpg b/img/8@2x.jpg new file mode 100755 index 0000000..e50d02a Binary files /dev/null and b/img/8@2x.jpg differ diff --git a/img/8@3x.jpg b/img/8@3x.jpg new file mode 100755 index 0000000..97a5ea7 Binary files /dev/null and b/img/8@3x.jpg differ diff --git a/img/9@1x.jpg b/img/9@1x.jpg new file mode 100755 index 0000000..018dfb9 Binary files /dev/null and b/img/9@1x.jpg differ diff --git a/img/9@2x.jpg b/img/9@2x.jpg new file mode 100755 index 0000000..37d079b Binary files /dev/null and b/img/9@2x.jpg differ diff --git a/img/9@3x.jpg b/img/9@3x.jpg new file mode 100755 index 0000000..37ad399 Binary files /dev/null and b/img/9@3x.jpg differ diff --git a/img/original/1.jpg b/img/original/1.jpg new file mode 100755 index 0000000..3a9c239 Binary files /dev/null and b/img/original/1.jpg differ diff --git a/img/original/10.jpg b/img/original/10.jpg new file mode 100755 index 0000000..d0289ef Binary files /dev/null and b/img/original/10.jpg differ diff --git a/img/original/2.jpg b/img/original/2.jpg new file mode 100755 index 0000000..810b302 Binary files /dev/null and b/img/original/2.jpg differ diff --git a/img/original/3.jpg b/img/original/3.jpg new file mode 100755 index 0000000..581540f Binary files /dev/null and b/img/original/3.jpg differ diff --git a/img/original/4.jpg b/img/original/4.jpg new file mode 100755 index 0000000..e870025 Binary files /dev/null and b/img/original/4.jpg differ diff --git a/img/original/5.jpg b/img/original/5.jpg new file mode 100755 index 0000000..1409faf Binary files /dev/null and b/img/original/5.jpg differ diff --git a/img/original/6.jpg b/img/original/6.jpg new file mode 100755 index 0000000..6f6dbc9 Binary files /dev/null and b/img/original/6.jpg differ diff --git a/img/original/7.jpg b/img/original/7.jpg new file mode 100755 index 0000000..c37a719 Binary files /dev/null and b/img/original/7.jpg differ diff --git a/img/original/8.jpg b/img/original/8.jpg new file mode 100755 index 0000000..0fa0c15 Binary files /dev/null and b/img/original/8.jpg differ diff --git a/img/original/9.jpg b/img/original/9.jpg new file mode 100755 index 0000000..39ea1c0 Binary files /dev/null and b/img/original/9.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0bea0e3 --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + + + + + Restaurant Reviews + + + + +
+ +
+ +
+ + +
+ +
+
+ + +
+
+

Filter Results

+ + + + + + + +
+ + + +
+
+ + + + + + + + + + + + diff --git a/js/dbhelper.js b/js/dbhelper.js new file mode 100644 index 0000000..7150e8e --- /dev/null +++ b/js/dbhelper.js @@ -0,0 +1,170 @@ +/** + * Common database helper functions. + */ +class DBHelper { + + /** + * Database URL. + * Change this to restaurants.json file location on your server. + */ + static get DATABASE_URL() { + const port = 8000 // Change this to your server port + return `http://localhost:${port}/data/restaurants.json`; + } + + /** + * Fetch all restaurants. + */ + static fetchRestaurants(callback) { + let xhr = new XMLHttpRequest(); + xhr.open('GET', DBHelper.DATABASE_URL); + xhr.onload = () => { + if (xhr.status === 200) { // Got a success response from server! + const json = JSON.parse(xhr.responseText); + const restaurants = json.restaurants; + callback(null, restaurants); + } else { // Oops!. Got an error from server. + const error = (`Request failed. Returned status of ${xhr.status}`); + callback(error, null); + } + }; + xhr.send(); + } + + /** + * Fetch a restaurant by its ID. + */ + static fetchRestaurantById(id, callback) { + // fetch all restaurants with proper error handling. + DBHelper.fetchRestaurants((error, restaurants) => { + if (error) { + callback(error, null); + } else { + const restaurant = restaurants.find(r => r.id == id); + if (restaurant) { // Got the restaurant + callback(null, restaurant); + } else { // Restaurant does not exist in the database + callback('Restaurant does not exist', null); + } + } + }); + } + + /** + * Fetch restaurants by a cuisine type with proper error handling. + */ + static fetchRestaurantByCuisine(cuisine, callback) { + // Fetch all restaurants with proper error handling + DBHelper.fetchRestaurants((error, restaurants) => { + if (error) { + callback(error, null); + } else { + // Filter restaurants to have only given cuisine type + const results = restaurants.filter(r => r.cuisine_type == cuisine); + callback(null, results); + } + }); + } + + /** + * Fetch restaurants by a neighborhood with proper error handling. + */ + static fetchRestaurantByNeighborhood(neighborhood, callback) { + // Fetch all restaurants + DBHelper.fetchRestaurants((error, restaurants) => { + if (error) { + callback(error, null); + } else { + // Filter restaurants to have only given neighborhood + const results = restaurants.filter(r => r.neighborhood == neighborhood); + callback(null, results); + } + }); + } + + /** + * Fetch restaurants by a cuisine and a neighborhood with proper error handling. + */ + static fetchRestaurantByCuisineAndNeighborhood(cuisine, neighborhood, callback) { + // Fetch all restaurants + DBHelper.fetchRestaurants((error, restaurants) => { + if (error) { + callback(error, null); + } else { + let results = restaurants + if (cuisine != 'all') { // filter by cuisine + results = results.filter(r => r.cuisine_type == cuisine); + } + if (neighborhood != 'all') { // filter by neighborhood + results = results.filter(r => r.neighborhood == neighborhood); + } + callback(null, results); + } + }); + } + + /** + * Fetch all neighborhoods with proper error handling. + */ + static fetchNeighborhoods(callback) { + // Fetch all restaurants + DBHelper.fetchRestaurants((error, restaurants) => { + if (error) { + callback(error, null); + } else { + // Get all neighborhoods from all restaurants + const neighborhoods = restaurants.map((v, i) => restaurants[i].neighborhood) + // Remove duplicates from neighborhoods + const uniqueNeighborhoods = neighborhoods.filter((v, i) => neighborhoods.indexOf(v) == i) + callback(null, uniqueNeighborhoods); + } + }); + } + + /** + * Fetch all cuisines with proper error handling. + */ + static fetchCuisines(callback) { + // Fetch all restaurants + DBHelper.fetchRestaurants((error, restaurants) => { + if (error) { + callback(error, null); + } else { + // Get all cuisines from all restaurants + const cuisines = restaurants.map((v, i) => restaurants[i].cuisine_type) + // Remove duplicates from cuisines + const uniqueCuisines = cuisines.filter((v, i) => cuisines.indexOf(v) == i) + callback(null, uniqueCuisines); + } + }); + } + + /** + * Restaurant page URL. + */ + static urlForRestaurant(restaurant) { + return (`./restaurant.html?id=${restaurant.id}`); + } + + /** + * Restaurant image URL. + */ + static imageUrlForRestaurant(restaurant) { + return (`/img/${restaurant.photograph}`); + } + + /** + * Map marker for a restaurant. + */ + static mapMarkerForRestaurant(restaurant, map) { + const marker = new google.maps.Marker({ + position: restaurant.latlng, + title: restaurant.name, + url: DBHelper.urlForRestaurant(restaurant), + map: map, + animation: google.maps.Animation.DROP} + ); + return marker; + } + +} diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..59fda0e --- /dev/null +++ b/js/main.js @@ -0,0 +1,182 @@ +let restaurants, + neighborhoods, + cuisines +var map +var markers = [] + +/** + * Fetch neighborhoods and cuisines as soon as the page is loaded. + */ +document.addEventListener('DOMContentLoaded', (event) => { + fetchNeighborhoods(); + fetchCuisines(); +}); + +/** + * Fetch all neighborhoods and set their HTML. + */ +fetchNeighborhoods = () => { + DBHelper.fetchNeighborhoods((error, neighborhoods) => { + if (error) { // Got an error + console.error(error); + } else { + self.neighborhoods = neighborhoods; + fillNeighborhoodsHTML(); + } + }); +} + +/** + * Set neighborhoods HTML. + */ +fillNeighborhoodsHTML = (neighborhoods = self.neighborhoods) => { + const select = document.getElementById('neighborhoods-select'); + neighborhoods.forEach(neighborhood => { + const option = document.createElement('option'); + option.innerHTML = neighborhood; + option.value = neighborhood; + select.append(option); + }); +} + +/** + * Fetch all cuisines and set their HTML. + */ +fetchCuisines = () => { + DBHelper.fetchCuisines((error, cuisines) => { + if (error) { // Got an error! + console.error(error); + } else { + self.cuisines = cuisines; + fillCuisinesHTML(); + } + }); +} + +/** + * Set cuisines HTML. + */ +fillCuisinesHTML = (cuisines = self.cuisines) => { + const select = document.getElementById('cuisines-select'); + + cuisines.forEach(cuisine => { + const option = document.createElement('option'); + option.innerHTML = cuisine; + option.value = cuisine; + select.append(option); + }); +} + +/** + * Initialize Google map, called from HTML. + */ +window.initMap = () => { + let loc = { + lat: 40.722216, + lng: -73.987501 + }; + self.map = new google.maps.Map(document.getElementById('map'), { + zoom: 12, + center: loc, + scrollwheel: false + }); + updateRestaurants(); +} + +/** + * Update page and map for current restaurants. + */ +updateRestaurants = () => { + const cSelect = document.getElementById('cuisines-select'); + const nSelect = document.getElementById('neighborhoods-select'); + + const cIndex = cSelect.selectedIndex; + const nIndex = nSelect.selectedIndex; + + const cuisine = cSelect[cIndex].value; + const neighborhood = nSelect[nIndex].value; + + DBHelper.fetchRestaurantByCuisineAndNeighborhood(cuisine, neighborhood, (error, restaurants) => { + if (error) { // Got an error! + console.error(error); + } else { + resetRestaurants(restaurants); + fillRestaurantsHTML(); + } + }) +} + +/** + * Clear current restaurants, their HTML and remove their map markers. + */ +resetRestaurants = (restaurants) => { + // Remove all restaurants + self.restaurants = []; + const ul = document.getElementById('restaurants-list'); + ul.innerHTML = ''; + + // Remove all map markers + self.markers.forEach(m => m.setMap(null)); + self.markers = []; + self.restaurants = restaurants; +} + +/** + * Create all restaurants HTML and add them to the webpage. + */ +fillRestaurantsHTML = (restaurants = self.restaurants) => { + const ul = document.getElementById('restaurants-list'); + restaurants.forEach(restaurant => { + ul.append(createRestaurantHTML(restaurant)); + }); + addMarkersToMap(); +} + +/** + * Create restaurant HTML. + */ +createRestaurantHTML = (restaurant) => { + const li = document.createElement('li'); + + const image = document.createElement('img'); + image.className = 'restaurant-img'; + image.src = `/img/${restaurant.id}@1x.jpg`; + image.srcset = `/img/${restaurant.id}@1x.jpg 300w, + /img/${restaurant.id}@2x.jpg 600w, + /img/${restaurant.id}@3x.jpg 900w`; + image.alt = `Image of ${restaurant.name} restaurant`; + li.append(image); + + const name = document.createElement('h3'); + name.innerHTML = restaurant.name; + li.append(name); + + const neighborhood = document.createElement('p'); + neighborhood.innerHTML = restaurant.neighborhood; + li.append(neighborhood); + + const address = document.createElement('p'); + address.innerHTML = restaurant.address; + li.append(address); + + const more = document.createElement('a'); + more.innerHTML = 'View Details'; + more.href = DBHelper.urlForRestaurant(restaurant); + li.append(more) + + return li +} + +/** + * Add markers for current restaurants to the map. + */ +addMarkersToMap = (restaurants = self.restaurants) => { + restaurants.forEach(restaurant => { + // Add marker to the map + const marker = DBHelper.mapMarkerForRestaurant(restaurant, self.map); + google.maps.event.addListener(marker, 'click', () => { + window.location.href = marker.url + }); + self.markers.push(marker); + }); +} diff --git a/js/restaurant_info.js b/js/restaurant_info.js new file mode 100644 index 0000000..3e48630 --- /dev/null +++ b/js/restaurant_info.js @@ -0,0 +1,184 @@ +let restaurant; +var map; + +/** + * Initialize Google map, called from HTML. + */ +window.initMap = () => { + fetchRestaurantFromURL((error, restaurant) => { + if (error) { // Got an error! + console.error(error); + } else { + self.map = new google.maps.Map(document.getElementById('map'), { + zoom: 16, + center: restaurant.latlng, + scrollwheel: false + }); + fillBreadcrumb(); + DBHelper.mapMarkerForRestaurant(self.restaurant, self.map); + } + }); +} + +/** + * Get current restaurant from page URL. + */ +fetchRestaurantFromURL = (callback) => { + if (self.restaurant) { // restaurant already fetched! + callback(null, self.restaurant) + return; + } + const id = getParameterByName('id'); + if (!id) { // no id found in URL + error = 'No restaurant id in URL' + callback(error, null); + } else { + DBHelper.fetchRestaurantById(id, (error, restaurant) => { + self.restaurant = restaurant; + if (!restaurant) { + console.error(error); + return; + } + fillRestaurantHTML(); + callback(null, restaurant) + }); + } +} + +/** + * Create restaurant HTML and add it to the webpage + */ +fillRestaurantHTML = (restaurant = self.restaurant) => { + const name = document.getElementById('restaurant-name'); + name.innerHTML = restaurant.name; + + const address = document.getElementById('restaurant-address'); + address.innerHTML = restaurant.address; + + const image = document.getElementById('restaurant-img'); + image.className = 'restaurant-img' + image.src = `/img/${restaurant.id}@1x.jpg`; + image.srcset = `/img/${restaurant.id}@1x.jpg 300w, + /img/${restaurant.id}@2x.jpg 600w, + /img/${restaurant.id}@3x.jpg 900w`; + image.alt = restaurant.alt_text; + + const cuisine = document.getElementById('restaurant-cuisine'); + cuisine.innerHTML = restaurant.cuisine_type; + + // fill operating hours + if (restaurant.operating_hours) { + fillRestaurantHoursHTML(); + } + // fill reviews + fillReviewsHTML(); +} + +/** + * Create restaurant operating hours HTML table and add it to the webpage. + */ +fillRestaurantHoursHTML = (operatingHours = self.restaurant.operating_hours) => { + const hours = document.getElementById('restaurant-hours'); + for (let key in operatingHours) { + const row = document.createElement('tr'); + + const day = document.createElement('th'); + day.innerHTML = key; + row.appendChild(day); + + const time = document.createElement('td'); + time.innerHTML = operatingHours[key]; + row.appendChild(time); + + hours.appendChild(row); + } +} + +/** + * Create all reviews HTML and add them to the webpage. + */ +fillReviewsHTML = (reviews = self.restaurant.reviews) => { + const container = document.getElementById('reviews-container'); + const title = document.createElement('h3'); + title.innerHTML = 'Reviews'; + container.appendChild(title); + + if (!reviews) { + const noReviews = document.createElement('p'); + noReviews.innerHTML = 'No reviews yet!'; + container.appendChild(noReviews); + return; + } + const ul = document.getElementById('reviews-list'); + reviews.forEach(review => { + ul.appendChild(createReviewHTML(review)); + }); + container.appendChild(ul); +} + +/** + * Create review HTML and add it to the webpage. + */ +createReviewHTML = (review) => { + const li = document.createElement('li'); + const name = document.createElement('p'); + name.id = "reviewer-name"; + name.innerHTML = review.name; + li.appendChild(name); + + const date = document.createElement('p'); + date.innerHTML = review.date; + li.appendChild(date); + + const rating = document.createElement('p'); + rating.innerHTML = `Rating: ${review.rating}`; + li.appendChild(rating); + + const stars = document.createElement('p'); + var starString = ""; + for (i = 0; i < review.rating; i++){ + starString += "★ "; + } + //console.log("starString ", starString); + stars.innerHTML = starString; + li.appendChild(stars); + + const line = document.createElement('hr'); + li.appendChild(line); + + const comments = document.createElement('p'); + comments.id = "reviewer-comments"; + comments.innerHTML = review.comments; + li.appendChild(comments); + + return li; +} + +/** + * Add restaurant name to the breadcrumb navigation menu + */ +fillBreadcrumb = (restaurant=self.restaurant) => { + const breadcrumb = document.getElementById('breadcrumb'); + const li = document.createElement('li'); + //const h2 = document.createElement('h2'); + li.setAttribute('aria-current', 'page'); + li.innerHTML = restaurant.name; + //li.appendChild(h2); + breadcrumb.appendChild(li); +} + +/** + * Get a parameter by name from page URL. + */ +getParameterByName = (name, url) => { + if (!url) + url = window.location.href; + name = name.replace(/[\[\]]/g, '\\$&'); + const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`), + results = regex.exec(url); + if (!results) + return null; + if (!results[2]) + return ''; + return decodeURIComponent(results[2].replace(/\+/g, ' ')); +} diff --git a/js/swregister.js b/js/swregister.js new file mode 100644 index 0000000..564a5cb --- /dev/null +++ b/js/swregister.js @@ -0,0 +1,10 @@ +// Registering the Service Worker +if ("serviceWorker" in navigator) { + navigator.serviceWorker.register('/sw.js') + .then(function(registration) { + console.log('Registration successful, scope is: ', registration.scope); + }) + .catch(function(error) { + console.log('Service worker registration failed, error: ', error); + }); +} diff --git a/restaurant.html b/restaurant.html new file mode 100644 index 0000000..1cf811c --- /dev/null +++ b/restaurant.html @@ -0,0 +1,80 @@ + + + + + + + + + + + + + Restaurant Info + + + + +
+ + + +
+ + + +
+ +
+ +
+
+ + +
+

+ +

+

+
+
+ + +
+ +
+ +
+ + + + + + + + + + + + + + + + + + diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..6116f8b --- /dev/null +++ b/sw.js @@ -0,0 +1,50 @@ +// Service Worker + +// Data +var myCache = "restauarantReview_100"; +var cacheFiles = [ + '/index.html', + '/restaurant.html', + '/css/styles.css', + '/data/restaurants.json', + //"/img/", + '/js/dbhelper.js', + '/js/main.js', + '/js/restaurant_info.js', + '/js/swregister.js' +]; + +// Event Listener for install - caching the files +self.addEventListener("install", function(event) { + + //console.log('In eventListener for install, event: ', event) + event.waitUntil(caches.open(myCache).then(function(cache) { + + return cache.addAll(cacheFiles) + //.then( function() { console.log('Cache worked'); } ) + .catch(function(error) { + + console.log("Caching failed, error: ", error); + }); + })); +}); + + +// Event Lstener for fetch - pull friles from cache and update with fetch is possible +self.addEventListener('fetch', function(event) { + //console.log('In eventListener for fetch, event: ', event) + + event.respondWith( + caches.match(event.request).then(function(response) { + + return response || fetch(event.request).then(function(fetchResponse) { + + return caches.open(myCache).then(function(cache) { + + cache.put(event.request, fetchResponse.clone()); + return fetchResponse; + }); + }) + }) + ); +});