Committing progress. Gulp in place. Test & debugging.

app/js/dbhelper.js

@@ -1,10 +1,10 @@
-/**
+/* 
  * Common database helper functions.
  */
 
 class DBHelper {
 
-  /**
+  /* 
    * Database URL.
    * Change this to restaurants   location on your server.
    */
@@ -13,7 +13,7 @@ class DBHelper {
     return `http://localhost:${port}/restaurants`;
   }
 
-  /**
+  /* 
    * Fetch all restaurants.
    */
   static fetchRestaurants(callback) {
@@ -43,24 +43,8 @@ class DBHelper {
         });
       });
     }
-
 
-    // 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) {
@@ -79,7 +63,7 @@ class DBHelper {
     });
   }
 
-  /**
+  /*
    * Fetch restaurants by a cuisine type with proper error handling.
    */
   static fetchRestaurantByCuisine(cuisine, callback) {
@@ -95,7 +79,7 @@ class DBHelper {
     });
   }
 
-  /**
+  /*
    * Fetch restaurants by a neighborhood with proper error handling.
    */
   static fetchRestaurantByNeighborhood(neighborhood, callback) {
@@ -111,7 +95,7 @@ class DBHelper {
     });
   }
 
-  /**
+  /*
    * Fetch restaurants by a cuisine and a neighborhood with proper error handling.
    */
   static fetchRestaurantByCuisineAndNeighborhood(cuisine, neighborhood, callback) {
@@ -132,14 +116,14 @@ class DBHelper {
     });
   }
 
-  /**
+  /*
    * Fetch all neighborhoods with proper error handling.
    */
   static fetchNeighborhoods(callback) {
     // Fetch all restaurants
     DBHelper.fetchRestaurants((error, restaurants) => {
       if (error) {
-        callback(error, null);
+        callback(error, null); 
       } else {
         // Get all neighborhoods from all restaurants
         const neighborhoods = restaurants.map((v, i) => restaurants[i].neighborhood)
@@ -150,7 +134,7 @@ class DBHelper {
     });
   }
 
-  /**
+  /*
    * Fetch all cuisines with proper error handling.
    */
   static fetchCuisines(callback) {
@@ -168,21 +152,21 @@ class DBHelper {
     });
   }
 
-  /**
+  /*
    * Restaurant page URL.
    */
-  static urlForRestaurant(restaurant) {
+  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) {

app/js/main.js

@@ -4,15 +4,15 @@ let restaurants,
 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 = () => {
@@ -26,7 +26,7 @@ fetchNeighborhoods = () => {
   });
 }
 
-/**
+/*
  * Set neighborhoods HTML.
  */
 fillNeighborhoodsHTML = (neighborhoods = self.neighborhoods) => {
@@ -39,7 +39,7 @@ fillNeighborhoodsHTML = (neighborhoods = self.neighborhoods) => {
   });
 }
 
-/**
+/*
  * Fetch all cuisines and set their HTML.
  */
 fetchCuisines = () => {
@@ -53,7 +53,7 @@ fetchCuisines = () => {
   });
 }
 
-/**
+/*
  * Set cuisines HTML.
  */
 fillCuisinesHTML = (cuisines = self.cuisines) => {
@@ -67,7 +67,7 @@ fillCuisinesHTML = (cuisines = self.cuisines) => {
   });
 }
 
-/**
+/*
  * Initialize Google map, called from HTML.
  */
 window.initMap = () => {
@@ -83,7 +83,7 @@ window.initMap = () => {
   updateRestaurants();
 }
 
-/**
+/*
  * Update page and map for current restaurants.
  */
 updateRestaurants = () => {
@@ -106,7 +106,7 @@ updateRestaurants = () => {
   })
 }
 
