diff --git a/images/erwan-hesry-166245-unsplash.jpg b/images/erwan-hesry-166245-unsplash.jpg new file mode 100644 index 00000000..d95185fd Binary files /dev/null and b/images/erwan-hesry-166245-unsplash.jpg differ diff --git a/images/vintage-travel.jpg b/images/vintage-travel.jpg new file mode 100644 index 00000000..586c75c2 Binary files /dev/null and b/images/vintage-travel.jpg differ diff --git a/index.css b/index.css new file mode 100644 index 00000000..13a00daf --- /dev/null +++ b/index.css @@ -0,0 +1,88 @@ +@import url('https://fonts.googleapis.com/css?family=Barrio|Fascinate+Inline&display=swap'); + +body { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: 2em; + grid-row-gap: 0; + /* background-image: url("https://i.pinimg.com/originals/3d/1e/e8/3d1ee8705f18e287677909f1c548cd42.jpg"); */ + background-image: url("images/erwan-hesry-166245-unsplash.jpg"); + font-weight: bold; + color: aliceblue; + background-size: cover; +} + + #main { + min-height: 20px; + grid-column-start: 1; + grid-column-end: 3; + text-align: center; +} + +#title{ + font-family: 'Fascinate Inline', cursive; +} + +button#load-trips{ + border: solid; + margin: 0 auto 1em auto; + font-size: 1em; + padding: 5px 30px; + background-color: rgb(247, 126, 146); + color: whitesmoke; +} + +#trips{ + grid-column: 1; + grid-row: 2 / span 2; +} + +#trip-details { + grid-column: 2; + grid-row: 2; +} + +#reservation{ + grid-column: 2; + grid-row: 3; + height: auto; +} + +#trips, #trip-details, #reservation{ + border: dotted burlywood; + overflow: scroll; + text-align: center; +} + +.details-border{ + height: auto; +} + +#reservation{ + padding-bottom: 15px; +} + +.hide-details{ + display: none; +} + +#list{ + text-align: center; +} + +.list-name { + font-family: 'Barrio', cursive; +} + +#trips-list { + list-style: none; +} + +li{ + padding-top: 1em; + border-bottom: solid coral; +} + +#trip-id{ + display: none; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..2e112a53 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + Trek + + + + + + + + + +
+

Come Trek With Me!

+ + +
+
+ + + + +
+

ALL TRIPS

+ +
+ + +
+
+

TRIP DETAILS

+
+
+
+ + +
+
+

RESERVE A TRIP

+
+
+ + + +
+
+
+ + +
+
+ +
+
+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..c709ebdf --- /dev/null +++ b/index.js @@ -0,0 +1,136 @@ +const ALL_TRIPS = 'https://trektravel.herokuapp.com/trips'; + + +// ~~~~~~~~ERROR & STATUS REPORTING~~~~~~~~ +const reportStatus = (message) => { + const statusContainer = $('#status-message'); + statusContainer.empty(); + statusContainer.append(`

${message}

`); +} + +const reportError = (message, errors) => { + let content = `

${message}

'; + reportStatus(content); +}; + +// ~~~~~~~~LOAD ALL TRIPS (got from Ada Pets)~~~~~~~~ +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trips-list'); + tripList.empty(); + + axios.get(ALL_TRIPS) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + + + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + + console.log(error); + }); +} + +//~~~~~~~~TRIP DETAILS~~~~~~~~ +const tripDetails = (id) => { + reportStatus('Loading trip details...'); + + const tripInfo = $('#trip-info'); + tripInfo.empty(); + + axios.get(ALL_TRIPS + '/' + id) + .then((response) => { + reportStatus(`Successfully loaded details about ${id}.`); + + $('#trip-id').text(id); + let trip = response.data; + + tripInfo.append(`

    Name: ${trip.name}

    `); + tripInfo.append(`

    Continent: ${trip.continent}

    `); + tripInfo.append(`

    Category: ${trip.category}

    `); + tripInfo.append(`

    Weeks: ${trip.weeks}

    `); + tripInfo.append(`

    Cost: $${trip.cost}

    `); + tripInfo.append(`

    About: ${trip.about}

    `); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +} + +//~~~~~~~~TRIP RESERVATION (Ada Pets)~~~~~~~~ + +//~~~~~~~~Form Data~~~~~~~~ +const readFormData = () => { + const parsedFormData = {}; + + const nameFromForm = $(`#reservation-form input[name="name"]`).val(); + parsedFormData['name'] = nameFromForm ? nameFromForm : undefined; + + const emailFromForm = $(`#reservation-form input[name="email"]`).val(); + parsedFormData['email'] = emailFromForm ? emailFromForm : undefined; + + return parsedFormData; +}; + +//~~~~~~~~Clear Form~~~~~~~~ +const clearForm = () => { + $(`#reservation-form input[name="name]`).val(''); + $(`#reservation-form input[name="email]`).val(''); +} + +//~~~~~~~~Reserve Trip~~~~~~~~ +const reserveTrip = (event) => { + event.preventDefault(); + + const tripData = readFormData(); + console.log(tripData); + + reportStatus('Sending trip data...'); + + let tripId = $('#trip-id').text(); + console.log(tripId); + + const RESERVATION_URL = ALL_TRIPS + '/' + tripId + '/reservations'; + + axios.post(RESERVATION_URL, tripData) + .then((response) => { + reportStatus(`Successfully reserved trip 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); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }); +}; + +//~~~~~~~~Ready Document~~~~~~~~ +$(document).ready(() => { + $('#load-trips').on('click', function () { + loadTrips(); + $('#trips').show(); + }); + // load details about specific trip + $('ul').on('click', 'li', function () { + let tripId = this.className; + tripDetails(tripId); + $('#trip-details').show(); + $('#reservation').show(); + }); + $('#reservation-form').submit(reserveTrip); +}); \ No newline at end of file