From 85d8d10641dee1cdb9c65beb455552b7da30422d Mon Sep 17 00:00:00 2001 From: Mariana Date: Tue, 21 Nov 2017 15:00:31 -0800 Subject: [PATCH 1/8] Show list of trips --- trek.css | 0 trek.html | 24 ++++++++++++++++++++++++ trek.js | 22 ++++++++++++++++++++++ 3 files changed, 46 insertions(+) create mode 100644 trek.css create mode 100644 trek.html create mode 100644 trek.js diff --git a/trek.css b/trek.css new file mode 100644 index 00000000..e69de29b diff --git a/trek.html b/trek.html new file mode 100644 index 00000000..1121ad11 --- /dev/null +++ b/trek.html @@ -0,0 +1,24 @@ + + + + + + + + +
+ + +

+
+ + + + + + diff --git a/trek.js b/trek.js new file mode 100644 index 00000000..0120968a --- /dev/null +++ b/trek.js @@ -0,0 +1,22 @@ +const url = 'https://trektravel.herokuapp.com/trips'; + +$(document).ready( function() { + $('#load').on('click', function(){ + $.get(url, + (response) => { + $('h1').append('List of Trips'); + for (trip of response) { + let tripName = `

  • ${trip.name}

    +
    • ` + $('#trips ul').append(tripName); + } + }) + }); +}); + + + + + +//

    Continent: ${trip.continent}

    +//

    Weeks: ${trip.weeks}

    From ed5929315127056ebc6adfe57425543446fc39d0 Mon Sep 17 00:00:00 2001 From: Mariana Date: Wed, 22 Nov 2017 10:13:56 -0800 Subject: [PATCH 2/8] Show the details of one trip --- trek.html | 11 +++++++++++ trek.js | 46 ++++++++++++++++++++++++++++++++++++---------- 2 files changed, 47 insertions(+), 10 deletions(-) diff --git a/trek.html b/trek.html index 1121ad11..41992b79 100644 --- a/trek.html +++ b/trek.html @@ -11,6 +11,17 @@

      +
      + +
      + + + + + + + +
      + + + + + + +
      + + + +
      + +
      - +
      - -

      -
        -
        -
        - - +
        + +
        +
        +

        +
          +
          + + +
          + + + +
          diff --git a/trek.js b/trek.js index d69a12ff..75dfa7b8 100644 --- a/trek.js +++ b/trek.js @@ -1,12 +1,13 @@ $(document).ready( function() { let loadTrips = function loadTrips(){ + $('#load').hide(); const urlTripName = 'https://trektravel.herokuapp.com/trips'; $.get(urlTripName, (response) => { $('h1').append('List of Trips'); for (trip of response) { - let tripName = `

        • ${trip.name}

          + let tripName = `
        • ${trip.name}
          • ` $('#trips ul').append(tripName); @@ -22,17 +23,34 @@ $(document).ready( function() { $.get(urlTripDetails, function(response) { // tla vez no necesito el id this_trip + //

          Id: ${response.id}

          let details = ` -

          Id: ${response.id}

          -

          Name: ${response.name}

          -

          Destination: ${response.destination}

          -

          Continent: ${response.continent}

          -

          About: ${response.about}

          -

          Category: ${response.category}

          -

          Weeks: ${response.weeks}

          -

          Cost: ${response.cost}

          - `; +
          +

          ${response.name}

          + + + + + + + + + + + + + + + +
          WeeksCostDestinationContinentCategory
          ${response.weeks}${response.cost}${response.destination}${response.continent}${response.category}
          +

          ${response.about}

          + +
          `; + + // $('.grid-x').append(details); $('#tripDetail').html(details); + // $('.grid-x').html(details); + $('#reserve').on('click', function(){ let tripId = $(this).attr('data-trip'); generateForm(tripId); @@ -61,7 +79,7 @@ $(document).ready( function() { - + ` $('#reserveTrip').html(form); @@ -88,7 +106,8 @@ $(document).ready( function() { // Events - $('ul').on('click', 'h3', function(){ + $('ul').on('click', 'a', function(){ + let tripId = $(this).attr('data-id'); loadOneTrip(tripId); }); From 8fa14365b9f8c4795de35ba280a10dd864844aa0 Mon Sep 17 00:00:00 2001 From: Mariana Date: Sat, 25 Nov 2017 18:23:29 -0800 Subject: [PATCH 6/8] Display form properly --- trek.css | 20 ++++++++++++++++++++ trek.html | 4 +++- trek.js | 19 +++++++++++-------- 3 files changed, 34 insertions(+), 9 deletions(-) diff --git a/trek.css b/trek.css index 3d8c6134..6886585d 100644 --- a/trek.css +++ b/trek.css @@ -20,3 +20,23 @@ main { padding: 3% 1% 1% 2% ; } + +.good { + padding: 2%; + background-color: #ade9ff; + font-size: 1.2em; +} + +.bad { + padding: 2%; + background-color: #fcc4d0; + font-size: 1.2em; +} + +input:invalid { + box-shadow: 0 0 5px 1px red; +} + +input:focus:invalid { + outline: none; +} diff --git a/trek.html b/trek.html index 74890418..d8f71280 100644 --- a/trek.html +++ b/trek.html @@ -39,7 +39,7 @@ -
          +
          @@ -47,6 +47,8 @@

            +
            +
            diff --git a/trek.js b/trek.js index 75dfa7b8..72b84154 100644 --- a/trek.js +++ b/trek.js @@ -47,9 +47,7 @@ $(document).ready( function() { `; - // $('.grid-x').append(details); $('#tripDetail').html(details); - // $('.grid-x').html(details); $('#reserve').on('click', function(){ let tripId = $(this).attr('data-trip'); @@ -62,9 +60,7 @@ $(document).ready( function() { const successCallback = function(response) { - console.log("POST request was successful"); - console.log(response); - let generatedHMTL = `

            this is the response ${ response }

            ` + let generatedHMTL = `

            You reserve this trip successfully

            ` // let generatedHMTL = '

            Everything went great,'; // generatedHMTL += `and your trip ${ response["name"] } has been added to the DB!

            `; $('#ajax-results').html(generatedHMTL); @@ -72,21 +68,26 @@ $(document).ready( function() { let generateForm = function generateForm(id){ + $('#reserve').hide(); event.preventDefault(); let form = ` - + - - + + ` $('#reserveTrip').html(form); $('#submitForm').on('click', function(){ event.preventDefault(); + reserveTrip(id); + $('#tripDetail').hide(); + $('form').hide(); + }); }; @@ -100,6 +101,8 @@ $(document).ready( function() { let formData = $('#reserveTrip').serialize(); $.post(urlReservation, formData, successCallback).fail((response) => { + let badRequest = `< class=bad p>Something went wrong making your reservation

            ` + $('#ajax-results').html(badRequest); console.log("Didn't go so hot"); }); }; From aa4b30b814bbd85f285be4ad37505e3858889a78 Mon Sep 17 00:00:00 2001 From: Mariana Date: Sun, 26 Nov 2017 19:00:21 -0800 Subject: [PATCH 7/8] Show errors better --- trek.html | 10 ++++---- trek.js | 70 ++++++++++++++++++++++++++++++++++--------------------- 2 files changed, 48 insertions(+), 32 deletions(-) diff --git a/trek.html b/trek.html index d8f71280..c21c8114 100644 --- a/trek.html +++ b/trek.html @@ -15,13 +15,10 @@ src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"> + - - - - + @@ -45,9 +42,10 @@

              +
              -
              +
              diff --git a/trek.js b/trek.js index 72b84154..a6748686 100644 --- a/trek.js +++ b/trek.js @@ -2,28 +2,34 @@ $(document).ready( function() { let loadTrips = function loadTrips(){ $('#load').hide(); + // $('#trips').show(); const urlTripName = 'https://trektravel.herokuapp.com/trips'; $.get(urlTripName, (response) => { - $('h1').append('List of Trips'); + // $('h1').append('List of Trips'); + $('h1').html('List of Trips'); for (trip of response) { let tripName = `
            • ${trip.name}
              • ` $('#trips ul').append(tripName); + // $('#trips ul').html(tripName); } - }) + }).fail((response) => { + let badRequest = `

              Something went wrong loading trip options

              ` + $('#ajax-results').html(badRequest); + console.log("Didn't go so hot"); + }); }; + // End loadTrips let loadOneTrip = function loadOneTrip(tripId){ - + $('.good').hide(); let urlTripDetails = 'https://trektravel.herokuapp.com/trips/' urlTripDetails += tripId; $.get(urlTripDetails, function(response) { - // tla vez no necesito el id this_trip - //

              Id: ${response.id}

              let details = `

              ${response.name}

              @@ -48,15 +54,18 @@ $(document).ready( function() {
              `; $('#tripDetail').html(details); - + $('#tripDetail').show(); $('#reserve').on('click', function(){ let tripId = $(this).attr('data-trip'); generateForm(tripId); }); - }) + }).fail((response) => { + let badRequest = `

              Something went wrong loading this trip

              ` + $('#ajax-results').html(badRequest); + console.log("Didn't go so hot"); + }); }; // end loadOneTrip - // Necesito pasar parametros???? const successCallback = function(response) { @@ -64,31 +73,38 @@ $(document).ready( function() { // let generatedHMTL = '

              Everything went great,'; // generatedHMTL += `and your trip ${ response["name"] } has been added to the DB!

              `; $('#ajax-results').html(generatedHMTL); + // $('#trips').hide(); + // $('#load').show(); }; let generateForm = function generateForm(id){ $('#reserve').hide(); + $('form').show(); - event.preventDefault(); - let form = - ` - - - - - - ` - $('#reserveTrip').html(form); + // TODO puedo quitar el required + event.preventDefault(); + let form = + ` + + + + + + ` - $('#submitForm').on('click', function(){ - event.preventDefault(); + // $('#reserveTrip').validate(); + $('#reserveTrip').html(form); - reserveTrip(id); - $('#tripDetail').hide(); - $('form').hide(); + $('#submitForm').on('click', function(){ - }); + event.preventDefault(); + + reserveTrip(id); + $('#tripDetail').hide(); + $('form').hide(); + + }); }; @@ -99,14 +115,15 @@ $(document).ready( function() { let formData = $('#reserveTrip').serialize(); - $.post(urlReservation, formData, successCallback).fail((response) => { - let badRequest = `< class=bad p>Something went wrong making your reservation

              ` + let badRequest = `

              Something went wrong making your reservation

              ` $('#ajax-results').html(badRequest); console.log("Didn't go so hot"); }); }; + + // Events $('ul').on('click', 'a', function(){ @@ -116,6 +133,7 @@ $(document).ready( function() { }); $('#load').on('click', function(){ + $('.good').hide(); loadTrips(); }); From b6adc3ee8ab03b32ba2e4d47c1faf9a2af6949bc Mon Sep 17 00:00:00 2001 From: Mariana Date: Sun, 26 Nov 2017 19:03:04 -0800 Subject: [PATCH 8/8] Delete comments --- trek.html | 65 +++++++++++++++++++++++++------------------------------ trek.js | 14 +----------- 2 files changed, 31 insertions(+), 48 deletions(-) diff --git a/trek.html b/trek.html index c21c8114..c325b1aa 100644 --- a/trek.html +++ b/trek.html @@ -1,57 +1,52 @@ - + - TravelNow - - + TravelNow + + + + + + + + + - - - +
              - - - - - - - + -
              +
              - +
              +
              -
              - -
              -
              - -
              +
              -
              -
              -

              -
                +
                +
                +

                +
                  -
                  +
                  -
                  +
                  -
                  +
                  -
                  - - + + + diff --git a/trek.js b/trek.js index a6748686..29f8d2fb 100644 --- a/trek.js +++ b/trek.js @@ -6,14 +6,12 @@ $(document).ready( function() { const urlTripName = 'https://trektravel.herokuapp.com/trips'; $.get(urlTripName, (response) => { - // $('h1').append('List of Trips'); $('h1').html('List of Trips'); for (trip of response) { let tripName = `
                • ${trip.name}
                  • ` $('#trips ul').append(tripName); - // $('#trips ul').html(tripName); } }).fail((response) => { let badRequest = `

                  Something went wrong loading trip options

                  ` @@ -70,11 +68,7 @@ $(document).ready( function() { const successCallback = function(response) { let generatedHMTL = `

                  You reserve this trip successfully

                  ` - // let generatedHMTL = '

                  Everything went great,'; - // generatedHMTL += `and your trip ${ response["name"] } has been added to the DB!

                  `; $('#ajax-results').html(generatedHMTL); - // $('#trips').hide(); - // $('#load').show(); }; @@ -82,7 +76,7 @@ $(document).ready( function() { $('#reserve').hide(); $('form').show(); - // TODO puedo quitar el required + event.preventDefault(); let form = ` @@ -92,7 +86,6 @@ $(document).ready( function() { ` - // $('#reserveTrip').validate(); $('#reserveTrip').html(form); @@ -122,8 +115,6 @@ $(document).ready( function() { }); }; - - // Events $('ul').on('click', 'a', function(){ @@ -137,7 +128,4 @@ $(document).ready( function() { loadTrips(); }); - - - });