From bf9c05492fa07c71d86c3380cd94be2058e60be1 Mon Sep 17 00:00:00 2001 From: Ada Date: Tue, 20 Nov 2018 16:01:28 -0800 Subject: [PATCH 01/15] see all of the trips --- index.css | 8 ++++ index.html | 41 +++++++++++++++++++++ index.js | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 154 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..17e6ca79 --- /dev/null +++ b/index.css @@ -0,0 +1,8 @@ +body { + font-family: sans-serif; +} + +main { + display: grid; + grid-template-columns: 1fr 1fr; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..ecb7ac4f --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + Pets with axios + + + + + + +
+ +
+
+

Trek

+ +
    +
    + +
    +

    Reserve Trip

    +
    +
    + + +
    + +
    + + +
    + + + +
    +
    +
    + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..20bf3ff0 --- /dev/null +++ b/index.js @@ -0,0 +1,105 @@ +const URL = 'https://trektravel.herokuapp.com/trips'; + +// +// Status Management +// +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

    ${message}

    "; + reportStatus(content); // print that content using reportStatus +}; + +// +// Loading Pets +// +const loadPets = () => { + reportStatus('Loading trips...'); + + const petList = $('#pet-list'); + petList.empty(); + + axios.get(URL) + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} pets`); + response.data.forEach((pet) => { + petList.append(`
  • ${pet.name}
    • `); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading pets: ${error.message}`); + console.log(error); + }); +}; + +// +// Creating Pets +// +const readFormData = () => { + const parsedFormData = {}; + + const inputs = ["name","age","owner"] + + inputs.forEach((curInput) => { + const curData = $(`#pet-form input[name="${curInput}"]`).val(); + parsedFormData[curInput] = curData ? curData : undefined; + }); + // + // const ageFromForm = $(`#pet-form input[name="age"]`).val(); + // parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; + // + // const ownerFromForm = $(`#pet-form input[name="owner"]`).val(); + // parsedFormData['owner'] = ownerFromForm ? ownerFromForm : undefined; + + return parsedFormData; +}; +const clearForm = () => { + $(`#pet-form input[name="name"]`).val(''); + $(`#pet-form input[name="age"]`).val(''); + $(`#pet-form input[name="owner"]`).val(''); +} + +const createPet = (event) => { + // Note that createPet is a handler for a `submit` + // event, which means we need to call `preventDefault` + // to avoid a page reload + event.preventDefault(); + + const petData = readFormData(); + console.log(petData); + + reportStatus('Sending pet data...'); + + axios.post(URL, petData) + .then((response) => { + reportStatus(`Successfully added a pet 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}`); + } + }); +}; + +// +// OK GO!!!!! +// +$(document).ready(() => { + $('#load').click(loadPets); + $('#pet-form').submit(createPet); +}); From c3ccdd6d1861785fbb26dbf2ba5b79cf32766645 Mon Sep 17 00:00:00 2001 From: Ada Date: Tue, 20 Nov 2018 16:04:45 -0800 Subject: [PATCH 02/15] refactored see all trips --- index.html | 2 +- index.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index ecb7ac4f..0e2e082e 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@

    Trek

    -
      +
        diff --git a/index.js b/index.js index 20bf3ff0..34bf70a2 100644 --- a/index.js +++ b/index.js @@ -24,14 +24,14 @@ const reportError = (message, errors) => { const loadPets = () => { reportStatus('Loading trips...'); - const petList = $('#pet-list'); - petList.empty(); + const tripList = $('#trip-list'); + tripList.empty(); axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} pets`); response.data.forEach((pet) => { - petList.append(`
      • ${pet.name}
        • `); + tripList.append(`
      • ${pet.name}
        • `); }); }) .catch((error) => { From c4c9acdec68eaea80a0059b69e8e32a2c463a193 Mon Sep 17 00:00:00 2001 From: Ada Date: Tue, 20 Nov 2018 16:53:36 -0800 Subject: [PATCH 03/15] grab the correct data from each trip --- index.js | 50 +++++++++++++++++++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 15 deletions(-) diff --git a/index.js b/index.js index 34bf70a2..ff31bb1e 100644 --- a/index.js +++ b/index.js @@ -21,7 +21,7 @@ const reportError = (message, errors) => { // // Loading Pets // -const loadPets = () => { +const loadTrips = () => { reportStatus('Loading trips...'); const tripList = $('#trip-list'); @@ -30,8 +30,9 @@ const loadPets = () => { axios.get(URL) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} pets`); - response.data.forEach((pet) => { - tripList.append(`
      • ${pet.name}
        • `); + response.data.forEach((trip) => { + tripList.append(`
        `); + $('.trip').click(loadTrip) }); }) .catch((error) => { @@ -43,28 +44,47 @@ const loadPets = () => { // // Creating Pets // + +const loadTrip = () => { + const trip = $('#trip'); + trip.empty(); + + axios.get(URL + "/1") + .then((response) => { + let id = response.data.id + let tripName = response.data.name + let continent = response.data.continent + let details = response.data.about + let category = response.data.category + let duration = response.data.weeks + let cost = response.data.cost + + // response.data.forEach((id) => { + // console.log(id) + // //trip.append(`${point.name}`); + // }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + }); +}; + + const readFormData = () => { const parsedFormData = {}; - const inputs = ["name","age","owner"] + const inputs = ["name","email"] inputs.forEach((curInput) => { - const curData = $(`#pet-form input[name="${curInput}"]`).val(); + const curData = $(`#pet-form input[name="${curInput}"]`).val(); // you get it from the html parsedFormData[curInput] = curData ? curData : undefined; }); - // - // const ageFromForm = $(`#pet-form input[name="age"]`).val(); - // parsedFormData['age'] = ageFromForm ? ageFromForm : undefined; - // - // const ownerFromForm = $(`#pet-form input[name="owner"]`).val(); - // parsedFormData['owner'] = ownerFromForm ? ownerFromForm : undefined; return parsedFormData; }; const clearForm = () => { $(`#pet-form input[name="name"]`).val(''); - $(`#pet-form input[name="age"]`).val(''); - $(`#pet-form input[name="owner"]`).val(''); + $(`#pet-form input[name="email"]`).val(''); } const createPet = (event) => { @@ -98,8 +118,8 @@ const createPet = (event) => { // // OK GO!!!!! -// +// this is the homepage! the trip will not be avaiable $(document).ready(() => { - $('#load').click(loadPets); + $('#load').click(loadTrips); $('#pet-form').submit(createPet); }); From b93bae246c401fb06b65acad392798ba2a4dcc1d Mon Sep 17 00:00:00 2001 From: Ada Date: Wed, 21 Nov 2018 15:06:53 -0800 Subject: [PATCH 04/15] show trip detail for trip 1 --- index.js | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/index.js b/index.js index ff31bb1e..8f5956d8 100644 --- a/index.js +++ b/index.js @@ -31,9 +31,10 @@ const loadTrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} pets`); response.data.forEach((trip) => { - tripList.append(`
        `); - $('.trip').click(loadTrip) + tripList.append(`
        `); }); + $('.trip-1').click(loadTrip) // must go here so the forEach doesn't execute everytime it is added + }) .catch((error) => { reportStatus(`Encountered an error while loading pets: ${error.message}`); @@ -41,28 +42,26 @@ const loadTrips = () => { }); }; -// -// Creating Pets -// const loadTrip = () => { - const trip = $('#trip'); + const trip = $('.trip-1'); trip.empty(); - + trip.append(`

        Trip details

        `) axios.get(URL + "/1") .then((response) => { - let id = response.data.id - let tripName = response.data.name - let continent = response.data.continent - let details = response.data.about - let category = response.data.category - let duration = response.data.weeks - let cost = response.data.cost - - // response.data.forEach((id) => { - // console.log(id) - // //trip.append(`${point.name}`); - // }); + let data = {} + data["id"] = response.data.id + data["name"] = response.data.name + data["continent"] = response.data.continent + data["details"] = response.data.about + data["category"] = response.data.category + data["duration"] = response.data.weeks + data["cost"] = response.data.cost + + Object.keys(data).forEach(function(key) { + //console.log(`${key} : ${data[key]}${key} : ${data[key]} { reportStatus(`Encountered an error while loading trip: ${error.message}`); From 54558fd5eba79970f81b9e058e6cf86210053f55 Mon Sep 17 00:00:00 2001 From: Ada Date: Wed, 21 Nov 2018 15:26:00 -0800 Subject: [PATCH 05/15] show all trips details --- index.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 8f5956d8..23807ee8 100644 --- a/index.js +++ b/index.js @@ -32,8 +32,11 @@ const loadTrips = () => { reportStatus(`Successfully loaded ${response.data.length} pets`); response.data.forEach((trip) => { tripList.append(`
        `); + $(`.trip-${trip.id}`).click(() => { + loadTrip(`.trip-${trip.id}`); + }) }); - $('.trip-1').click(loadTrip) // must go here so the forEach doesn't execute everytime it is added + // must go here so the forEach doesn't execute everytime it is added }) .catch((error) => { @@ -43,11 +46,14 @@ const loadTrips = () => { }; -const loadTrip = () => { - const trip = $('.trip-1'); +const loadTrip = (tripinfo) => { + let num = tripinfo.match(/\d/); + num = num.join(""); + console.log(num) + const trip = $(`${tripinfo}`); trip.empty(); trip.append(`

        Trip details

        `) - axios.get(URL + "/1") + axios.get(URL + "/" + num) .then((response) => { let data = {} data["id"] = response.data.id From 69843611f296e02341e2feb0c4d177b59960612f Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 00:26:23 -0800 Subject: [PATCH 06/15] make a reservation --- index.html | 18 ---------- index.js | 100 +++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 71 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index 0e2e082e..52b2ef71 100644 --- a/index.html +++ b/index.html @@ -18,24 +18,6 @@

        Trek

          - -
          -

          Reserve Trip

          -
          -
          - - -
          - -
          - - -
          - - - -
          -
          diff --git a/index.js b/index.js index 23807ee8..50f09091 100644 --- a/index.js +++ b/index.js @@ -29,14 +29,14 @@ const loadTrips = () => { axios.get(URL) .then((response) => { - reportStatus(`Successfully loaded ${response.data.length} pets`); + reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - tripList.append(`
          `); - $(`.trip-${trip.id}`).click(() => { + const div = $(`
          `) // make the div have the class not the button, so that eveything is added to this div, make sure that you specify the type of button + tripList.append(div); + $('button', div).click(() => { // to only activate on button inside the div loadTrip(`.trip-${trip.id}`); }) }); - // must go here so the forEach doesn't execute everytime it is added }) .catch((error) => { @@ -49,31 +49,66 @@ const loadTrips = () => { const loadTrip = (tripinfo) => { let num = tripinfo.match(/\d/); num = num.join(""); - console.log(num) const trip = $(`${tripinfo}`); trip.empty(); trip.append(`

          Trip details

          `) axios.get(URL + "/" + num) .then((response) => { let data = {} - data["id"] = response.data.id - data["name"] = response.data.name - data["continent"] = response.data.continent - data["details"] = response.data.about - data["category"] = response.data.category - data["duration"] = response.data.weeks - data["cost"] = response.data.cost - - Object.keys(data).forEach(function(key) { - //console.log(`${key} : ${data[key]}${key} : ${data[key]}') + Object.keys(data).forEach(function(key) { + list.append(`
        • ${key} : ${data[key]} { reportStatus(`Encountered an error while loading trip: ${error.message}`); }); + createForm(tripinfo); + $(tripinfo).on('submit', '#trip-form', createReservation); + }; +const createForm = (tripinfo) => { + + event.preventDefault(); // to prevent it from reloading, but still doesn't work + + // get id number if needed later on + console.log(tripinfo) + let num = tripinfo.match(/\d/); + num = num.join(""); + let trip = $(`${tripinfo}`); + + //generate form + // Create a section element (not in the DOM) + const section = $('
          '); + section.append('

          Reserve Trip

          '); + + const form = $('
          ') + const divName = $('
          ') + divName.append(''); + divName.append(''); + + + const divEmail = $('
          ') + divEmail.append(''); + divEmail.append('') // for and name should have the same name + + form.append(divName) + form.append(divEmail) + form.append(``) + form.append('') + + section.append(form) + trip.append(section); +} const readFormData = () => { const parsedFormData = {}; @@ -81,31 +116,36 @@ const readFormData = () => { const inputs = ["name","email"] inputs.forEach((curInput) => { - const curData = $(`#pet-form input[name="${curInput}"]`).val(); // you get it from the html + const curData = $(`#trip-form input[name="${curInput}"]`).val(); parsedFormData[curInput] = curData ? curData : undefined; }); - + let id = document.getElementById("tripId").value + parsedFormData["id"] = id return parsedFormData; }; + const clearForm = () => { - $(`#pet-form input[name="name"]`).val(''); - $(`#pet-form input[name="email"]`).val(''); + $(`#trip-form input[name="name"]`).val(''); + $(`#trip-form input[name="owner"]`).val(''); } -const createPet = (event) => { +const createReservation = (event) => { // Note that createPet is a handler for a `submit` // event, which means we need to call `preventDefault` // to avoid a page reload + console.log(event) event.preventDefault(); - const petData = readFormData(); - console.log(petData); + const tripData = readFormData(); + console.log(tripData); - reportStatus('Sending pet data...'); - - axios.post(URL, petData) + reportStatus('Sending trip data...'); + let num = tripData["id"] + //POST https://trektravel.herokuapp.com/trips/1/reservations + let URL_R = URL + "/" + num + "/reservations" + axios.post(URL_R, tripData) .then((response) => { - reportStatus(`Successfully added a pet with ID ${response.data.id}!`); + //reportStatus(`Successfully added a trip with ID ${response.data.id}!`); clearForm(); }) .catch((error) => { @@ -121,10 +161,12 @@ const createPet = (event) => { }); }; + //clear form after it a trip has been reserved + // // OK GO!!!!! // this is the homepage! the trip will not be avaiable $(document).ready(() => { $('#load').click(loadTrips); - $('#pet-form').submit(createPet); + //$('#pet-form').submit(createPet); }); From e8d0bc71a63f5fd0902692892be9883e53eec27e Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 00:52:08 -0800 Subject: [PATCH 07/15] removed clearform because a second trip cleared my form information --- index.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/index.js b/index.js index 50f09091..d724b31d 100644 --- a/index.js +++ b/index.js @@ -80,11 +80,11 @@ const createForm = (tripinfo) => { event.preventDefault(); // to prevent it from reloading, but still doesn't work - // get id number if needed later on - console.log(tripinfo) + // get id number let num = tripinfo.match(/\d/); num = num.join(""); let trip = $(`${tripinfo}`); + console.log(tripinfo) //generate form // Create a section element (not in the DOM) @@ -124,29 +124,23 @@ const readFormData = () => { return parsedFormData; }; -const clearForm = () => { - $(`#trip-form input[name="name"]`).val(''); - $(`#trip-form input[name="owner"]`).val(''); -} - const createReservation = (event) => { // Note that createPet is a handler for a `submit` // event, which means we need to call `preventDefault` // to avoid a page reload - console.log(event) event.preventDefault(); const tripData = readFormData(); - console.log(tripData); + console.log(tripData) reportStatus('Sending trip data...'); let num = tripData["id"] + console.log(num) //POST https://trektravel.herokuapp.com/trips/1/reservations let URL_R = URL + "/" + num + "/reservations" axios.post(URL_R, tripData) .then((response) => { - //reportStatus(`Successfully added a trip with ID ${response.data.id}!`); - clearForm(); + reportStatus(`Successfully added a trip with ID ${response.data.id}!`); }) .catch((error) => { console.log(error.response); @@ -161,8 +155,6 @@ const createReservation = (event) => { }); }; - //clear form after it a trip has been reserved - // // OK GO!!!!! // this is the homepage! the trip will not be avaiable From ec517e9796b9a14b5fc55340e0fdc4d7f3a4c14f Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 23:11:35 -0800 Subject: [PATCH 08/15] refactor code and added some css --- index.css | 24 ++++++++++++++++++++---- index.html | 5 ++++- index.js | 25 ++++++++++++++----------- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/index.css b/index.css index 17e6ca79..980e2803 100644 --- a/index.css +++ b/index.css @@ -1,8 +1,24 @@ -body { +.current-pets { font-family: sans-serif; + display: grid; + width: 100%; + grid-template-rows: 50px 1fr 30px; + grid-template-columns: 150px 1fr; + grid-template-areas: + "header header header" + "aside main main" + "aside main main" + } -main { - display: grid; - grid-template-columns: 1fr 1fr; +#trip-list { + grid-area: aside; +} + +ul div section { + grid-area: main +} + +main section h1 { + grid-area: header } diff --git a/index.html b/index.html index 52b2ef71..4672e6c1 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,15 @@ - Pets with axios + Trips + + +
          diff --git a/index.js b/index.js index d724b31d..d6daaf2c 100644 --- a/index.js +++ b/index.js @@ -31,10 +31,12 @@ const loadTrips = () => { .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); response.data.forEach((trip) => { - const div = $(`
          `) // make the div have the class not the button, so that eveything is added to this div, make sure that you specify the type of button + const div = $(`
          `) // make the div have the class not the button, so that eveything is added to this div, make sure that you specify the type of button tripList.append(div); $('button', div).click(() => { // to only activate on button inside the div loadTrip(`.trip-${trip.id}`); + createForm(`.trip-${trip.id}`); + $(`.trip-${trip.id}`).on('submit', '#trip-form', createReservation); }) }); @@ -51,7 +53,6 @@ const loadTrip = (tripinfo) => { num = num.join(""); const trip = $(`${tripinfo}`); trip.empty(); - trip.append(`

          Trip details

          `) axios.get(URL + "/" + num) .then((response) => { let data = {} @@ -60,25 +61,28 @@ const loadTrip = (tripinfo) => { data["Continent"] = response.data.continent data["Details"] = response.data.about data["Category"] = response.data.category - data["Duration"] = response.data.weeks - data["Cost"] = response.data.cost + data["Weeks"] = response.data.weeks + data["Cost"] = '$' + response.data.cost const list = $('
            ') Object.keys(data).forEach(function(key) { list.append(`
          • ${key} : ${data[key]}'); + section.append('

            Trip details

            ') + section.append(list) + trip.append(section) }) .catch((error) => { reportStatus(`Encountered an error while loading trip: ${error.message}`); }); - createForm(tripinfo); - $(tripinfo).on('submit', '#trip-form', createReservation); + //createForm(tripinfo); + //$(tripinfo).on('submit', '#trip-form', createReservation); }; const createForm = (tripinfo) => { - event.preventDefault(); // to prevent it from reloading, but still doesn't work + event.preventDefault(); // get id number let num = tripinfo.match(/\d/); @@ -89,7 +93,7 @@ const createForm = (tripinfo) => { //generate form // Create a section element (not in the DOM) const section = $('
            '); - section.append('

            Reserve Trip

            '); + section.append('

            Reserve Trip

            '); const form = $('
            ') const divName = $('
            ') @@ -103,6 +107,7 @@ const createForm = (tripinfo) => { form.append(divName) form.append(divEmail) + form.append(``) form.append('') @@ -155,8 +160,6 @@ const createReservation = (event) => { }); }; -// -// OK GO!!!!! // this is the homepage! the trip will not be avaiable $(document).ready(() => { $('#load').click(loadTrips); From 316585eb4abc6707d46a2138bcb34eed3aed3ad7 Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 23:23:03 -0800 Subject: [PATCH 09/15] added color and formated grid --- index.css | 16 ++++++++-------- index.html | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/index.css b/index.css index 980e2803..d7d7308b 100644 --- a/index.css +++ b/index.css @@ -6,19 +6,19 @@ grid-template-columns: 150px 1fr; grid-template-areas: "header header header" - "aside main main" - "aside main main" - } - +/* #trip-list { grid-area: aside; } - -ul div section { - grid-area: main +*/ +ul div section:last-child { + background-color: #25283D; + color: white } + main section h1 { - grid-area: header + grid-area: header; + background-color: aquamarine; } diff --git a/index.html b/index.html index 4672e6c1..a017f2bc 100644 --- a/index.html +++ b/index.html @@ -9,8 +9,8 @@ - - + +
            From c535cfd45561c92030d0a43f9856c69ceff18b48 Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 23:27:57 -0800 Subject: [PATCH 10/15] added bootstrap --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index d6daaf2c..492cddbb 100644 --- a/index.js +++ b/index.js @@ -109,7 +109,7 @@ const createForm = (tripinfo) => { form.append(divEmail) form.append(``) - form.append('') + form.append('') section.append(form) trip.append(section); From 6a1d8098f9817cb6e630dd54d5d00c03ce7902c3 Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 23:46:46 -0800 Subject: [PATCH 11/15] more formatting and cleaning code --- index.css | 19 +++++++++++++------ index.html | 2 +- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/index.css b/index.css index d7d7308b..4b427b2e 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,4 @@ -.current-pets { +.current-trips { font-family: sans-serif; display: grid; width: 100%; @@ -7,18 +7,25 @@ grid-template-areas: "header header header" } -/* -#trip-list { - grid-area: aside; -} -*/ + ul div section:last-child { background-color: #25283D; color: white } +ul div section:first-child { + text-align: center; +} + main section h1 { grid-area: header; background-color: aquamarine; + padding-top: 5px; + border-top-width: 50px; + padding-bottom: 44px; +} + +[class^="trip"] { + border-style: double; } diff --git a/index.html b/index.html index a017f2bc..77912d97 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@
            -
            +

            Trek

              From a614aa1e4f96c231a30183cc0e5089e96897e88f Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 23:49:45 -0800 Subject: [PATCH 12/15] aligned code --- index.js | 111 +++++++++++++++++++++++++------------------------------ 1 file changed, 51 insertions(+), 60 deletions(-) diff --git a/index.js b/index.js index 492cddbb..e9af0cd5 100644 --- a/index.js +++ b/index.js @@ -18,9 +18,6 @@ const reportError = (message, errors) => { reportStatus(content); // print that content using reportStatus }; -// -// Loading Pets -// const loadTrips = () => { reportStatus('Loading trips...'); @@ -28,23 +25,23 @@ const loadTrips = () => { tripList.empty(); axios.get(URL) - .then((response) => { - reportStatus(`Successfully loaded ${response.data.length} trips`); - response.data.forEach((trip) => { - const div = $(`
              `) // make the div have the class not the button, so that eveything is added to this div, make sure that you specify the type of button - tripList.append(div); - $('button', div).click(() => { // to only activate on button inside the div - loadTrip(`.trip-${trip.id}`); - createForm(`.trip-${trip.id}`); - $(`.trip-${trip.id}`).on('submit', '#trip-form', createReservation); - }) - }); - - }) - .catch((error) => { - reportStatus(`Encountered an error while loading pets: ${error.message}`); - console.log(error); + .then((response) => { + reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { + const div = $(`
              `) + tripList.append(div); + $('button', div).click(() => { // to only activate on button inside the div + loadTrip(`.trip-${trip.id}`); + createForm(`.trip-${trip.id}`); + $(`.trip-${trip.id}`).on('submit', '#trip-form', createReservation); + }) }); + + }) + .catch((error) => { + reportStatus(`Encountered an error while loading pets: ${error.message}`); + console.log(error); + }); }; @@ -54,29 +51,27 @@ const loadTrip = (tripinfo) => { const trip = $(`${tripinfo}`); trip.empty(); axios.get(URL + "/" + num) - .then((response) => { - let data = {} - data["Id"] = response.data.id - data["Name"] = response.data.name - data["Continent"] = response.data.continent - data["Details"] = response.data.about - data["Category"] = response.data.category - data["Weeks"] = response.data.weeks - data["Cost"] = '$' + response.data.cost - const list = $('
                ') - Object.keys(data).forEach(function(key) { - list.append(`
              • ${key} : ${data[key]}
                • '); - section.append('

                Trip details

                ') - section.append(list) - trip.append(section) - }) - .catch((error) => { - reportStatus(`Encountered an error while loading trip: ${error.message}`); + .then((response) => { + let data = {} + data["Id"] = response.data.id + data["Name"] = response.data.name + data["Continent"] = response.data.continent + data["Details"] = response.data.about + data["Category"] = response.data.category + data["Weeks"] = response.data.weeks + data["Cost"] = '$' + response.data.cost + const list = $('
                  ') + Object.keys(data).forEach(function(key) { + list.append(`
                • ${key} : ${data[key]}
                  • '); + section.append('

                  Trip details

                  ') + section.append(list) + trip.append(section) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + }); }; @@ -103,7 +98,7 @@ const createForm = (tripinfo) => { const divEmail = $('
                  ') divEmail.append(''); - divEmail.append('') // for and name should have the same name + divEmail.append('') // for and name in a form should have the same name form.append(divName) form.append(divEmail) @@ -130,9 +125,6 @@ const readFormData = () => { }; const createReservation = (event) => { - // Note that createPet is a handler for a `submit` - // event, which means we need to call `preventDefault` - // to avoid a page reload event.preventDefault(); const tripData = readFormData(); @@ -144,24 +136,23 @@ const createReservation = (event) => { //POST https://trektravel.herokuapp.com/trips/1/reservations let URL_R = URL + "/" + num + "/reservations" axios.post(URL_R, tripData) - .then((response) => { - reportStatus(`Successfully added a trip with ID ${response.data.id}!`); - }) - .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}`); - } - }); + .then((response) => { + reportStatus(`Successfully added a trip with ID ${response.data.id}!`); + }) + .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}`); + } + }); }; // this is the homepage! the trip will not be avaiable $(document).ready(() => { $('#load').click(loadTrips); - //$('#pet-form').submit(createPet); }); From 9e07c82a0775f6ed4dbe513d9bbb6b9b136cfca6 Mon Sep 17 00:00:00 2001 From: Ada Date: Sat, 24 Nov 2018 23:55:32 -0800 Subject: [PATCH 13/15] refactor code --- index.css | 4 ++++ index.js | 5 +---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 4b427b2e..6f492dbd 100644 --- a/index.css +++ b/index.css @@ -29,3 +29,7 @@ main section h1 { [class^="trip"] { border-style: double; } + +ul { + list-style-type:none; +} diff --git a/index.js b/index.js index e9af0cd5..1845ca3d 100644 --- a/index.js +++ b/index.js @@ -44,7 +44,6 @@ const loadTrips = () => { }); }; - const loadTrip = (tripinfo) => { let num = tripinfo.match(/\d/); num = num.join(""); @@ -60,7 +59,7 @@ const loadTrip = (tripinfo) => { data["Category"] = response.data.category data["Weeks"] = response.data.weeks data["Cost"] = '$' + response.data.cost - const list = $('
                    ') + const list = $('
                      ') Object.keys(data).forEach(function(key) { list.append(`
                    • ${key} : ${data[key]} { }; const createForm = (tripinfo) => { - event.preventDefault(); - // get id number let num = tripinfo.match(/\d/); num = num.join(""); From dce3b99b572821a14801fc3ee202658fa3eca218 Mon Sep 17 00:00:00 2001 From: Ada Date: Mon, 26 Nov 2018 12:23:14 -0800 Subject: [PATCH 14/15] more css styling --- index.css | 20 +++++++++++++++++--- index.js | 2 +- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 6f492dbd..deae3b76 100644 --- a/index.css +++ b/index.css @@ -2,18 +2,23 @@ font-family: sans-serif; display: grid; width: 100%; - grid-template-rows: 50px 1fr 30px; - grid-template-columns: 150px 1fr; + grid-template-columns: 1fr 1fr; + /* grid-template-rows: 50px 1fr 30px; */ + /* grid-template-columns: 150px 1fr; */ grid-template-areas: - "header header header" + "header header" + "list details" + "list reservation" } ul div section:last-child { + grid-area: details; background-color: #25283D; color: white } ul div section:first-child { + grid-area: reservation; text-align: center; } @@ -28,8 +33,17 @@ main section h1 { [class^="trip"] { border-style: double; + grid-area: details; +} + +#trip-list { + grid-area: list } ul { list-style-type:none; } + +section button { + grid-area: list +} diff --git a/index.js b/index.js index 1845ca3d..75ff3657 100644 --- a/index.js +++ b/index.js @@ -39,7 +39,7 @@ const loadTrips = () => { }) .catch((error) => { - reportStatus(`Encountered an error while loading pets: ${error.message}`); + reportStatus(`Encountered an error while loading trip: ${error.message}`); console.log(error); }); }; From 32480b29a0005427197f21a8b6cca7ff2efc6bac Mon Sep 17 00:00:00 2001 From: Ada Date: Mon, 26 Nov 2018 16:47:51 -0800 Subject: [PATCH 15/15] finished style: grid matches frame --- index.css | 35 ++++++++++++++++++++++------------- index.html | 8 +++++++- index.js | 13 ++++++------- 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/index.css b/index.css index deae3b76..002ce85f 100644 --- a/index.css +++ b/index.css @@ -1,8 +1,12 @@ .current-trips { font-family: sans-serif; +} + +#info { display: grid; width: 100%; grid-template-columns: 1fr 1fr; + /* grid-auto-rows: minmax(100px, auto); */ /* grid-template-rows: 50px 1fr 30px; */ /* grid-template-columns: 150px 1fr; */ grid-template-areas: @@ -11,35 +15,40 @@ "list reservation" } -ul div section:last-child { +#info-trip { grid-area: details; - background-color: #25283D; - color: white } -ul div section:first-child { +#reserve-trip { grid-area: reservation; - text-align: center; } +.current-trips { + grid-area: list +} -main section h1 { - grid-area: header; +header { background-color: aquamarine; padding-top: 5px; border-top-width: 50px; padding-bottom: 44px; + padding-top: 44px; + font-size: 60px; + text-align: center; } -[class^="trip"] { - border-style: double; - grid-area: details; -} +ul div section:first-child { + grid-area: reservation; + text-align: center; + } + + +main section:first-child h1 { + grid-area: header; -#trip-list { - grid-area: list } + ul { list-style-type:none; } diff --git a/index.html b/index.html index 77912d97..211464f1 100644 --- a/index.html +++ b/index.html @@ -13,14 +13,20 @@ +
                      Trek
                      +
                      -

                      Trek

                        +
                        +
                        +
                        +
                        +
                        diff --git a/index.js b/index.js index 75ff3657..0088a79a 100644 --- a/index.js +++ b/index.js @@ -47,8 +47,9 @@ const loadTrips = () => { const loadTrip = (tripinfo) => { let num = tripinfo.match(/\d/); num = num.join(""); - const trip = $(`${tripinfo}`); - trip.empty(); + // const trip = $(`${tripinfo}`); + const section = $('#info-trip'); + section.empty(); axios.get(URL + "/" + num) .then((response) => { let data = {} @@ -63,10 +64,10 @@ const loadTrip = (tripinfo) => { Object.keys(data).forEach(function(key) { list.append(`
                      • ${key} : ${data[key]}'); + //const section = $('
                        '); section.append('

                        Trip details

                        ') section.append(list) - trip.append(section) + //trip.append(section) }) .catch((error) => { reportStatus(`Encountered an error while loading trip: ${error.message}`); @@ -79,12 +80,11 @@ const createForm = (tripinfo) => { // get id number let num = tripinfo.match(/\d/); num = num.join(""); - let trip = $(`${tripinfo}`); console.log(tripinfo) //generate form // Create a section element (not in the DOM) - const section = $('
                        '); + const section = $('#reserve-trip'); section.append('

                        Reserve Trip

                        '); const form = $('
                        ') @@ -104,7 +104,6 @@ const createForm = (tripinfo) => { form.append('') section.append(form) - trip.append(section); } const readFormData = () => {