This application allows a user to organize a camping trip. The webpage allows a user to input their name, start and end dates for the trip, and a destination (Town, State) and, once submitted, displays a trip planning interface. Users can add other cmapers to the attendee list, add items to-be-packed to a collective packing list, and assign to-be-packed items to individual attendees by dragging the items from the collective packing list and dropping the items into an individual's packing list area. The webpage also displays current weather information (temperature, humidity, sunrise and sunset times) as well as local trail information for the user's input location.
Splash screen, where user completes form:
Main screen, where user can add/move items into different packing lists or the trash:
| Specification | Example Input | Example Output |
|---|---|---|
| Webpage allows trip organizer to input start date, end date, location, and their name | "Patrick", "Feb. 20, 2020", "Feb. 22, 2020", "Government Camp, OR" | starts new trip page with trip organizer's name in a card, and date and location in jumbotron |
| Webpage prevents user from submitting form on splash screen when the input end date is before the input start date | Start date: "Feb. 20, 2020", End date: "Feb. 18, 2020" | Modal pops up for 2 seconds instructing user to choose different dates |
| Webpage prevents user from submitting form on splash screen when the input start date is before the current date | Start date: "Feb. 5, 2020" | Modal pops up for 2 seconds instructing user to choose different dates |
| Webpage allows a user to add other users to a camping trip attendee list by inputting camper's name and clicking "Add camper" button | user types "Matt" into camper's name field and clicks "add camper" | Webpage forms separate card with header text "Matt" |
| Webpage allows a user to remove any user except for trip organizer by clicking in the card header for that user's packing list | user clicks anywhere in card header of an attendee | Webpage deletes card for attendee |
| Webpage allows users to add known items to packing list from drop-down menu | user selects "firewood" then clicks "Add" button | firewood icon is shown in the collective packing list area |
| Webpage allows users to add custom items to collective packing list area by entering item name in a text box | user enters "harpoon gun" and clicks "Add" | icon with text "harpoon gun" appears in collective packing list area |
| Webpage allows users to drag items from the collective packing list area and drop the items into the user's own personal card | Patrick moves "harpoon gun" to card named "Patrick" | "Harpoon gun" icon displayed on Patrick's card |
| Webpage allows users to continuously move items between users' cards | Patrick moves "tent" icon from Matt's card to Patrick's card | "tent" icon is removed from Matt's card and appears in Patrick's card |
| Webpage displays current temperature for input location in jumbotron of main page after user submits splash screen form | "Bend, OR" | 37 degrees F |
| Webpage determines list of trails nearby user's input location | "Portland, OR" | wildwood trail, etc. displayed in trail info box on right side of main page |
| Webpage displays error message if API call for locating nearby trails fails | 400-level response status | "There was an error retrieving nearby trails." |
| Webpage displays error message if API call for locating nearby trails does not return any results within 160 miles | Mongolia | "There were no trails found within 160 miles of your search location." |
| Webpage increases search radius for locating nearby trails if there are no results within 10mi of initial input location | "John Day, OR" | displays list of trails ~ 100mi away from John Day, OR in trail info box |
| Webpage displays list of trails in order of most popular to least popular | user enters location for trip and submits form | most popular to least popular nearby trails are displayed in trail info box |
| Webpage allows user to click on any listed trail to display more details about the clicked trail | user clicks "wildwood trail" | webpage displays difficulty, ascent, descent, etc. on right side column of trail info box |
| Webpage displays more detailed weather information in weather info box below trail info box | user inputs "Bend OR" and submits form on splash screen | "Current weather in Bend, OR: Current temperature: 29.91°F ( feels like 21.63°F), Humidity: 47%, Conditions are clear. Sunrise: 06:59:00, Sunset: 17:39:00" |
| Webpage allows user to move an item with a box class over a trash icon, and remove the item from display ondrop | user moves tent icon to trash icon | tent icon removed from display |
We defined the minimum viable product (MVP) for this application as a webpage that allows a user to enter their name, a start and end date for a trip, and a trip location (e.g., Town, State) into a form and then receive a visually pleasing drag-and-drop interface to coordinate a packing list for the trip. The interface would allow the trip organizer to add campers to the trip and add items to be packed to a collective packing list. The interface would also, at a minimum, include designated areas for collective shared items to be packed, individual list areas for each camper, and the ability to drag items from the collective shared items area to an individual list area. The MVP also included incorporating trail information for trails nearby the user's input trip location, using the Hiking Project Data API.
We defined various stretch goals for our project, including:
- using the Open Weather Map API to display weather information (temperature, sunrise/sunset times, etc.) for the user's input trip location. We accomplished this stretch goal, but the API currently retrieves current weather rather than weather for the user's input dates. Retrieving weather for a specified date range is a paid service of the Open Weather Maps API that we did not invest in for this project, but could be easily integrated.
- figuring out a local storage option, so that a user could save a trip's information and return to it later (e.g., anytime before cache is cleared) rather than planning a whole trip in one sitting. A stretch strech goal of this concept would be to allow users to contribute to the list from separate computers (e.g., each camper can sign into a trip once added, then contribute to trip planning simultaneously). Current status: when a user starts a trip (upon splash screen form submission), adds a new attendee, or clicks the "finalize trip" button, all camper names and items within the campers' respective cards is stored in local storage.
- sending an email to each camper confirming their packing list once the trip packing is finalized (e.g., after a user clicks a "finalize trip" button on the main page)
- incorporating the ability to delete campers and items once added. Current status: we added functionality to delete items from the page by dragging the item over a trash icon. We also added the ability to delete a camper (except the trip organizer, who is not able to be deleted) by clicking anywhere in the card header for the to-be-deleted camper. Deletion of a camper is permitted once all items in that camper's card are removed, otherwise a modal appears instructing users to remove items before deleting the camper.
If Homebrew is not installed on your computer already, then install Homebrew by entering the following two commands in Terminal:
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"$ echo 'export PATH=/usr/local/bin:$PATH' >> ~/.bash_profile
Install Git with the following command:
$ brew install git
Next, install Node.js by entering the following command in Terminal:
$ brew install node
Please visit the Node.js website for installation instructions.
Clone this repository via Terminal using the following commands:
$ cd desktop$ git clone https://github.com/michelle-morin/camping$ cd camping
Confirm that you have navigated to the camping directory (e.g., by entering the command pwd in Terminal). Next, add a file named .env to project root directory (e.g., by entering the command touch .env in Terminal).
- Make an API key for the Hiking Project Data API by navigating to the linked website and clicking "sign up of login to get an API Key"
- Store your API key for the Hiking Project API in first line of the .env file in the following format: API_KEY = {replace curly braces and this text with your API key}
- Make an API key for the OpenCage Geocoding API by navigating to the linked website and selecting "sign up for your free API key" under QuickStart.
- Store your API key for the OpenCage Geocoding API in second line of the .env file in the following format: GEO_API_KEY = {replace curly braces and this text with your API key}
- Make an API key for the Open Weather Maps API by navigating to the linked website and selecting "sign up."
- Store your API key for the Open Weather Maps API in third line of the .env file in the following format: OPNW_API_KEY = {replace curly braces and this text with your API key}
Next, install node package manager (npm) at the project's root directory via the following command:
$ npm install
Open this application via live server using the following command:
$ npm run start
To view/edit the source code of this application, open the contents of the camping directory in a text editor or IDE of your choice (e.g., to open all contents of the directory in Visual Studio Code on macOS, enter the command code . in Terminal).
- Git
- HTML
- CSS
- JavaScript
- jQuery
- npm
- Webpack
- Hiking Project Data API
- OpenCage Geocoding API
- Open Weather Maps API
If you have any requests for features or find a bug, please submit a pull request.
This webpage is licensed under the MIT license.
Copyright (c) 2020 Michelle Morin, Patrick Kille, Matt Taylor, Joseph Wangemann, Alex Skreen