/restaurant-reviews-app

Application that utilizes the Google Maps API, allowing users to see reviews of several restaurants in NYC!

Primary LanguageJavaScript

Restaurant Reviews - NYC

---> Author: Zach Mathson

Overview

---> This was a project for the Udacity Front End Web Developer Nanodegree. This app uses the Google Maps API to offer users an interactive map with information on various different restaurants in the NYC area! The required tasks for this project were as follows:

  1. Convert the provided site to use a responsive design.
  2. Use appropriate document type declaration and viewport tags.
  3. Use media queries that provide fluid breakpoints across different screen sizes.
  4. Use responsive images that adjust for the dimensions and resolution of any mobile device.
  5. Implement accessibility features in the site HTML (most of this HTML is generated by JavaScript functions).
  6. Add a ServiceWorker script to cache requests to all of the site's assets so that any page that has been visited by a user will be accessible when the user is offline. Only caching needs to be implemented, no other ServiceWorker features.

Preview

rest-reviews

How To Run - VERY IMPORTANT

---> DOWNLOAD PROJECT FILES

---> AS NEEDED, CHECK THE VERSION OF PYTHON YOU HAVE WITH: python -V

---> VERY IMPORTANT TO REMEMBER:

  1. In order for the project and all of it's files to load correctly, you must go into the 'dbhelper.js' file and change the '8000' on line 7 to the the port you wish to load the project in. Failing to do so will result in the page loading, but lacking key content.

---> Once you have completed the previous step:

---> Cd to the project directory in your terminal

---> FOR PYTHON 2.X: 'python -m SimpleHTTPServer 9876' (current state - 9876)

---> FOR PYTHON 3.X: 'python3 -m http.server 9876' (current state -9876)

---> This will open the project at the localhost port you chose!

---> Have fun!

Functionality

  1. Navigate around the Google Maps API checking out the restaurant reviews.
  2. To expand the information on each restaurant simply just click on the desired one.
  3. Zoom in/out on map using (+ / -) feature at the bottom right of the Google Maps API integration.