diff --git a/index.css b/index.css new file mode 100644 index 00000000..d20e0125 --- /dev/null +++ b/index.css @@ -0,0 +1,102 @@ +body { + font-family: 'Roboto', sans-serif; + color: rgba(18, 31, 39, 1); +} + +main { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + grid-template-rows: auto; + grid-gap: 20px; +} + +h2 { + background-color: rgba(65,98,117, 1); + color: rgba(255, 255, 255, 1); + text-align: center; + padding: 10px 0 10px 0; + margin: 20px 0 0 0; +} + +ul { + padding: 0; + height: 120vh; + overflow-x: scroll; +} + +li { + padding: 10px 0; + text-align: center; +} + +li:nth-child(even) { + background-color: rgba(228, 238, 240, 0.5); +} + +li:nth-child(odd) { + background-color: rgba(187, 207, 218, 0.5); +} + +li:hover { + background-color: rgba(187, 207, 218, 1); +} + +section > div { + background-color: rgba(228, 238, 240, 0.5); +} + +button, input[type="submit"] { + background-color: rgba(18, 31, 39, 1); + color: #FFFFFF; + font-size: 0.8rem; + padding: 10px 20px; + border-radius: 10px; +} + +button:hover, input[type="submit"]:hover { + background-color: rgba(97, 145, 168, 1); +} + +button:focus, input[type="submit"]:focus { + outline: none; +} + +form, #trip-details > div { + padding: 20px; +} + +#trip-details h4:last-of-type { + margin-bottom: 0; +} + +#trip-details p { + margin-top: 5px; + line-height: 1.3; +} + +form > div { + padding-bottom: 20px; +} + +input[type="text"] { + width: 80%; + margin: 5px 10px; + padding: 5px 0; +} + +#reserve-trip h3 { + text-align: center; +} + +#status { + padding-top: 20px; +} + +#status ul { + height: auto; +} + +#status li { + text-align: left; + background-color: rgba(255, 255, 255, 1); +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..e94b7653 --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + + + Trek + + + + + + + +
+

Trek

+ + + +
+
+ +
+
+ +
+ +
+
+
+
+
+ + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..1b0ac8ed --- /dev/null +++ b/index.js @@ -0,0 +1,145 @@ +const URL = "https://ada-backtrek-api.herokuapp.com/trips"; + +const reportStatus = function reportStatus(message) { + $('#status').html(message); +}; + +const reportError = (message, errors) => { + let content = `

${message}

"; + reportStatus(content); +}; + +const loadTrips = function loadTrips() { + reportStatus("Loading trips... be patient"); + + const allTrips = $("#all-trips"); + const tripList = $("#trip-list"); + + allTrips.remove(); + tripList.empty(); + + axios.get(URL) + .then((response) => { + tripList.before("

All Trips

"); + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + reportStatus(`Successfully loaded ${response.data.length} trips`); + }) + .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 while loading trips: ${error.message}`); + } + }); +}; + +const loadTripDetails = function loadTripDetails() { + + const tripDetails = $("#trip-details"); + tripDetails.empty(); + + axios.get(URL + `/${this.id}`) + .then((response) => { + const trip = response.data; + let html = ""; + + html += `

    Trip Details

    +
    +

    Name: ${this.innerHTML}

    +

    Continent: ${trip.continent}

    +

    Category: ${trip.category}

    +

    Weeks: ${trip.weeks}

    +

    Cost: $${trip.cost}

    +

    About:

    +

    ${trip.about}

    +
    `; + + tripDetails.append(html); + reportStatus(`Successfully loaded trip data for ${trip.name}`); + }) + .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 while loading trip: ${error.message}`); + } + }); +}; + +const loadReserveTrip = function loadReserveTrip() { + + const reserveTrip = $("#reserve-trip"); + reserveTrip.empty(); + + let html = ""; + html += `

    Reserve Trip

    +

    ${this.innerHTML}

    +
    +
    + + +
    +
    + + +
    + +
    `; + + reserveTrip.append(html); +}; + +const makeReservation = function makeReservation(event) { + event.preventDefault(); + + const entryData = { + name: $("#name").val(), + email: $("#email").val() + }; + + const tripID = event.target.id; + + axios.post(URL + `/${tripID}/reservations`, entryData) + .then((response) => { + console.log(response); + + reportStatus(`Successfully reserved trip ${tripID} for ${$("#name").val()}`); + + $("#name").val(''), + $("#email").val('') + }) + .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 reserving trip: ${error.message}`); + } + }); +}; + +$(document).ready(() => { + $("#load-trips").click(loadTrips); + $("#trip-list").on("click", "li", loadTripDetails); + $("#trip-list").on("click", "li", loadReserveTrip); + $("#reserve-trip").submit(makeReservation); +});