WSI Project 2

Be sure to FORK and CLONE a copy from GitHub account.

Team Members

• Emma Prager (@eprager)
• Sneha Rajulapally (@Sneha)
• Kinza Haque (@Kinza)
• Alison McDonald (@Alison)

National Park Finder

Below is the functionality documentation for our Project that includes commands to run JSDocs and ESLint

HTML:

• index.html -- HTML page for location and radius filters utilizing progressive disclosure
• results.html -- HTML page for advanced filters (activities, interests) and results (map, park information list).

CSS:

• common.css, reset.css -- Both stylesheets are used within both index and result HTML pages
• results.css -- Styling for only the results HTML page
• screen.css -- Styling for only the index HTML page

JavaScript:

• search.js -- JavaScript for functionalities related to filters and list results
• map.js -- JavaScript for functionalities related to map (locate user’s current location or input location) and parks

APIs:

1. Google Maps API

• Get Geolocation

2. National Park Service API

• Get Park information
• Get Activities
• Get Interests

Home page:(index.html)

1. Location:
User has two options:

• Input an address/place/zip code etc. (There is a tooltip for help) – Based on what user entered, calculate the latitude and longitude coordinates of the place using geocode logic and pass to mark on map in results page

• Click on the “get current location” button- Calculate the latitude and longitude coordinates of the place using geocode logic and do a reverse geocode to get the address of the coordinates and display it on the location placeholder.

  API used: Google Map API

Progressive disclosure: Radius filter is disclosed only when the user inputs value in the Location placeholder.

2. Radius:
Defaulted to <50 miles. Users must select the radius from dropdown with a range from <10 miles to >300 miles.

3. Search Button:
Pass location coordinates and radius to results page.

4. Clear Button:
Resets the location and radius place holders.

Results page:(results.html)

Advanced Filters:
Users can use the advanced filters- activities and interests to display more specific map and list results.

API used: National Park Service API
1. Activities:
Checkbox dropdown with activity names fetched from NPS website. The JSON data for activities names and ids were pulled using the XMLHttpRequest GET request.
API used: https://developer.nps.gov/api/v1/activities?activitiesCode=acad&api_key=

2. Interests:
Checkbox dropdown with interests’ names fetched from NPS website. The JSON data for interest names and ids were pulled using the XMLHttpRequest GET request.
API used: https://developer.nps.gov/api/v1/topics?topicsCode=acad&api_key=

Results:
APIs' used: Google Map API, National Park Service API

3. Map:
The location coordinates from the index page are passed to the map on the results page, which marks the location of the user in the map (Blue star marker).
API used: https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

4. List Results:
Park information such as park name, park description, park location and park distance from user's location are displayed based on the user's location and radius from the index page. The JSON data for park name, individual park links, park description, and state location, were pulled using the XMLHttpRequest GET request.
API used: https://developer.nps.gov/api/v1/parks?parkCode=acad&api_key=

Advanced filter options (activities and interests) are used to get more specific results.

JSDocs:

• Reference:
  https://jsdoc.app/

• Vscode installation:
  npm install -g jsdoc

• Configuring JSDoc with configuration file:
  https://jsdoc.app/about-configuring-jsdoc.html

• Run the JSDocs: npm run docs
  Run the command http-server from the out directory, and you can visit http://localhost:8080 to view your documentation page.

• Update the JSdoc:
  Run command jsdocs ./

ESLint:

• Reference:
  https://eslint.org/

• Vscode installation:
  npm install eslint

• Setup:
  

1. https://eslint.org/docs/user-guide/getting-started
2. https://github.com/karlstolley/eslint-config

• Run the ESLint:
  Run commands:
  npx eslint -c conf.eslint.json config.js
npx eslint -c (json file) (js file)
map.js --fix