diff --git a/index.html b/index.html new file mode 100644 index 00000000..9567558f --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + TREK + + + + + +
+

TREK

+
+ +
+ +

+
+
+ +
+
+ + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..d3a19eac --- /dev/null +++ b/index.js @@ -0,0 +1,87 @@ +$(document).ready(() => { + + const loadTrips = function loadTrips() { + $.get( + 'https://trektravel.herokuapp.com/trips', + (response) => { + response.forEach((trip) => { + const tripsInfo = `

  • ${trip.name}

    • `; + $('#trips ul').append(tripsInfo); + }); + }, + ) + .fail(() => { + $('#fail').html('

    Request was unsuccessful

    '); + }).always(() => { + console.log('Function: loadTrips (plural)'); + }); + }; // end of loadTrips + + const loadTrip = function loadTrip(id) { + $.get(`https://trektravel.herokuapp.com/trips/${id}`, + (response) => { + const tripInfo = + `
    +

    Trip name: ${response.name}

    +

    Category: ${response.category}

    +

    Continent: ${response.continent}

    +

    Description: ${response.about}

    +

    Duration: ${response.weeks} weeks

    +

    Cost: ${response.cost}

    +
    `; + + const reservation = `
    +
    + + +
    + +
    + + +
    + +
    + +
    +
    `; + + $('#trips ul li > div').hide(); + $(`#trips ul li#trip-${id}`).append(tripInfo); + $(`#trips ul li#trip-${id}`).append(reservation); + }, + ).fail(() => { + $('#fail').html('

    Could not find

    '); + }).always(() => { + console.log('Function: loadTrip (single)'); + }); + }; // end of loadTrip + + $('#trips ul').on('click', 'p', function() { + const tripID = $(this).attr('id'); + loadTrip(tripID); + }); + + $('#load').click(() => { + loadTrips(); + $('h3').text('Select a Trip'); + $('#trips ul').empty(); + }); + + $('body').on('submit', 'form', function (e) { + e.preventDefault(); + + const url = $(this).attr('action'); // this refers to the jquery object selected on it -- the specific form doing the submit + const formData = $(this).serialize(); + + console.log(formData); + + $.post(url, formData, () => { // on submit the js is doing this post request + $('#form').html('

    Reservation added

    '); + }).fail(() => { + $('#form').html('

    Reservation failed

    '); + }).always(() => { + console.log("you're doing alright"); + }); + }); +}); // end of doc ready diff --git a/trek.css b/trek.css new file mode 100644 index 00000000..cc236b4a --- /dev/null +++ b/trek.css @@ -0,0 +1,44 @@ +header { + text-align: center; +} + +h1 { + font-family: 'Amatic SC', cursive; + font-size: 6em; +} + +#load { + background-color: white; + color: black; + font-family: 'Amatic SC', cursive; + font-size: 2em; +} + +body { + background-color: #7DBEA5; +} + +h3 { + text-align: center; + font-family: 'Amatic SC', cursive; +} + +li { + background-color: white; + list-style: none; + border: solid; + border-color: #C0C0C0; + text-align: center; +} + +p { + font-family: 'Amatic SC', cursive; +} + +#form { + font-family: 'Amatic SC', cursive; +} + +.button { + background-color: #C0C0C0; +}