From ab02c5ce94ee2075892e9f905e54e1eb36e61fa8 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Tue, 22 May 2018 15:58:50 -0700 Subject: [PATCH 01/15] added initial setp to js and html --- index.css | 0 index.html | 22 ++++++++++++++++++++++ index.js | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 56 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..e69de29b diff --git a/index.html b/index.html new file mode 100644 index 00000000..edc29a64 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + Trippy Finder + + +
+ +
+ + +
+ + + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..7aca6a9e --- /dev/null +++ b/index.js @@ -0,0 +1,34 @@ +const URL = "https://ada-backtrek-api.herokuapp.com/trips"; + +const reportStatus = (message) => { + $('#status-message').html(message); +} + + +const loadTrips = () => { + // Prep work + const tripList = $('#trip-list'); + tripList.empty(); + + reportStatus('Loading trips! Please wait....'); + + // Actually load the trips + // axios is linked at the bottom of index.html + axios.get(URL) + .then((response) => { + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + + reportStatus('Trips loaded :)'); + }) + // axios is giving us this error object to use + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message}`) + }); +}; + +$(document).ready(() => { + $('#load').click(loadTrips); +}); From e0add9805538639283caec1c0ee9682eb5070eca Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 09:26:53 -0700 Subject: [PATCH 02/15] added css for scrolling --- index.css | 21 +++++++++++++++++++++ index.html | 7 ++++++- index.js | 8 +++++--- 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index e69de29b..0e0b81ee 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,21 @@ +main { + font-family: sans-serif; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-areas: + "one two"; +} + +.all-trips { + grid-area: one; +} + +.trip-details { + border: 3px solid black; + position: fixed; + top: 20px; + margin-left: 820px; + background-color: #0f0 ! important; + height: 200px; + width: 50%; + } diff --git a/index.html b/index.html index edc29a64..70516783 100644 --- a/index.html +++ b/index.html @@ -3,20 +3,25 @@ Trippy Finder + +
    - +
      +
      blah
      + +
      diff --git a/index.js b/index.js index 7aca6a9e..b38eba44 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,4 @@ -const URL = "https://ada-backtrek-api.herokuapp.com/trips"; +const TRIPSURL = "https://ada-backtrek-api.herokuapp.com/trips"; const reportStatus = (message) => { $('#status-message').html(message); @@ -14,10 +14,10 @@ const loadTrips = () => { // Actually load the trips // axios is linked at the bottom of index.html - axios.get(URL) + axios.get(TRIPSURL) .then((response) => { response.data.forEach((trip) => { - tripList.append(`
    • ${trip.name}
      • `); + tripList.append(`
    • ${trip.name}
      • `); }); reportStatus('Trips loaded :)'); @@ -29,6 +29,8 @@ const loadTrips = () => { }); }; + + $(document).ready(() => { $('#load').click(loadTrips); }); From d0e21ad4e3ad42778ebd66d9176bbfcd2165cadc Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 10:06:30 -0700 Subject: [PATCH 03/15] added on-click jquery to list of trips --- index.css | 4 ++++ index.html | 2 +- index.js | 9 +++++++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 0e0b81ee..5f834506 100644 --- a/index.css +++ b/index.css @@ -6,6 +6,10 @@ main { "one two"; } +#status-message { + grid-area: one; +} + .all-trips { grid-area: one; } diff --git a/index.html b/index.html index 70516783..7d0e12c5 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
        -
        blah
        +
        blah
        diff --git a/index.js b/index.js index b38eba44..87788c7c 100644 --- a/index.js +++ b/index.js @@ -17,7 +17,7 @@ const loadTrips = () => { axios.get(TRIPSURL) .then((response) => { response.data.forEach((trip) => { - tripList.append(`
      • ${trip.name}
        • `); + tripList.append(`
      • ${trip.name}
        • `); }); reportStatus('Trips loaded :)'); @@ -30,7 +30,12 @@ const loadTrips = () => { }; - $(document).ready(() => { $('#load').click(loadTrips); + $('#trip-list').on('click', '.trip-link', function(event) { + // event.preventDefault(); + console.log('lkasjdfl'); + let id = $(this).attr('id'); + alert(id); + }); }); From 6b02990cb6ee5cc31305da39d8c5bf370ddbc2b0 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 10:16:20 -0700 Subject: [PATCH 04/15] added api request for individual trips --- index.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 87788c7c..22d4a450 100644 --- a/index.js +++ b/index.js @@ -32,10 +32,29 @@ const loadTrips = () => { $(document).ready(() => { $('#load').click(loadTrips); + + // clicking on individual trip to load details into trip-details section $('#trip-list').on('click', '.trip-link', function(event) { - // event.preventDefault(); - console.log('lkasjdfl'); + event.preventDefault(); let id = $(this).attr('id'); - alert(id); + + const tripDetails = $('#trip-details'); + tripDetails.empty(); + console.log('asdfalksj') + + let pageURL = TRIPSURL + `/${id}` + axios.get(pageURL) + .then((response) => { + console.log(response.data) + tripDetails.append(response.data.name); + + reportStatus('Trip details loaded :)'); + }) + // axios is giving us this error object to use + .catch((error) => { + console.log(error); + reportStatus(`Error: ${error.message}`) + }); + }); }); From e0c1c0e6d1a53649aea7b265da5a56c6ad9ac3b3 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 10:24:30 -0700 Subject: [PATCH 05/15] updated css to reinstate the fixed scrolling for trip-details section --- index.css | 8 ++++---- index.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/index.css b/index.css index 5f834506..4f0df79f 100644 --- a/index.css +++ b/index.css @@ -14,12 +14,12 @@ main { grid-area: one; } -.trip-details { +#trip-details { border: 3px solid black; position: fixed; top: 20px; - margin-left: 820px; + margin-left: 600px; background-color: #0f0 ! important; - height: 200px; - width: 50%; + height: auto; + width: 57%; } diff --git a/index.js b/index.js index 22d4a450..b5c818c3 100644 --- a/index.js +++ b/index.js @@ -46,7 +46,7 @@ $(document).ready(() => { axios.get(pageURL) .then((response) => { console.log(response.data) - tripDetails.append(response.data.name); + tripDetails.append(`

        ${response.data.name}

        ${response.data.continent}

        About:

        ${response.data.about}

        Category:

        ${response.data.category}

        `); reportStatus('Trip details loaded :)'); }) From 6cfd736d3926793aeba439b2457e0c0c396ebb7b Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 13:17:42 -0700 Subject: [PATCH 06/15] added reservation form --- index.css | 16 ++++++++++++++-- index.html | 2 +- index.js | 35 ++++++++++++++++++++++++++++++++++- 3 files changed, 49 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 4f0df79f..c1744344 100644 --- a/index.css +++ b/index.css @@ -18,8 +18,20 @@ main { border: 3px solid black; position: fixed; top: 20px; - margin-left: 600px; + margin-left: 650px; background-color: #0f0 ! important; - height: auto; + height: 400px; width: 57%; + overflow-y: scroll; + } + +#reserve-trip { + border: 3px solid black; + position: fixed; + top: 450px; + margin-left: 650px; + background-color: blue; + height: 200px; + width: 57%; + overflow-y: none; } diff --git a/index.html b/index.html index 7d0e12c5..f4f35c3a 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
        blah
        - +
        blahblah
        diff --git a/index.js b/index.js index b5c818c3..cf55261e 100644 --- a/index.js +++ b/index.js @@ -30,6 +30,32 @@ const loadTrips = () => { }; +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(); + + let tripData = { + name: $(`input[name="name"]`).val(), + age: $(`input[name="age"]`).val(), + email: $(`input[name="email"]`).val() + }; + + axios.post(URL, petData) + .then((response) => { + console.log('we successed it!') + }) + .catch((error) => { + console.log('dangit'); + }); + +}; + +const reservationForm = '
        Age
        ' + + + $(document).ready(() => { $('#load').click(loadTrips); @@ -38,15 +64,21 @@ $(document).ready(() => { event.preventDefault(); let id = $(this).attr('id'); + // empty sections so you can add new content with click const tripDetails = $('#trip-details'); tripDetails.empty(); + const reserveTrip = $('#reserve-trip') + reserveTrip.empty(); + console.log('asdfalksj') let pageURL = TRIPSURL + `/${id}` axios.get(pageURL) .then((response) => { console.log(response.data) - tripDetails.append(`

        ${response.data.name}

        ${response.data.continent}

        About:

        ${response.data.about}

        Category:

        ${response.data.category}

        `); + tripDetails.append(`

        ${response.data.name}

        ${response.data.continent}

        About:

        ${response.data.about}

        Category:

        ${response.data.category}

        Weeks:

        ${response.data.weeks}

        Cost:

        ${response.data.cost}`); + + reserveTrip.append(`

        ${response.data.name}

        ` + reservationForm) reportStatus('Trip details loaded :)'); }) @@ -56,5 +88,6 @@ $(document).ready(() => { reportStatus(`Error: ${error.message}`) }); + $('#trip-form').submit(createReservation); }); }); From 8f9d73c42ccf3da5ddf843f24cae6fb12a1c00b2 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 14:50:17 -0700 Subject: [PATCH 07/15] changed css so reservation form is hidden --- index.css | 10 +++++++++- index.html | 20 +++++++++++++++++++- index.js | 54 ++++++++++++++++++++++++++++-------------------------- 3 files changed, 56 insertions(+), 28 deletions(-) diff --git a/index.css b/index.css index c1744344..d8aea616 100644 --- a/index.css +++ b/index.css @@ -25,7 +25,7 @@ main { overflow-y: scroll; } -#reserve-trip { +.reserve-trip { border: 3px solid black; position: fixed; top: 450px; @@ -35,3 +35,11 @@ main { width: 57%; overflow-y: none; } + +.hidden-display { + display: none; +} + +.show { + +} diff --git a/index.html b/index.html index f4f35c3a..aa7fcda2 100644 --- a/index.html +++ b/index.html @@ -15,9 +15,27 @@
        blah
        -
        blahblah
        +
        +
        +
        + + +
        +
        + + +
        + +
        + + +
        + + +
        +
        diff --git a/index.js b/index.js index cf55261e..333a0fba 100644 --- a/index.js +++ b/index.js @@ -31,63 +31,65 @@ const loadTrips = () => { 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(); + let tripID = $(`input[name="id"]`).val(); let tripData = { name: $(`input[name="name"]`).val(), age: $(`input[name="age"]`).val(), email: $(`input[name="email"]`).val() }; - axios.post(URL, petData) + axios.post(`${URL}/${tripID}`, tripData) .then((response) => { console.log('we successed it!') }) .catch((error) => { console.log('dangit'); }); - }; -const reservationForm = '
        Age
        ' - - - -$(document).ready(() => { - $('#load').click(loadTrips); - - // clicking on individual trip to load details into trip-details section - $('#trip-list').on('click', '.trip-link', function(event) { - event.preventDefault(); - let id = $(this).attr('id'); - +const showTripDetails = (id) => { // empty sections so you can add new content with click const tripDetails = $('#trip-details'); tripDetails.empty(); - const reserveTrip = $('#reserve-trip') + const reserveTrip = $('#reserve-trip'); reserveTrip.empty(); - console.log('asdfalksj') - let pageURL = TRIPSURL + `/${id}` axios.get(pageURL) .then((response) => { - console.log(response.data) - tripDetails.append(`

        ${response.data.name}

        ${response.data.continent}

        About:

        ${response.data.about}

        Category:

        ${response.data.category}

        Weeks:

        ${response.data.weeks}

        Cost:

        ${response.data.cost}`); - - reserveTrip.append(`

        ${response.data.name}

        ` + reservationForm) + tripDetails.append(`

        ${response.data.name}

        ${response.data.continent}

        About:

        ${response.data.about}

        Category:

        ${response.data.category}

        Weeks:

        ${response.data.weeks}

        Cost:

        ${response.data.cost}`); reportStatus('Trip details loaded :)'); }) // axios is giving us this error object to use .catch((error) => { console.log(error); - reportStatus(`Error: ${error.message}`) + reportStatus(`Error: ${error.message}`); }); +} + +const buildReservationForm = (id) => { + $(".hidden-display").removeClass("hidden-display").addClass("show").attr("id",id) + +} + + +$(document).ready(() => { + $('#load').click(loadTrips); + + // clicking on individual trip to load details into trip-details section + $('#trip-list').on('click', '.trip-link', function(event) { + event.preventDefault(); + let id = $(this).attr('id'); + + showTripDetails(id); + buildReservationForm(id); + + $(".hidden-display").removeClass("hidden-display").addClass("trip-form"); - $('#trip-form').submit(createReservation); }); + + $('#trip-form').submit(createReservation); }); From d382967db62a07beeac369b58f30a45752f32bbd Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 15:23:08 -0700 Subject: [PATCH 08/15] trip for has id --- index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 333a0fba..5a800e00 100644 --- a/index.js +++ b/index.js @@ -71,8 +71,11 @@ const showTripDetails = (id) => { } const buildReservationForm = (id) => { - $(".hidden-display").removeClass("hidden-display").addClass("show").attr("id",id) + const reserveTrip = $('#reserve-trip'); + reserveTrip.empty(); + $(".reserve-trip").removeClass("hidden-display").addClass("trip-form-container") + $(".trip-form").removeAttr( "id" ).attr("id", id); } @@ -84,12 +87,11 @@ $(document).ready(() => { event.preventDefault(); let id = $(this).attr('id'); + showTripDetails(id); buildReservationForm(id); - $(".hidden-display").removeClass("hidden-display").addClass("trip-form"); - }); - + $('#trip-form').submit(createReservation); }); From a4aa1de79e8f824980ec70a571de62a7dc9dcd30 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Wed, 23 May 2018 16:11:10 -0700 Subject: [PATCH 09/15] updated css for trip list and changed list elements to li rather than a --- index.css | 10 +++++++-- index.js | 66 +++++++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 60 insertions(+), 16 deletions(-) diff --git a/index.css b/index.css index d8aea616..a5da7522 100644 --- a/index.css +++ b/index.css @@ -3,15 +3,21 @@ main { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: - "one two"; + "one two" + "three two"; } #status-message { grid-area: one; } +li:hover { + cursor: default; +} + .all-trips { - grid-area: one; + grid-area: three; + } #trip-details { diff --git a/index.js b/index.js index 5a800e00..59e44736 100644 --- a/index.js +++ b/index.js @@ -1,8 +1,19 @@ -const TRIPSURL = "https://ada-backtrek-api.herokuapp.com/trips"; +const TRIPSURL = "https://ada-backtrek-api.herokuapp.com/trips/"; const reportStatus = (message) => { $('#status-message').html(message); -} +}; + +const reportError = (message, errors) => { + let content = `

        ${message}

          `; + for (const field in errors) { + for (const problem of errors[field]) { + content += `
        • ${field}: ${problem}
          • `; + } + } + content += "
        "; + reportStatus(content); +}; const loadTrips = () => { @@ -17,35 +28,55 @@ const loadTrips = () => { axios.get(TRIPSURL) .then((response) => { response.data.forEach((trip) => { - tripList.append(`
      • ${trip.name}
        • `); + tripList.append(``); }); reportStatus('Trips loaded :)'); }) // axios is giving us this error object to use .catch((error) => { - console.log(error); - reportStatus(`Error: ${error.message}`) + 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}`); + } }); }; const createReservation = (event) => { event.preventDefault(); + console.log(event); + let tripID = $(".trip-form").attr('id'); - let tripID = $(`input[name="id"]`).val(); let tripData = { name: $(`input[name="name"]`).val(), age: $(`input[name="age"]`).val(), email: $(`input[name="email"]`).val() }; - axios.post(`${URL}/${tripID}`, tripData) + let postURL = TRIPSURL + tripID + '/reservations' + console.log(postURL); + console.log(tripData) + + axios.post(postURL, tripData) .then((response) => { console.log('we successed it!') }) .catch((error) => { - console.log('dangit'); + 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}`); + } }); }; @@ -64,10 +95,17 @@ const showTripDetails = (id) => { reportStatus('Trip details loaded :)'); }) // axios is giving us this error object to use - .catch((error) => { - console.log(error); - reportStatus(`Error: ${error.message}`); - }); + .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}`); + } + }); } const buildReservationForm = (id) => { @@ -92,6 +130,6 @@ $(document).ready(() => { buildReservationForm(id); }); - - $('#trip-form').submit(createReservation); + + $('.trip-form').submit(createReservation); }); From a74847dfb9122ee5c122651f1a8fbd0bfac9e00e Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Fri, 25 May 2018 15:14:40 -0700 Subject: [PATCH 10/15] dropped old styling. Added top nav bar with dropdown links --- index.css | 152 +++++++++++++++++++++++++++++++++++++++++++++----- index.html | 38 ++++++++++--- index.js | 30 +++++----- newindex.html | 94 +++++++++++++++++++++++++++++++ 4 files changed, 279 insertions(+), 35 deletions(-) create mode 100644 newindex.html diff --git a/index.css b/index.css index a5da7522..de745146 100644 --- a/index.css +++ b/index.css @@ -1,3 +1,86 @@ +* { + margin: 0px; +} + +/* Navbar container */ +.navbar { + overflow: hidden; + background-color: #333; + font-family: Arial; +} + +/* Links inside the navbar */ +.navbar a { + float: left; + font-size: 16px; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +/* The dropdown container */ +.dropdown { + float: left; + overflow: hidden; +} + +/* Dropdown button */ +.dropdown .dropbtn { + font-size: 16px; + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; /* Important for vertical align on mobile phones */ + margin: 0; /* Important for vertical align on mobile phones */ +} + +/* Add a red background color to navbar links on hover */ +.navbar a:hover, .dropdown:hover .dropbtn { + background-color: red; +} + +/* Dropdown content (hidden by default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +/* Links inside the dropdown */ +.dropdown-content a { + float: none; + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + text-align: left; +} + +/* Add a grey background color to dropdown links on hover */ +.dropdown-content a:hover { + background-color: #ddd; +} + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content { + display: block; +} + + + + +/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ + +/* body { + background-color: #EEEEEE; + margin: 0px; +} main { font-family: sans-serif; display: grid; @@ -7,6 +90,12 @@ main { "three two"; } +#title-text { + text-align: right; + font-size: 3rem; + padding-right: 100px; +} + #status-message { grid-area: one; } @@ -17,35 +106,72 @@ li:hover { .all-trips { grid-area: three; + background: yellow; } +#load { + padding: 10px; + margin: 10px; } #trip-details { - border: 3px solid black; position: fixed; - top: 20px; - margin-left: 650px; - background-color: #0f0 ! important; - height: 400px; - width: 57%; overflow-y: scroll; + height: 400px; + width: 90%; + background-color: white; } +#detail-container { + justify-content: center; + align-items: center; +} + .reserve-trip { - border: 3px solid black; + border-bottom: 2px solid black; position: fixed; - top: 450px; - margin-left: 650px; - background-color: blue; + top: 580px; + background-color: #FFFFFF; height: 200px; - width: 57%; overflow-y: none; - } +} .hidden-display { display: none; } -.show { +.trip-form-container { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + margin-left: 750px; +} + +.trip-form { + text-align: center; + padding-left: 200px; + padding-right: 200px; +} +.trip-form div { + text-align: center; + padding: 10px; +} + +img { + height: 100%; + width: 100%; +} +#trip-list { + margin-top: 0px; } + +h2 { + color: white; +} + +p { + margin: 0px; + padding: 0px; +} */ diff --git a/index.html b/index.html index aa7fcda2..7754ac09 100644 --- a/index.html +++ b/index.html @@ -5,16 +5,38 @@ Trippy Finder - -
        -
        -
        - -
          + + + + + + + + + +
          +
          -
          blah
          + +
          +
            +

            Trip Details

            +

            @@ -33,7 +55,7 @@ - +
            diff --git a/index.js b/index.js index 59e44736..f1f09724 100644 --- a/index.js +++ b/index.js @@ -16,7 +16,9 @@ const reportError = (message, errors) => { }; -const loadTrips = () => { +const loadTrips = (event) => { + event.preventDefault(); + // Prep work const tripList = $('#trip-list'); tripList.empty(); @@ -90,22 +92,22 @@ const showTripDetails = (id) => { let pageURL = TRIPSURL + `/${id}` axios.get(pageURL) .then((response) => { - tripDetails.append(`

            ${response.data.name}

            ${response.data.continent}

            About:

            ${response.data.about}

            Category:

            ${response.data.category}

            Weeks:

            ${response.data.weeks}

            Cost:

            ${response.data.cost}`); + tripDetails.append(`

            ${response.data.name}

            ${response.data.continent}

            About:

            ${response.data.about}

            Category:

            ${response.data.category}

            Weeks:

            ${response.data.weeks}

            Cost:

            ${response.data.cost}`); reportStatus('Trip details loaded :)'); }) - // axios is giving us this error object to use - .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}`); - } - }); + // axios is giving us this error object to use + .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}`); + } + }); } const buildReservationForm = (id) => { diff --git a/newindex.html b/newindex.html new file mode 100644 index 00000000..2bcf1c5c --- /dev/null +++ b/newindex.html @@ -0,0 +1,94 @@ + + +Trippy Finder + + + + + + + + + + +
            + + +
            + + +
            + +
            +
            + Avatar +
            +

            Trippy Finder

            +
            +
            +
            +
            + + +
            +
            +
              +
              +
              +

              + + +
              + + +
              + +
              + +
              +
              +
              + + +
              + +
              + + +
              + +
              + + +
              + + +
              +
              + +
              + + +
              + + +
              + +
              +

              Find me on social media.

              + + + + + + +

              Powered by w3.css

              +
              + + + + + + From 5d337ef88b1527df1c8cd4b6ff2d223597365db6 Mon Sep 17 00:00:00 2001 From: Steffany Brown Date: Fri, 25 May 2018 15:27:13 -0700 Subject: [PATCH 11/15] added header --- index.css | 18 ++++++++++++++++++ index.html | 48 +++++++++++++++++++++++------------------------- index.js | 2 +- 3 files changed, 42 insertions(+), 26 deletions(-) diff --git a/index.css b/index.css index de745146..e4336380 100644 --- a/index.css +++ b/index.css @@ -2,6 +2,24 @@ margin: 0px; } +main { + display: grid; + border: 3px solid black; + grid-template-rows: 400px 400px; + grid-template-areas: + "top" + "bottom"; +} + +header { + grid-area: top; +} + +header img { + height: 100%; + width: 100%; +} + /* Navbar container */ .navbar { overflow: hidden; diff --git a/index.html b/index.html index 7754ac09..d52ee9b5 100644 --- a/index.html +++ b/index.html @@ -6,38 +6,36 @@ - -