-/**
+/*
  * Clear current restaurants, their HTML and remove their map markers.
  */
 resetRestaurants = (restaurants) => {
@@ -121,7 +121,7 @@ resetRestaurants = (restaurants) => {
   self.restaurants = restaurants;
 }
 
-/**
+/*
  * Create all restaurants HTML and add them to the webpage.
  */
 fillRestaurantsHTML = (restaurants = self.restaurants) => {
@@ -132,18 +132,18 @@ fillRestaurantsHTML = (restaurants = self.restaurants) => {
   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.src = `/img/${restaurant.id}@1x.webp`;
+  image.srcset = `/img/${restaurant.id}@1x.webp 300w,
+                  /img/${restaurant.id}@2x.webp 600w,
+                  /img/${restaurant.id}@3x.webp 900w`;
   image.alt = `Image of ${restaurant.name} restaurant`;
   li.append(image);
 
@@ -167,7 +167,7 @@ createRestaurantHTML = (restaurant) => {
   return li
 }
 
-/**
+/*
  * Add markers for current restaurants to the map.
  */
 addMarkersToMap = (restaurants = self.restaurants) => {

app/js/restaurant_info.js

@@ -1,7 +1,7 @@
 let restaurant;
 var map;
 
-/**
+/*
  * Initialize Google map, called from HTML.
  */
 window.initMap = () => {
@@ -20,7 +20,7 @@ window.initMap = () => {
   });
 }
 
-/**
+/*
  * Get current restaurant from page URL.
  */
 fetchRestaurantFromURL = (callback) => {
@@ -45,7 +45,7 @@ fetchRestaurantFromURL = (callback) => {
   }
 }
 
-/**
+/*
  * Create restaurant HTML and add it to the webpage
  */
 fillRestaurantHTML = (restaurant = self.restaurant) => {
@@ -57,10 +57,10 @@ fillRestaurantHTML = (restaurant = self.restaurant) => {
 
   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.src = `/img/${restaurant.id}@1x.webp`;
+  image.srcset = `/img/${restaurant.id}@1x.webp 300w,
+                  /img/${restaurant.id}@2x.webp 600w,
+                  /img/${restaurant.id}@3x.webp 900w`;
   image.alt = restaurant.alt_text;
 
   const cuisine = document.getElementById('restaurant-cuisine');
@@ -74,7 +74,7 @@ fillRestaurantHTML = (restaurant = self.restaurant) => {
   fillReviewsHTML();
 }
 
-/**
+/*
  * Create restaurant operating hours HTML table and add it to the webpage.
  */
 fillRestaurantHoursHTML = (operatingHours = self.restaurant.operating_hours) => {
@@ -94,7 +94,7 @@ fillRestaurantHoursHTML = (operatingHours = self.restaurant.operating_hours) =>
   }
 }
 
-/**
+/*
  * Create all reviews HTML and add them to the webpage.
  */
 fillReviewsHTML = (reviews = self.restaurant.reviews) => {
@@ -116,7 +116,7 @@ fillReviewsHTML = (reviews = self.restaurant.reviews) => {
   container.appendChild(ul);
 }
 
-/**
+/*
  * Create review HTML and add it to the webpage.
  */
 createReviewHTML = (review) => {
@@ -154,7 +154,7 @@ createReviewHTML = (review) => {
   return li;
 }
 
-/**
+/*
  * Add restaurant name to the breadcrumb navigation menu
  */
 fillBreadcrumb = (restaurant=self.restaurant) => {
@@ -167,7 +167,7 @@ fillBreadcrumb = (restaurant=self.restaurant) => {
   breadcrumb.appendChild(li);
 }
 
-/**
+/*
  * Get a parameter by name from page URL.
  */
 getParameterByName = (name, url) => {

dist/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="Description" content="Restaurant Reviews"><script type="application/javascript" charset="utf-8" src="js/swregister.js"></script><link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css"><link rel="stylesheet" href="css/styles.css"><title>Restaurant Reviews</title></head><body><header><nav><h1><a href="/">Restaurant Reviews</a></h1></nav></header><main id="maincontent"><section id="map-container" role="application" aria-labelledby="aria-map-label"><label id="aria-map-label" class="aria-label">Map Application provided by Google</label><div id="map"></div></section><section><div class="filter-options"><h2>Filter Results</h2><label id="aria-select-neighborhood" class="aria-label">Select filter by neighborhood</label> <select id="neighborhoods-select" aria-labelledby="aria-select-neighborhood" name="neighborhoods" onchange="updateRestaurants()"><option value="all">All Neighborhoods</option></select> <label id="aria-select-cuisine" class="aria-label">Select filter by cuisine</label> <select id="cuisines-select" aria-labelledby="aria-select-cuisine" name="cuisines" onchange="updateRestaurants()"><option value="all">All Cuisines</option></select></div><ul id="restaurants-list"></ul></section></main><footer id="footer">Copyright (c) 2018<br><a href="/"><strong>Restaurant Reviews</strong></a><br>All Rights Reserved.</footer><script type="text/javascript" sec="js/idb.js"></script><script type="application/javascript" charset="utf-8" src="js/dbhelper.js"></script><script type="application/javascript" charset="utf-8" src="js/main.js"></script><script async defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD1aTdv0wLnDD_CvnEokElxVicSZxl4IrM&libraries=places&callback=initMap"></script></body></html>