diff --git a/index.css b/index.css new file mode 100644 index 00000000..e69de29b diff --git a/index.html b/index.html new file mode 100644 index 00000000..fa5ebb89 --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + Document + + + + + +

TREK... TODAY!

+ +
+ + + +
+ +
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..ef20656d --- /dev/null +++ b/index.js @@ -0,0 +1,73 @@ +const URL = "https://trektravel.herokuapp.com/trips/"; + +// const ATRIPID = 'https://trektravel.herokuapp.com/trips/'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(URL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + tripList.append(`

${trip.name}

`); + + const showTripDetails = (trip) => { + const pleaseWork = () => { + console.log("showing details for trip", trip.id); + const tripEach = $('#trip-details'); + tripEach.empty(); + + axios.get(URL + trip.id) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.id} trips`); + tripEach.html( + `

Trip Details

Name: ${response.data.name}

Continent: ${response.data.continent}

Category: ${response.data.category}

Weeks: ${response.data.weeks}

Cost: ${response.data.cost}

About:

${response.data.about}

` + ) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }) + }; + return pleaseWork; + }; + const thisTrip = showTripDetails(trip) + $('p:last').click(thisTrip) + }) + }) + } +const displayStatus = (message) => { + $('#status-message').html(message); +} + +const handleApiError = (error) => { + console.log("encountered error when posting", error); + + let errorHtml = `

${error.message}