diff --git a/assets/002-globe.png b/assets/002-globe.png new file mode 100644 index 00000000..4df57073 Binary files /dev/null and b/assets/002-globe.png differ diff --git a/index.css b/index.css new file mode 100644 index 00000000..1e3dea26 --- /dev/null +++ b/index.css @@ -0,0 +1,61 @@ +body { + display: grid; + grid-template-columns: 1fr 1fr; + /* font-family: 'Courier New', Courier, monospace; */ + font-family: 'Varela', sans-serif; +} + +header { + text-align: center; + grid-column-start: 1; + grid-column-end: 3; + font-family: 'Permanent Marker', cursive; + padding: 15px; +} + +header h1 { + font-size: 4em; +} + +header h2 { + font-style: italic; + font-size: 3em; +} + +footer { + grid-column-start: 1; + grid-column-end: 3; + padding-top: 10px; +} +#trip-list, #load-trips { + grid-column-start: 1; + grid-column-end: 2; + list-style-type: none; +} + +#trip-list { + min-height: 500px; +} + +#trip-details { + grid-column-start: 2; + grid-column-end: 3; + list-style-type: none; +} + +#trip-details li{ + padding: 5px; +} + +#load-trips, #trip-list .btn { + margin: 10px; +} + +#trip-list .btn { + text-align: left; +} + +#load-trips { + width: 12em; +} + diff --git a/index.html b/index.html new file mode 100644 index 00000000..2bbf183e --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + Trek + + + + + + + + + + +
+

Trek Trips

+

Your Adventure Awaits

+
+
+ +
+
+ + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..046243cf --- /dev/null +++ b/index.js @@ -0,0 +1,124 @@ +const BASE_URL = 'https://trektravel.herokuapp.com/trips'; + +const displayStatus = (message) => { + $('#status').html(message); +} + +const reportError = (message, errors) => { + let content = `

${message}

"; + displayStatus(content); +}; + +const loadTrips = () => { + displayStatus("Loading trips..."); + + axios.get(BASE_URL) + .then((response) => { + const trips = response.data; + displayStatus(`Successfully loaded ${trips.length} trips`); + trips.forEach((trip) => { + + $('#trip-list').append(`
    • `); + }); + }) + .catch((error) => { + displayStatus(`Encountered an error while loading tips: ${error.message}`); + }); +} + +const buildSubmitHandler = (tripId) => { + + const handleSubmit = (event) => { + + event.preventDefault(); + const reservationData = readFormData(); + + displayStatus('Reserving trip...'); + console.log('reservationdata is', reservationData) + + axios.post(`${BASE_URL}/${tripId}/reservations`, reservationData) + .then((response) => { + console.log('posted res data', response); + displayStatus(`Successfully created a reservation with ID:${response.data.id}`); + clearForm(); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportError( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + console.log(error) + } else { + displayStatus(`Encountered an error: ${error.message}`); + } + }); + } + return handleSubmit; +} + +const showTripDetails = (tripId) => { + axios.get(`${BASE_URL}/${tripId}`) + .then((response) => { + const trip = response.data; + displayStatus('Successfully loaded trip'); + $('#trip-details').empty(); + $('#trip-details').append('

    Trip Details

    '); + $('#trip-details').append(`
  • Name: ${trip.name}
    • `); + $('#trip-details').append(`
  • Continent: ${trip.continent}
    • `); + $('#trip-details').append(`
  • Category: ${trip.category}
    • `); + $('#trip-details').append(`
  • Cost: $${trip.cost}
    • `); + $('#trip-details').append(`
  • About: ${trip.about}
    • `); + $('#trip-details').append(`
    +

    Reserve a Spot on ${trip.name}

    +
    + + +
    +
    + + +
    + + +
    `) + $('#trip-form').submit(buildSubmitHandler(trip.id)); + + }) + .catch((error) => { + displayStatus(`Encountered an error while loading trip: ${error.message}`); + console.log('The error was this:', error); + }); +} + +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#trip-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#trip-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; +}; + +const clearForm = () => { + $(`#trip-form input[name="name"]`).val(''); + $(`#trip-form input[name="email"]`).val(''); +} + +$(document).ready(() => { + $('#load-trips').click(loadTrips); + $('#trip-list').on('click', 'button', function (event) { + const tripId = event.target.id; + showTripDetails(tripId); + }); +}); \ No newline at end of file