README

Udacity Full Stack Web Developer Nanodegree program

Project 5. JavaScript Map

Brendon Smith

br3ndonland

Table of Contents

• Description
• Contents
• Code

Description

Boston's finest coffee, brought to you by Foursquare and Google Maps.

• This is a single-page web application that displays "Boston's best beans," a list of specialty coffee shops in the Boston area. A GitHub Pages site is provided to run the application online. To run the application locally, simply clone or download the repository and open index.html in a web browser.
• The Google Maps Platform is used to generate a map in index.html. A style selector allows the user to change the map style to suit their preferences.
• The location list is retrieved from the Foursquare API using JavaScript with Fetch and async/await in index.js. Errors are handled with a try/catch block.
• Clicking the hamburger icon ☰ in the header opens a side navigation menu with the list description and locations. Each location is linked with its corresponding map marker.
• Clicking on a location, either in the side navigation menu or on the map marker, causes the marker to bounce, and opens an info window displaying data on the location from Foursquare.
• Selecting a city from the dropdown menu filters the markers and location list by the selection. The markers are filtered by the Google Maps 'change' event listener, and the location list is filtered by toggling the CSS display: none class with viewModel.toggleList().
• Babel provides browser back-compatibility.

Contents

• info
  • img: Images used in the info directory.
  • map-methods.md: Computational narrative describing how I built the application.
  • map-udacity-docs.md: Udacity project description and rubric.
  • map-udacity-review.md: Udacity code review.
• static
  • css: Application styling.
  • img: Images used in the application.
  • js: JavaScript application code that fetches data from the Foursquare API, uses the Google Maps Platform to generate a map, and leverages KnockoutJS to manage user interactions with the webpage.
• .babelrc: Babel configuration instructions.
• .gitignore: Instructions to Git to exclude certain files from commits.
• index.html: Main webpage.
• README.md: This file, a concise description of the repository.

Code

• JavaScript:
  • JavaScript Standard Style
  • Two-space indentations, no semicolons.
  • Semicolons are syntactic clutter. Much like multivitamins, semicolons provide peace of mind while being of minimal utility. Omitting semicolons, and using ES6 features like template literals (similar to Python 3 string formatting), also allows me to easily switch between JavaScript and Python.
  • There is a StandardJS vscode extension available for linting and autoformatting.
• HTML and CSS: Two-space indentations.
• Markdown:
  • Markdown code style follows the suggestions for standardized Markdown formatting provided by markdownlint and Markdown Style Guide.
  • The vscode extension Markdown All in One is used to insert a Table of Contents after the corresponding h2.
  • Further syntactic standards:
    • Two space indentations.
    • Dashes for unordered lists.
    • The h1 first-level header is reserved for the title of the file and included on the first line, like # Title.
• Code editor
  • vscode
  • material theme palenight
  • Dank Mono font
  • Full vscode configuration is available via Settings Sync with this public GitHub gist.

(Back to top)