diff --git a/README.md b/README.md index 349d91e2..2d710964 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ TREK is an application that displays information on travel packages and allows u This is a [stage 2](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) individual project. -The project is due **Tuesday May 29th before 9am**. +The project is due **Tuesday May 29th before 9am**. ## Learning Goals diff --git a/images/background.png b/images/background.png new file mode 100644 index 00000000..4d3908b7 Binary files /dev/null and b/images/background.png differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..1678b7ec --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + Trek + + + + + +
+

Trek the World

+ +
+ +
+ +
+
+ + + + + + + + +
Trip IdTrip Name
+
+ +
+ + + + + + + +
+ Trip Details +
+ + + +
+
+ + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 00000000..074cb653 --- /dev/null +++ b/style.css @@ -0,0 +1,45 @@ +.trip-details cell medium-8 medium-cell-block-y { + +} + +body { + text-align: center; + padding: 2rem; + height: 100%; + background-image: url('images/background.png'); + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + +#status-message { + font-size: 1rem; + color: white; + padding-bottom: 20px; +} + +h1 { + font-size: 4rem; + color: #077b93; +} + +th { + color: #077b93 +} + +.button { + font-size: 1rem; + background-color: #077b93; + margin: 15px; + padding: 10px; +} + +footer { + color: white; + padding: 20px 0 10px 0; +} + +.submit-container { + color: #077b93 +} diff --git a/trek.js b/trek.js new file mode 100644 index 00000000..a78c3d9d --- /dev/null +++ b/trek.js @@ -0,0 +1,108 @@ +const URL = 'https://ada-backtrek-api.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +// LOAD TRIPS +const loadTrips = () => { + const tripsList = $('#tbody'); + tripsList.empty(); + + reportStatus('Loading trips! Please wait...'); + $('#table').show(); + + axios.get(URL) + .then((response) => { + response.data.forEach((trip) => { + tripsList.append(`${trip.id} + ${trip.name}`); + }); + reportStatus('Trips Loaded!'); + }) + .catch((error) => { + reportStatus('Error: ${error.message}'); + }); +}; + +// LOAD ONE TRIP + +const loadTrip = (id) => { + const tripInfo = $('#trip-info'); + tripInfo.empty(); + const reservationForm = $('#reservation-form'); + reservationForm.empty(); + + reportStatus('Loading trip info! Please wait...'); + $('#details').show(); + + // GET TRIP DETAILS FROM API + + axios.get(URL + `/${id}`) + .then((response) => { + // console.log(response); + tripInfo.append(`Name: ${response.data.name} + Trip ID: ${response.data.id} + Continent: ${response.data.continent} + Category: ${response.data.category} + Weeks: ${response.data.weeks} + Cost: ${response.data.cost.toFixed(2)} + About:
${response.data.about}`); + reportStatus('Trip Info Loaded!'); + reservationForm.append(`
+ +
`); + reservationForm.append(`
+ + +
+
+ + +
+
+ +
`); + + }) + .catch((error) => { + reportStatus('Error: ${error.message}'); + }); + }; + + //RESERVE TRIP + +const reserveTrip = (id) => { + reportStatus(''); + reportStatus('Reserving The Trip...'); + + let userData = { + 'name': $('input[name="user-name"]').val(), + 'email': $('input[name="email"]').val(), + }; + + axios.post(URL + `/${id}/reservations`, userData) + .then((response) => { + reportStatus(`Successfully reserved this trip with the name ${response.data.name}`); + }) + .catch((error) => { + reportStatus(`Encountered an error: ${error.message}`); + }); + + $('input[name="user-name"]').val(''); + $('input[name="email"]').val(''); + }; + + // ACTION +$(document).ready(() => { + $('#load').click(loadTrips); + $('#tbody').on('click', 'tr', function () { + let id = $(this).attr('id'); + loadTrip(id); + }); + + $('#reservation-form').on('click', '.reserve', function () { + let id = $(this).attr('id').substr(7); + reserveTrip(id); + }); + });