Giter VIP home page Giter VIP logo

state-park-excursion's Introduction

Description

Is it time to get outside, but you're not sure where to go? Do you need to "touch grass" but need some inspiration? Explore our U.S. National Park system! Here, you can get crucial park information on how to plan ahead for your future visit or run out the door right now. Discover pertinent travel details right from where you are.

The motivation behind this project is to help people who live in or who visit the United States connect (or reconnect) with the great outdoors. Travelers from abroad, newly settled families, and even established folks oftentimes shy away from the amazing natural world right at our fingertips despite wanting to go on an excursion.

This project was founded by three creators: Mia, Mike, and Josh. We learned how to better follow Agile workflow. We learned the importance of staying in touch and maintaining open lines of communication. It was crucial to meet in person at times and work in tandem. We also learned how to plan, organize, and execute stages of a larger project as well as how to look out for interdependencies. Lastly and very importantly, we delved deeper into understanding GitHub workflows:

  • creating new branches and setting upstream
  • opening PRs
  • testing and reviewing code before approval
  • adding comments into reviews
  • merging branches
  • resolving merge conflicts locally

Table of Contents (Optional)

Installation

N/A. Deployed site here!

Usage

The opening screen welcomes users to explore United States National Parks. The navigation sidebar contains controls while the main page shows a carousel of enticing nature-filled images from the nation's parks.

As the user reads the page, they are alerted with a tooltip on a button to first save their map key supplied by Google Maps.

To use:

  1. Type or paste in a Google Maps API key into the input field then click "Save." This box should disappear from view once the key is saved. NOTE: If a mistake is made, you can refresh the page to return this box to view and input a new key.
  2. Now that a Google Maps API key is saved, return to the top of the navigation sidebar.
  3. Input a starting address.
  4. Select a state of interest.
  5. Select a park of interest.
  6. Click "GO" to open up a map and access more info!
  7. After viewing the map and manipulating it as desired, click the "More Details" button for details on the park and travel.

Search in any park and any state, just be sure to add in your starting address!

The main page looks like this:

hazy green background and lichen-pink navbar surrounds a carousel of outdoorsy images

Roadmap

Content will be added and adjusted as new coding projects are available! Some projects may phase out over time as my work becomes more specialized. Some desired features and functionality to be added in the future:

  • refactor of UI that controls adding the Google Maps API key
    • hide after key is saved
    • check that key is valid before hide
  • search history feature for easy access to most recent searches
  • add in more park details to explore (videos, battles and history, etc.)
  • persistent home/starting address for travel so user no longer needs to retype address repeatedly

Credits

Documentation referenced:

  • Mozilla Developer Network
  • Materialize CSS & Materialize JS
  • National Parks Services API
  • Google Maps Directions API
  • Stack Overflow forums
  • W3 Schools

Tutorials referenced:

  • Web Tech In Depth on YouTube - initializing a Materialize CSS select option menu
  • {RhymBil} on YouTube - accessing array of objects from localStorage
  • Sam Codes on YouTube - Google Maps Directions API help

Tutor(s):

U. Penn Bootcamp group project members:

U. Penn Bootcamp instructors:

Artist(s):

  • Color palette by dhzuehlke on ColourLovers.com
  • Jamie Street on Unsplash.com - photograph entitled "Compass overlooking the valley below"
  • Chris Lawton on Unsplash.com - photograph entitled "Let the adventures begin"
  • Kal Visuals on Unsplash.com
    • photograph entitled "Maps are greater than phones"
    • photograph entitled "Planning the day at Crater Lake National Park"
  • Josh Carter on Unsplash.com - photograph entitled "National parks patches"

License

Please refer to the LICENSE in the repo.

state-park-excursion's People

Contributors

jsr5404 avatar miacias avatar mikestem avatar

Stargazers

 avatar

Watchers

 avatar

Forkers

jsr5404 mikestem

state-park-excursion's Issues

Making plans

INFORMATION TO GATHER:

  • national parks API: national parks by name, visitor center address, contact info, and hours, (and activities)
  • google maps API: directions

USER STORY

As a user who wants to visit National Parks,
I WANT to know about the distance and travel route to get there and park hours (hiking trails and amenities)
SO THAT I CAN plan trip efficiently to visit each one (and what I can do)

ACCEPTANCE CRITERIA

WHEN I input my home/starting address
THEN I can save my location

WHEN I search national park by name
THEN I get the visitor center information: hours and address

WHEN I choose a national park and have a saved address
THEN I can view the map with a route to the park (travel distance/time)

WHEN I search for a park
THEN I can retrieve the search again in my search history

(2. WHEN I ???
THEN I get an alert about safety/hazard conditions)

(3. WHEN I choose a tour
THEN I can save it to my tours list and retrieve later)

functionality big picture (plan)

plan JS functions, variables, and event listeners.

  1. try to conceptualize data needed
  2. how to handle it
  3. how to attach it to the page

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.