From 06c02e07bcfab3442ee368243a64f12582ece694 Mon Sep 17 00:00:00 2001 From: Kirsten Anderson Date: Fri, 31 May 2019 14:06:57 -0700 Subject: [PATCH 1/7] Oops, git commits are a thing --- index.css | 35 ++++++++++++++++++++++++++++ index.html | 37 ++++++++++++++++++++++++++++++ index.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++ index2.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 3 +++ 5 files changed, 191 insertions(+) create mode 100644 index.css create mode 100644 index.html create mode 100644 index.js create mode 100644 index2.js create mode 100644 package-lock.json diff --git a/index.css b/index.css new file mode 100644 index 00000000..0b27aa1c --- /dev/null +++ b/index.css @@ -0,0 +1,35 @@ +body, html { + font-family: sans-serif; +} + +body { + display: grid; + grid-template: 50px 1fr 1fr / 1fr 1fr; +} + +ul { + margin: 0; + padding: 0; +} + +li { + list-style-type: none; + line-height: 1.5em; +} + +#trips { + grid-row: 0 2; +} + +#status-message { + grid-column: span 2; +} + +#trip-details { + height: 200; + width: 100; +} + +.hidden { + display: none; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..1667b19e --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + TREK + + + +
+ +
+

TREK

+ + +
+ + + +
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..2f25b4fc --- /dev/null +++ b/index.js @@ -0,0 +1,58 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trips-list'); + tripList.empty(); + + $('#load').addClass('hidden'); + + axios.get(URL) + .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); + }); +}; + +const showTrip = (index) => { + $('#status-message').html(''); + console.log(index); + axios.get(URL + `/${index}`) + .then((response) => { + $('#trip-details').removeClass('hidden'); + $('#name').html(`Trip ${response.data.id}: ${response.data.name}`); + $('#continent').html(`Continent: ${response.data.continent}`) + $('#category').html(`Category: ${response.data.category}`) + + let weeksString = 'week'; + if (response.data.weeks !== 1) { + weeksString += 's'; + } + $('#weeks').html(`Duration: ${response.data.weeks} ${weeksString}`) + $('#cost').html(`Cost: $${response.data.cost}`) + $('#about').html(`Description: ${response.data.about}`) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + $('#trips-list').on('click', 'li', function (event) { + showTrip(event.target.id); + }); + +}); \ No newline at end of file diff --git a/index2.js b/index2.js new file mode 100644 index 00000000..2f25b4fc --- /dev/null +++ b/index2.js @@ -0,0 +1,58 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trips-list'); + tripList.empty(); + + $('#load').addClass('hidden'); + + axios.get(URL) + .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); + }); +}; + +const showTrip = (index) => { + $('#status-message').html(''); + console.log(index); + axios.get(URL + `/${index}`) + .then((response) => { + $('#trip-details').removeClass('hidden'); + $('#name').html(`Trip ${response.data.id}: ${response.data.name}`); + $('#continent').html(`Continent: ${response.data.continent}`) + $('#category').html(`Category: ${response.data.category}`) + + let weeksString = 'week'; + if (response.data.weeks !== 1) { + weeksString += 's'; + } + $('#weeks').html(`Duration: ${response.data.weeks} ${weeksString}`) + $('#cost').html(`Cost: $${response.data.cost}`) + $('#about').html(`Description: ${response.data.about}`) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +}; + +$(document).ready(() => { + $('#load').click(loadTrips); + $('#trips-list').on('click', 'li', function (event) { + showTrip(event.target.id); + }); + +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} From 825030a52986ba8c8df19fc0df30fc010fb1b32e Mon Sep 17 00:00:00 2001 From: Kirsten Anderson Date: Sat, 1 Jun 2019 15:47:55 -0700 Subject: [PATCH 2/7] makeReservation works --- index.css | 9 +++++-- index.html | 32 ++++++++++++++++++---- index.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 107 insertions(+), 12 deletions(-) diff --git a/index.css b/index.css index 0b27aa1c..113e0935 100644 --- a/index.css +++ b/index.css @@ -4,7 +4,7 @@ body, html { body { display: grid; - grid-template: 50px 1fr 1fr / 1fr 1fr; + grid-template: 100px 1fr 1fr / 1fr 1fr; } ul { @@ -18,7 +18,7 @@ li { } #trips { - grid-row: 0 2; + grid-row: span 2; } #status-message { @@ -30,6 +30,11 @@ li { width: 100; } +#form-section { + grid-column: 2 / span 1; + grid-row: 3 / span 1; +} + .hidden { display: none; } diff --git a/index.html b/index.html index 1667b19e..3aad4fa1 100644 --- a/index.html +++ b/index.html @@ -16,12 +16,12 @@
    -

    TREK

    - -
      +

      TREK

      + +
        -