vloebel / visitamerica

Visit America (formerly "Happy Camper") delivers the wonders of the National Park Service by providing info about parks, monuments, public campgrounds, visitors centers, and links to public webcams.

07 Group Project: Visit America

University of Arizona Bootcamp

February 3, 2021

Developers:

• Vicky Loebel: Project manager, Design, JavaScript, HTML, CSS, Documentation
• Stephanie Giel: Design, JavaScript, APIs, HTML, CSS
• Cori Cathemer: Design, HTML, CSS
• Jennifer Molina: HTML, Testing

application URL: vloebel.github.io/VisitAmerica

Modification History

• 20201-10-25 Renamed repo to Visit America

Notes:

repo/application name will be changed from "happy camper" to "Visit America" after class presentation.

Overview

Visit America delivers the wonders of the National Park Service by providing information about the national parks and monuments in the united states. Selecting a park displays a page of information about its visitor's center, public campgrounds, and a link to the webcam for that park if one exists. The page also displays the park's five-day weather forecast. The user's most recent searches are saved in local-storage.

APIs Used

• National Park Service Developer Resources
  • Park information, webcam links
• Mapbox Maps Service
  • Map display
• Open Weather One Call API
  • five-day forecast based on park lat/long

Libraries Used

• Materialize
  • HTML/CSS Framework
• fonts.googleapis
  • Materialize fonts
• Moment.js
  • Date fetch and manipulation
• jQuery
  • Materialize initializations
• font-awesome
  • icon fonts

Requirements

• Design must be mobile-first and display properly on any size screen
• Viewing the home page presents a short introduction to the application, a menu for selecting a state, and a list of previously viewed parks if available.
• Selecting a state displays a list of the parks in that state.
• Clicking a park opens a second web page displaying:
  • Park name
  • An image taken from the park API
  • A map generated from the park's latitude and longitude
  • A clickable button that links to the park's webcam
  • Public campgrounds associated with the park
  • Five-day weather forecast based on the parks' lat & long
• If no data available (for example, no campground information)
  • Display for that information will be hidden
  • Message indicating there's no information available will be displayed

Screen Shots

Desktop UI Main Page

Page 2: Park Information

Top screen shot

Screen after scrolling down

Top of page 2 on small screen

Screen shot of middle of page 2 on small screen

Weather cards on page 2 small screen

visitamerica's Issues

cjsv: New name for product

Client is not satisfied with product name. Please brainstorm a new name

CC: improve hover and styling on page1 - add description

Implement your suggestion of having a heading under the "header" that provides a brief intro to the application. Continue with ongoing css improvements - check with Vicky about breakpoints needed for page 2

cc: Create css to add onhover styling to park lists

Add classes to the "park-list" and the "park-history" unordered lists so they will have onhover styling.

vl: hide empty headers - put mediaquery on weather cards to control size

Add display divs that will show/hide "not available" headings and messages if campground, weather, or visitor center info not available. FIX the height issue on weather cards - currently as screen resizes they change height at different times - Look into controlling this with breakpoints.

SG: Move webcam button to nav bar/was: add webcam button

Your suggestion of including a webcam meets with enthusiastic approval!

CC: Design area to display park or visitor center photo in index2

Stephanie is returning photos for some of the visitors centers. Possible put these on page2? They will need to be resized to fit a standard "container". Also there is a "responsive image" attribute in materialize we might want to use?

cc: Update front page style

experiment with aesthetic updates to front page styling

SG: Display state name on return from search

On return from search we are currently displaying the state abbreviation instead of full state name.

VL: add park results to index.html

go go go