From 70b7cd13382df5b9752d37b8ba179dc2f17d3cbf Mon Sep 17 00:00:00 2001 From: Goeun Park Date: Tue, 20 Nov 2018 16:08:47 -0800 Subject: [PATCH 1/6] add files, html and css basics --- index.css | 9 +++++++++ index.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.js | 0 3 files changed, 66 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js diff --git a/index.css b/index.css new file mode 100644 index 00000000..aaa0623d --- /dev/null +++ b/index.css @@ -0,0 +1,9 @@ +body{ + background-color: peachpuff; + margin: 50px; +} + +main{ + display: grid; + grid-template-columns: 1fr 1fr; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..d74d5f01 --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + trek trek trek + + + + + + + + + + +
+ +
+ +
+
+ +
    +
    + + + +
    + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From a1d1a3b6432d18ce8e34fb224c16e1d6920e5df2 Mon Sep 17 00:00:00 2001 From: Goeun Park Date: Tue, 20 Nov 2018 16:22:11 -0800 Subject: [PATCH 2/6] can make post request to show all trips --- index.html | 2 +- index.js | 42 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d74d5f01..9f8ea1c5 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@

    🚗 trek outta here!

    - +
      diff --git a/index.js b/index.js index e69de29b..d0efdb11 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,42 @@ +const TRIPS = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

      ${message}

      ` + content += "
        "; + for (const field in errors) { + for (const problem of errors[field]) { + content += `
      • ${field}: ${problem}
        • `; + } + } + content += "
      "; + reportStatus(content); +}; + + +const loadTrips = () => { + reportStatus("* ~ * loading trips ~ * ~") + const tripList = $('#trip-list'); + tripList.empty(); + + axios.get(TRIPS) + .then((response) => { + reportStatus(`Successfully loaded trips!`) + + response.data.forEach((trip) => { + tripList.append(`
    • ${trip.name}
      • `); + }); + }) + .catch((error) => { + reportError(error) + console.log('something went wrong'); + }); +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + // $('#trip-form').submit(createTrip); +}); From 5b9e9a2280477f33dde19cc99a10dcdacffc4606 Mon Sep 17 00:00:00 2001 From: Goeun Park Date: Mon, 26 Nov 2018 17:04:20 -0800 Subject: [PATCH 3/6] skeleton loadTripDetails takes in tripID --- index.js | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index d0efdb11..8cb3d852 100644 --- a/index.js +++ b/index.js @@ -16,6 +16,27 @@ const reportError = (message, errors) => { reportStatus(content); }; +const createPet = (event => { + event.preventDefault(); + + const petData = { + name: $('input[name="name"]').val(), + age: $('input[name="age"]').val(), + owner: $('input[name="owner"]').val() + }; + + reportStatus('Sending pet data...'); + + axios.post(URL, petData) + .then((response) => { + console.log(response.data) + reportStatus(`successfully added a pet with ID ${response.data.id}`) + }) + .catch((error) => { + reportStatus(`Encountered an error: ${error.message}`); + }) + +}); const loadTrips = () => { reportStatus("* ~ * loading trips ~ * ~") @@ -27,7 +48,7 @@ const loadTrips = () => { reportStatus(`Successfully loaded trips!`) response.data.forEach((trip) => { - tripList.append(`
    • ${trip.name}
      • `); + tripList.append(`
    • ${trip.name}
      • `); }); }) .catch((error) => { @@ -36,7 +57,21 @@ const loadTrips = () => { }); }; +const loadTripDetails = (trip) => { + const tripDetails = () => { + console.log(trip) + }; + + return tripDetails; +} + $(document).ready(() => { $('#load').click(loadTrips); + + $('ul').on('click', 'li', function(){ + const tripId = $(this).attr('id'); + loadTripDetails(tripId) + }); + // $('#trip-form').submit(createTrip); }); From a1abf648cc89014e3a9d9442d161070691ccb174 Mon Sep 17 00:00:00 2001 From: Goeun Park Date: Mon, 26 Nov 2018 23:21:15 -0800 Subject: [PATCH 4/6] wave 2 --- index.css | 46 ++++++++++++++++++++++++++++++++++++++++++++-- index.html | 10 +++++++++- index.js | 35 ++++++++++++++++++++++++++++------- 3 files changed, 81 insertions(+), 10 deletions(-) diff --git a/index.css b/index.css index aaa0623d..6a5389ad 100644 --- a/index.css +++ b/index.css @@ -1,9 +1,51 @@ +*{ + list-style: none; + font-family: 'Roboto Mono', monospace; +} + +h1, h2{ + font-family: 'Roboto Slab', serif; +} body{ - background-color: peachpuff; + background-color: rgb(240, 235, 237); margin: 50px; } main{ display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: 1fr 2fr; +} + +.current-trips > *{ + margin: 20px; +} +#trip-detail{ + grid-columns: 2 / 3; +} + +.detail-container{ + background-color: rgba(191, 163, 176, 0.31); + margin-left: 100px; + margin-right: 100px; + padding: 30px; +} + +#name{ + font-size: 2.5rem; + padding-bottom: 5px; +} + +#continent{ + font-size: 2rem; + padding-bottom: 5px; +} + +#trip-list li{ + padding: 3px; + +} + +#trip-list li:hover{ + background-color: rgb(219, 193, 204); + font-style: italic; } diff --git a/index.html b/index.html index 9f8ea1c5..a3b4c40f 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -15,16 +16,23 @@
      + + +
      +
        +
        +
        + - -
        - -
        -
        +
        +

        Make a reservation for this trip

        +
        +
        + + +
        + +
        + + +
        + +
        + + +
        + + +
        +
        +
        - + diff --git a/index.js b/index.js index c1a2f352..ea42fe83 100644 --- a/index.js +++ b/index.js @@ -16,21 +16,19 @@ const reportError = (message, errors) => { reportStatus(content); }; -const createPet = (event => { +const createReservation = (event => { event.preventDefault(); - const petData = { + const reservationData = { name: $('input[name="name"]').val(), - age: $('input[name="age"]').val(), - owner: $('input[name="owner"]').val() + email: $('input[name="email"]').val(), + trip_id: $('input[name="trip_id"]').val() }; + console.log(reservationData) - reportStatus('Sending pet data...'); - - axios.post(URL, petData) + axios.post(`${TRIPS}/${reservationData.trip_id}/reservations`, reservationData) .then((response) => { - console.log(response.data) - reportStatus(`successfully added a pet with ID ${response.data.id}`) + reportStatus(`Successfully added a reservation with ID ${response.data.id}`) }) .catch((error) => { reportStatus(`Encountered an error: ${error.message}`); @@ -60,20 +58,19 @@ const loadTrips = () => { const loadTripDetails = (tripId) => { const tripDetails = () => { - const detail = $('#trip-detail'); detail.empty(); - axios.get(`${TRIPS}/${tripId}`) .then((response) => { - reportStatus(`Successfully loaded detail of trip!`) + reportStatus(`Successfully loaded detail of trip!`); + detail.append(`

        Trip ${response.data.id} Details

        -
      • ${response.data.name}
        • -
      • ${response.data.continent}
        • -
      • ${response.data.about}
        • -
      • Weeks: ${response.data.weeks}
        • -
      • Cost: $${response.data.cost}
        • +
      • ${response.data.name}
        • +
      • ${response.data.continent}
        • +
      • ${response.data.about}
        • +
      • Weeks: ${response.data.weeks}
        • +
      • Cost: $${response.data.cost}
        • `); }) .catch((error) => { @@ -85,14 +82,14 @@ const loadTripDetails = (tripId) => { }; - $(document).ready(() => { $('#load').click(loadTrips); $('ul').on('click', 'li', function(){ const tripId = $(this).attr('id'); - loadTripDetails(tripId) + loadTripDetails(tripId); + $('#hidden').css('visibility', 'visible'); }); - $('#trip-form').submit(createTrip); + $('#reservation-form').submit(createReservation); });