From 93c20205ddf454b601567d5e947ce8d9ff2a5669 Mon Sep 17 00:00:00 2001 From: K <774162+kaseea@users.noreply.github.com> Date: Fri, 31 May 2019 13:35:27 -0700 Subject: [PATCH 1/4] set up files and finished wave 1 --- index.css | 3 +++ index.html | 43 ++++++++++++++++++++++++++++++++++++++ index.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 107 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..0e1ac9a0 --- /dev/null +++ b/index.css @@ -0,0 +1,3 @@ +body { + background-color: aquamarine +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..584a5c73 --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + TREEEEEEK + + + +
+
+
+

List-o-Trips (not copy-pasta'd)

+ + +
+
+

Add a new pet

+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..522f70cd --- /dev/null +++ b/index.js @@ -0,0 +1,61 @@ + +const url = 'https://trektravel.herokuapp.com/' + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + + +const reportApiError = (error) => { +console.log("encountered error when posting", error); + +let errorHtml = `

${error.message}

'; +reportStatus(errorHtml); +} + +const loadTrips = () => { + reportStatus('Loading trips...'); + + const tripList = $('#trip-list'); + tripList.empty(); + + let getTrips = url + 'trips'; + console.log('MADE IT HERE'); + axios.get(getTrips) + .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); + }); + }; + + + $(document).ready(() => { + $('#load').click(loadTrips); + }); + +// lots of credit goes to Dan's Aweosme live coding \ No newline at end of file From ffbf478d789a083b10151c5ab0f5983619b5246a Mon Sep 17 00:00:00 2001 From: K <774162+kaseea@users.noreply.github.com> Date: Fri, 31 May 2019 22:54:00 -0700 Subject: [PATCH 2/4] end of wave 2 but without a second api call, or closure --- index.html | 8 +++++--- index.js | 25 ++++++++++++++++++++++++- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 584a5c73..7d2a03c3 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ TREEEEEEK + @@ -10,7 +11,7 @@

    List-o-Trips (not copy-pasta'd)

    - +
    @@ -32,8 +33,9 @@

    Add a new pet

    - - + + + diff --git a/index.js b/index.js index 522f70cd..31a3820f 100644 --- a/index.js +++ b/index.js @@ -43,19 +43,42 @@ const loadTrips = () => { axios.get(getTrips) .then((response) => { reportStatus(`Successfully loaded ${response.data.length} trips`); + response.data.forEach((trip) => { - tripList.append(`
  • ${trip.name}
    • `); + + let holderName = `
  • ${trip.name}`; + let id = `load_info_${trip.id}`; + // almsot all the fucking data is here + // how can I add it from here + // alert(id); + // this just runs alert non stop CAUSE I CALLED ALERT + // $(`#` + id).click(alert(id)); + // when you have something in parans, the things in parens RUNS RIGHT AWAY + // CALLED A CONTINUATION OR A THUNK + holderName += `
    `; + // const holderNode = $(holderName) + // holderNode.click(function is the thing that displays it) + tripList.append(holderName); + + $(`#` + id).click(() => { + alert(id); + let deets = `
  • trip id: ${trip.id}, trip name: ${trip.name}, continent: ${trip.continent}, category: ${trip.category}, duration: ${trip.weeks}, cost: ${trip.cost}
    • `; + $(`.` + id).html(deets); + }) }); + // $(`#` + id).click(alert(id)); }) .catch((error) => { reportStatus(`Encountered an error while loading trips: ${error.message}`); console.log(error); }); + // $(`#` + id).click(alert(id)); }; $(document).ready(() => { $('#load').click(loadTrips); + }); // lots of credit goes to Dan's Aweosme live coding \ No newline at end of file From e6dc1a80fb12d431ea9bc17732c847ffe8070a4a Mon Sep 17 00:00:00 2001 From: K <774162+kaseea@users.noreply.github.com> Date: Fri, 31 May 2019 23:47:55 -0700 Subject: [PATCH 3/4] functional wave 3 that needs to be refactored BADLY --- index.html | 19 +------------------ index.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 7d2a03c3..28956c68 100644 --- a/index.html +++ b/index.html @@ -14,24 +14,7 @@

    List-o-Trips (not copy-pasta'd)

    -
    -

    Add a new pet

    -
    -
    - - -
    -
    - - -
    -
    - - -
    - -
    -
    + diff --git a/index.js b/index.js index 31a3820f..a8fe80be 100644 --- a/index.js +++ b/index.js @@ -31,6 +31,38 @@ Object.keys(fieldProblems).forEach(field => { errorHtml += ''; reportStatus(errorHtml); } +const readRegForm = () => { + let name = $("#trip-form input[name=name]").val(); + let email = $("#trip-form input[name=email]").val(); + console.log(name); + console.log(email); + return { + 'name': name, + 'email': email + }; +} + +const addRegistration = (id) => { + + postUrl = `https://trektravel.herokuapp.com/trips/${id}/reservations` + console.log(postUrl) + const tripData = readRegForm(); + + reportStatus("About to post registration data..."); + console.log("lets check to be sure we're doing this right", tripData); + + axios.post(postUrl, tripData) + .then((response) => { + console.log("successfully posted registration data", response); + + // its creating an id, right? + const regId = response.data.id; + reportStatus(`Successfully created a new registration with ID ${regId}`); + }) + .catch((error) => { + reportApiError(error); + }) +}; const loadTrips = () => { reportStatus('Loading trips...'); @@ -62,8 +94,25 @@ const loadTrips = () => { $(`#` + id).click(() => { alert(id); - let deets = `
  • trip id: ${trip.id}, trip name: ${trip.name}, continent: ${trip.continent}, category: ${trip.category}, duration: ${trip.weeks}, cost: ${trip.cost}
    • `; + let deets = `
  • trip id: ${trip.id}, trip name: ${trip.name}, continent: ${trip.continent}, category: ${trip.category}, duration: ${trip.weeks}, cost: ${trip.cost}
    +

    register for trip

    +
    +
    + + +
    +
    + + +
    + +
    +
    • `; $(`.` + id).html(deets); + $('#trip-form').submit((event) => { + event.preventDefault(); + addRegistration(trip.id); + }); }) }); // $(`#` + id).click(alert(id)); @@ -76,9 +125,12 @@ const loadTrips = () => { }; + + $(document).ready(() => { $('#load').click(loadTrips); + }); // lots of credit goes to Dan's Aweosme live coding \ No newline at end of file From 19e865a6f51fef200e0585591ed5f8171a52b910 Mon Sep 17 00:00:00 2001 From: K <774162+kaseea@users.noreply.github.com> Date: Sun, 2 Jun 2019 21:51:16 -0700 Subject: [PATCH 4/4] some tweaks maybe --- index.css | 3 +- index.html | 2 ++ index.js | 99 +++++++++++++++++++++++++++++------------------------- 3 files changed, 57 insertions(+), 47 deletions(-) diff --git a/index.css b/index.css index 0e1ac9a0..b4ba1c7d 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,4 @@ body { - background-color: aquamarine + background-color: lavender; + color: slateblue } \ No newline at end of file diff --git a/index.html b/index.html index 28956c68..daf014d5 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,8 @@

    List-o-Trips (not copy-pasta'd)

    + +
    diff --git a/index.js b/index.js index a8fe80be..4a946a51 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ - const url = 'https://trektravel.herokuapp.com/' const reportStatus = (message) => { @@ -6,21 +5,39 @@ const reportStatus = (message) => { }; +const makeFormInputBox = function makeFormInputBox(name) { + let inputField = + `
    +
    + ${name} +
    + +
    `; + return inputField; +} + +const registerHTML = function registerHTML(input1, input2) { + let inputField = + `
    +

    register for trip

    +
    ` + + makeFormInputBox(input1) + + makeFormInputBox(input2) + + ` +
    +
    `; + return inputField; +} + + const reportApiError = (error) => { console.log("encountered error when posting", error); let errorHtml = `

    ${error.message}