Group-Project-1

Team: Cesar, Melvin, Lucas, Nick

---

Hike Planning App

---

Table of Contents

• Description
• How to Use
• Screenshots
• References

---

Description

We want to design an application that takes a location from the user, and gives back an optimized hike for their desires. EXAPMLE:

The user wants a hike with low incline, easy effort

The application provides possible locations, as well as the things they should bring and prepare for to have the best time(food and water to bring, clothing, time of day, weather, animals)

Technologies

• Html
• jQuery
• Visual Studio Code
• Materialize
• Open Weather API
• Hiking Project API

Code sample - JQuery

$("#cityName").keypress(function(event) { 
	
	if (event.keyCode === 13) { 
		event.preventDefault();
		$("#cityName").click(); 
	} 
});

Code sample - AJAX to get data from the API

  $.ajax({
            url: queryUrl,
            method: "GET"
        })
            .then(function (response) {

                console.log(response);
                let tempF = (response.list[0].main.temp - 273.15) * 1.80 + 32;
                console.log(Math.floor(tempF));

                getCurrentForecast(response);

                 localStorage.setItem("lat", JSON.stringify(response.city.coord.lat));
                 localStorage.setItem("long",JSON.stringify(response.city.coord.lon));
                 var maxd = $("#distance").val();
                 localStorage.setItem("distance", JSON.stringify(maxd));
                 
                 

            });

---

Check out the Hiking Trail app!

https://lucasbryg.github.io/Group-Project-1/

User Story

AS A person who loves to hike I WANT an application that can recommend hiking trails near me SO THAT I can explore new trails as well as get a general idea of what the trail entails.

How To Use

When the application is loaded, The user will have an option to choose from hiking, biking, climbing and running trails. When the user clicks on a panel, the panal presents a short description about the trail activity as well as a link to take the user to the correct HTML page. Once the input page loads, the user is able to type in a city and the distance they're willing to travel to get to the trail. When the user clicks the search button, the table is populated with the names of the trails as well as the difficulty, distance, and location. The user can then click on a trail in the table to have another panel appear with more information about the trail.

Screenshots

• Search Card

• Current Weather Information

• 5 Days Forecast

• List of Trails

• Weather Forecast

Back To The Top

References

• w3school -- jQuery Tutorial
• Materialize -- Build fast, responsive sites with Materialize
• W3school -- The HTML DOM Element Object
• W3school -- AJAX Introduction
• Open Weather API -- Weather API
• Hiking Project API -- HikingAPI Back To The Top