diff --git a/index.css b/index.css new file mode 100644 index 00000000..ce8ac487 --- /dev/null +++ b/index.css @@ -0,0 +1,34 @@ +#Trek { + display: flex; +} + +#trekInfo{ + width: 300px; +} + +#trekReservation { + max-width: 400px; + margin-left: 1em; +} + +#trekList{ + width: 350px; + margin-right: 1em; + margin-left: -20px; +} + +body{ + margin: 3em; +} + +ul { + list-style: none; +} + +li { + font-size: 1.5em; +} + +.text-white:hover { + color: rgb(163, 255, 132)!important; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..061b0ff5 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + Trekking Trips + + + + + + + + +
+ +
+
+

Trek

+ +
+
+
+
+
+
+ + diff --git a/index.js b/index.js new file mode 100644 index 00000000..63505e93 --- /dev/null +++ b/index.js @@ -0,0 +1,141 @@ +const URL = 'https://trektravel.herokuapp.com/trips/'; + +const reservationForm = trip => { + return `

Reserve a Spot on ${trip.name}

+
+
+ + +
+
+ + +
+ + `; +}; + +const tripSummary = trip => { + return `

Trip Details

+

Name:

${trip.name}

+

Continent:

${trip.continent}

+

Category:

${trip.category}

+

Weeks:

${trip.weeks}

+

Cost:

${trip.cost}

+

About:

${trip.about}

`; +}; + +// adapted/learned from https://flaviocopes.com/how-to-uppercase-first-letter-javascript/ +String.prototype.capitalize = function() { + return this[0].toUpperCase() + this.slice(1, this.length); +}; + +const confirmation = (tripConfirmation, tripName) => { + return `

${tripConfirmation.name.capitalize()}, your trip has been booked!

+

Confirmation ID: ${tripConfirmation.id} for Trek to ${tripName}

`; +}; + +// adapted from class live code +const readDataForm = (email, name) => { + return { email: email, name: name }; +}; + +// adapted from class live code +const reportStatus = message => { + $('#statusMessage').html(message); +}; + +// adapted from class live code +const reportApiError = error => { + let errorHtml = `

${error.message}

'; + reportStatus(errorHtml); +}; + +const onClick = function(action, listener) { + listener.click(action); +}; + +const postReservation = trip => { + $('#tripReservation').remove(); + $(`#trekReservation`).append(`
`); + const reservation = $('#tripReservation'); + reservation.empty(); + reservation.append(reservationForm(trip)); + handleReservation(trip); +}; + +const handleReservation = trip => { + const reservation = $('#tripReservation'); + $('form').submit(function(event) { + event.preventDefault(); + const reservationData = readDataForm( + event.target[1].value, + event.target[0].value + ); + axios + .post(`${URL + trip.id}/reservations`, reservationData) + .then(response => { + reservation.empty(); + reservation.append(confirmation(response.data, trip.name)); + }) + .catch(error => { + reportApiError(error); + }); + }); +}; + +const getTrips = () => { + reportStatus('Loading trips...'); + const list = $(`#trekList`); + list.empty(); + list.append(`