Las Vegas Diamond Hotels Map

Web app to display a selection of Las Vegas hotels inspected and rated by AAA, which uses the Diamond Rating system.

Features

• Mobile first design
• Filter by hotel name
• Filter by diamond rating
• Hotel reviews from Yelp
• Hotel tweets from Twitter

Online Demo

http://m-coding.github.io/fe-05-1-hotels-map/

How to Run

Build Requirements

1. Node.js
2. Gulp
3. Your own Google Maps API key

Build Project

1. Open public/src/index.html and replace ?key=APIKEY with your own Google API key to the maps.googleapis.com script
   • Google made changes to their Map API that now requires a billing account. Please do not use my account!
2. Navigate to the root of the project directory (where the gulpfile.js is located)
3. In your terminal enter the command: npm install, this will install all modules listed as dependencies in package.json
4. Enter the command gulp clean to delete everything in the dist folder.
   • If you want to preview what files will be deleted, enter the command gulp cleanDryRun instead.
5. Next enter the command gulp and the project will be built in the dist folder.
   • You can review differences by comparing the src and dist folder.

Documentation

• Generated by JSDoc public/docs/jsdoc
• Generated by Docco public/docs/docco

Notes

Dependencies

• Firebase – Remote host where hotels.json is stored
• KnockoutJS – Model-View-ViewModel Framework
• Google Maps – Maps API used to display map
• OAuth Signature Generator – Javascript library to make OAuth requests No longer used since v6.0.0
• Yelp – Yelp API to display hotel image and review
• Twitter – Twitter API to display a hotel's recent tweets

CSS

• normalize.css – Used for base reset
• animate.css – Used for slide in and slide out animations
• CSS Loading Spinner – Used for circle loading spinner for map and yelp api
• Off Canvas Menus – Reference used when I created the filter menu

Map API

• Google Map Files – Alternative map marker images

Yelp API

• Display Requirements – Developer page for Yelp branding images
• yelp-fusion/fusion/php/sample.php - Yelp api.php was based on Yelp's PHP code sample

Twitter API

• Application-only authentication – Method used in api.php to connect to Twitter's API
• statuses/user_timeline – Returns a collection of the most recent Tweets posted by a user

JSONP AJAX

• jsonp.js – Lightweight JSONP library for cross-domain ajax calls. Method used to connect to Yelp's API. No longer used since v6.0.0

XMLHttpRequest

• XMLHttpRequest advanced features – Lists which browsers support XHR2 spec
• Vanilla Ajax without jQuery – Nice guide
• InvalidStateError raised when setting XMLHttpRequest.responseType – Useful Bugzilla note to set the responseType after calling .open()
• Test JSON support for responseType – Useful info for testing
• HTTP access control (CORS) – Good MDN doc for setting up CORS
• Setting CORS (cross-origin resource sharing) on Apache – Helpful article for setting up my .htaccess to allow CORS

XMLHttpRequest with Promises

• JavaScript Promises: an Introduction - Good guide by Google
• Promise-based XHR - xhrPromise.js inspired by this
• How do I promisify native XHR? - Example that also passes parameters
• Handling Multiple JavaScript Promises Even if Some Fail - How to use Promise.all
• Promise.all find which promise rejected - How to get the index of a failed Promise
• ES6 Promises: Patterns and Anti-Patterns - Great code examples

Fonts

• Fontello – Icon generator. Used for arrow, info, hamburger, and info icons.
• MyFonts – Free font Ayita Pro SemiBold. Used this font for the headings.

Change Log

• All commits
• All releases