From 5e5d0cd030741593cd5e7c25fa9bf6a3d14a4209 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Tue, 23 May 2017 15:23:05 -0700 Subject: [PATCH 01/17] got the names of the trips to show up --- index.html | 14 ++++++++++++++ trek.js | 25 +++++++++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 index.html create mode 100644 trek.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..366a8f7f --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + + + + + +
+ + + diff --git a/trek.js b/trek.js new file mode 100644 index 00000000..f60328b9 --- /dev/null +++ b/trek.js @@ -0,0 +1,25 @@ +var url = 'https://trektravel.herokuapp.com/trips'; + +var successCallback = function(response) { + console.log("Success!") + console.log(response); + + var target = $('#trips'); + for (var i = 0; i < response.length; i++) { + trip = response[i]; + target.append("
  • " + trip['name'] + "
    • "); + } +} + +var failureCallback = function() { + console.log("Didn't work"); + $("#errors").html("

    AJAX request failed!

    "); +} + +var clickHandler = function() { + $.get(url, successCallback) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. +}; +//as soon as the document is ready, load the page +$(document).ready(function() { + $('#load').click(clickHandler); +}); From a0b17fdfeedfc7a89d5e4d7d4711260a91a9d957 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Tue, 23 May 2017 15:33:11 -0700 Subject: [PATCH 02/17] Added continent trip is one, week duration and formatting --- index.html | 2 +- trek.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 366a8f7f..dab2c18f 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,6 @@
    - +
    diff --git a/trek.js b/trek.js index f60328b9..31bba106 100644 --- a/trek.js +++ b/trek.js @@ -7,7 +7,9 @@ var successCallback = function(response) { var target = $('#trips'); for (var i = 0; i < response.length; i++) { trip = response[i]; - target.append("
  • " + trip['name'] + "
    • "); + target.append("

    " + trip['name'] + "

    " + + ""); } } From c9d8200ad8770ab7215535ea367ad59afce05b15 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Wed, 24 May 2017 10:14:17 -0700 Subject: [PATCH 03/17] refactored to utilize underscore in html --- index.html | 15 +++++++++++++- trek.js | 57 ++++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 61 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index dab2c18f..769563e1 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,23 @@ +
    -
    +
    + + diff --git a/trek.js b/trek.js index 31bba106..a82dfe85 100644 --- a/trek.js +++ b/trek.js @@ -1,17 +1,21 @@ -var url = 'https://trektravel.herokuapp.com/trips'; +// var url = 'https://trektravel.herokuapp.com/trips'; + +var tripUrl = 'https://trektravel.herokuapp.com/trips'; var successCallback = function(response) { console.log("Success!") console.log(response); - var target = $('#trips'); - for (var i = 0; i < response.length; i++) { - trip = response[i]; - target.append("

    " + trip['name'] + "

    " + - "
      " + "
    • " + "Continent: " + trip['continent'] + "
      • " + - "
    • " + "Duration: " + trip['weeks'] + " weeks" + "
      • " + "
    "); - } -} + $(document).ready(function() { + var tripTemplate = _.template($('#trips-template').html()); + for (var i = 0; i < response.length; i++) { + var generatedHtml = tripTemplate ({ + data: response[i] + }); + $("#trips-list").append(generatedHtml); + } + }) +}; var failureCallback = function() { console.log("Didn't work"); @@ -19,9 +23,42 @@ var failureCallback = function() { } var clickHandler = function() { - $.get(url, successCallback) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. + $.get(tripUrl, successCallback) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. }; //as soon as the document is ready, load the page $(document).ready(function() { $('#load').click(clickHandler); }); + + + + + +////////////////////////////////////////////////////// +// var successCallback = function(response) { +// console.log("Success!") +// console.log(response); +// +// var target = $('#trips'); +// // var names = $('.trip_name') +// // var trip_details = $('.trip_details') +// for (var i = 0; i < response.length; i++) { +// trip = response[i]; +// target.append("

    " + trip['name'] + "

    " + +// "
      " + "
    • " + "Continent: " + trip['continent'] + "
      • " + +// "
    • " + "Duration: " + trip['weeks'] + " weeks" + "
      • " + "
    "); +// } +// } +// //the trip name I need to link to by id +// var failureCallback = function() { +// console.log("Didn't work"); +// $("#errors").html("

    AJAX request failed!

    "); +// } +// +// var clickHandler = function() { +// $.get(trip_url, successCallback) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. +// }; +// //as soon as the document is ready, load the page +// $(document).ready(function() { +// $('#load').click(clickHandler); +// }); From 7e5b8a463724f92862ce8c45c3d9127af37b7958 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Wed, 24 May 2017 10:25:39 -0700 Subject: [PATCH 04/17] linked the trip title to trip details (summary, cost, category) --- index.html | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 769563e1..abf8b492 100644 --- a/index.html +++ b/index.html @@ -14,12 +14,14 @@ From 68d1623c26793b582520f12af577610e5387b1f5 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Wed, 24 May 2017 11:42:18 -0700 Subject: [PATCH 05/17] added styles.css --- close.png | Bin 0 -> 12403 bytes index.html | 1 + styles.css | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 63 insertions(+) create mode 100644 close.png create mode 100644 styles.css diff --git a/close.png b/close.png new file mode 100644 index 0000000000000000000000000000000000000000..9678cd30b88160bf491ca738498d5bdeda5b1b0f GIT binary patch literal 12403 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 + diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..d07b4b38 --- /dev/null +++ b/styles.css @@ -0,0 +1,62 @@ +.modal-box { + display: none; + position: absolute; + z-index: 1000; + width: 98%; + background: white; + border-bottom: 1px solid #aaa; + border-radius: 4px; + box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(0, 0, 0, 0.1); + background-clip: padding-box; +} + +.modal-box header, +.modal-box .modal-header { + padding: 1.25em 1.5em; + border-bottom: 1px solid #ddd; +} + +.modal-box header h3, +.modal-box header h4, +.modal-box .modal-header h3, +.modal-box .modal-header h4 { margin: 0; } + +.modal-box .modal-body { padding: 2em 1.5em; } + +.modal-box footer, +.modal-box .modal-footer { + padding: 1em; + border-top: 1px solid #ddd; + background: rgba(0, 0, 0, 0.02); + text-align: right; +} + +.modal-overlay { + opacity: 0; + filter: alpha(opacity=0); + position: absolute; + top: 0; + left: 0; + z-index: 900; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3) !important; +} + +a.close { + line-height: 1; + font-size: 1.5em; + position: absolute; + top: 5%; + right: 2%; + text-decoration: none; + color: #bbb; +} + +a.close:hover { + color: #222; + -webkit-transition: color 1s ease; + -moz-transition: color 1s ease; + transition: color 1s ease; +} From a1644b4c9c232be5bfddd7d0223b2bef8fcfea8b Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Wed, 24 May 2017 15:48:30 -0700 Subject: [PATCH 06/17] added drop down function --- index.html | 11 +++++++-- styles.css | 67 +++++++----------------------------------------------- trek.js | 40 ++++++++++++++++++-------------- 3 files changed, 40 insertions(+), 78 deletions(-) diff --git a/index.html b/index.html index 43484c6b..bf2bc8ea 100644 --- a/index.html +++ b/index.html @@ -14,9 +14,16 @@
    +
      +
    • Continent: + <%- data.continent %>
      • +
    • Duration: + <%- data.weeks %> weeks
      • +
    + + + +
    + +
    diff --git a/trek.js b/trek.js index df63d0aa..af3ae7a2 100644 --- a/trek.js +++ b/trek.js @@ -1,7 +1,7 @@ $(document).ready(function() { var tripUrl = 'https://trektravel.herokuapp.com/trips/'; - var allTrips = function(response) { + var allTrips = function(response) { // callback function console.log("Success!") console.log(response); //new template, new event handler (get request to specific trip) from there it will append the template t the slide thing @@ -15,24 +15,54 @@ $(document).ready(function() { $("#trips-list").append(generatedHtml); } - $(".flip").click(function() { - $(".info").slideToggle("slow"); + $("#trip-" + response.id).slideToggle("slow"); }); }; + var trip = function(response) { + console.log("in the trip function!!"); + console.log(response); + var tripTemplate = _.template($('#info-template').html()); + // for (var i = 0; i < response.length; i++) { + var generatedHtml = tripTemplate ({ + data: response + }); + console.log("obj id: " + "#trip-" + response.id); + $("#trip-" + response.id).replaceWith($(generatedHtml)); //need to make a specific trip append to the specific name - var failureCallback = function() { - console.log("Didn't work"); - $("#errors").html("

    AJAX request failed!

    "); - } + + }; var clickHandler = function() { $.get(tripUrl, allTrips) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. }; + + $('#trips-list').on('click', '.trip', function(event){ + console.log("success"); + console.log(event); + console.log(this); + + var indvTrips = tripUrl + event.target.dataset.id + + $.get(indvTrips, trip) //event is a nasty object + }); + // + // var clickHandler = function() { + // tripInfoURL = tripUrl + data.id + // $.get(tripInfoURL, allTrips) + // }; //as soon as the document is ready, load the page + var failureCallback = function() { + console.log("Didn't work"); + $("#errors").html("

    AJAX request failed!

    "); + } + + + + $('#load').click(clickHandler); }); From faf2f2244d27759c8c888109cd24adf86b948f6d Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Thu, 25 May 2017 14:30:40 -0700 Subject: [PATCH 08/17] got the info(including category and cost) to show - only the slide up isn't working --- index.html | 14 ++++++++------ trek.js | 6 +++--- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 6fbcdb86..aa219dc4 100644 --- a/index.html +++ b/index.html @@ -13,17 +13,19 @@
    +
    +

    See your next Destination

    +
    +
    +
    -
    + diff --git a/trek.js b/trek.js index ed5e73af..381e27e1 100644 --- a/trek.js +++ b/trek.js @@ -2,35 +2,33 @@ $(document).ready(function() { var tripUrl = 'https://trektravel.herokuapp.com/trips/'; var allTrips = function(response) { // callback function - console.log("Success!") - console.log(response); - //new template, new event handler (get request to specific trip) from there it will append the template t the slide thing + console.log("Success! in the allTrips function") + console.log(response); //showing what the response from the api is in the console - - var tripTemplate = _.template($('#trips-template').html()); - for (var i = 0; i < response.length; i++) { + var tripTemplate = _.template($('#trips-template').html()); // the template is connected/generates html in the first trips template + for (var i = 0; i < response.length; i++) { //going through the response var generatedHtml = tripTemplate ({ - data: response[i] + data: response[i] //so data is each trip info }); - $("#trips-list").append(generatedHtml); + $("#trips-list").append(generatedHtml); //generate the html in the trips-template script and pin it to the trips-list div } - $(".flip").click(function() { - $(".info").slideToggle("slow"); - }); + }; - var trip = function(response) { - console.log("in the trip function!!"); - console.log(response); + var trip = function(response) { //another callback function + console.log("Success in the trip function! (indvidual trip info)"); + console.log(response); // shows the api response var tripTemplate = _.template($('#trips-template').html()); - // for (var i = 0; i < response.length; i++) { + //here you don't need to iterate because now the response is just one object var generatedHtml = tripTemplate ({ data: response }); console.log("obj id: " + "#trip-" + response.id); $("#trip-" + response.id).replaceWith(generatedHtml); //need to make a specific trip append to the specific name - + $(".flip").click(function() { + $(".info").slideToggle("slow"); + }); }; @@ -44,19 +42,15 @@ $(document).ready(function() { console.log(event); console.log(this); - var indvTrips = tripUrl + event.target.dataset.id + var indvTrips = tripUrl + event.target.dataset.id //this is similar to going into a nested hash or array + //go into event, then to target, then to dataset, then get the id. - $.get(indvTrips, trip) //event is a nasty object + $.get(indvTrips, trip) //event is just a nasty large object }); - // - // var clickHandler = function() { - // tripInfoURL = tripUrl + data.id - // $.get(tripInfoURL, allTrips) - // }; - //as soon as the document is ready, load the page + var failureCallback = function() { - console.log("Didn't work"); + console.log("Didn't work, in the failure callback"); $("#errors").html("

    AJAX request failed!

    "); } From 1dc85670a83870d42a0ab7f2505f9dcbf9adafad Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Fri, 26 May 2017 10:12:06 -0700 Subject: [PATCH 10/17] trying to get .hide function to work --- index.html | 3 ++- trek.js | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a3aada29..2edb9377 100644 --- a/index.html +++ b/index.html @@ -23,13 +23,14 @@

    > <%- data.name %>

    +
    >

    Details: <%- data.about %>

    Category: <%- data.category %>

    Cost: $<%- data.cost %>

    - +
    • Continent: diff --git a/trek.js b/trek.js index 381e27e1..196566d4 100644 --- a/trek.js +++ b/trek.js @@ -10,7 +10,9 @@ $(document).ready(function() { var generatedHtml = tripTemplate ({ data: response[i] //so data is each trip info }); + $("#trips-list").append(generatedHtml); //generate the html in the trips-template script and pin it to the trips-list div + $("#test").hide(); } From fde62368b92c06b20c25ec89b09fabbf3c3fb8df Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Fri, 26 May 2017 11:09:21 -0700 Subject: [PATCH 11/17] got a form to show up --- index.html | 21 +++++++++++++++++---- trek.js | 12 ++++++++++++ 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index a3aada29..1989cf04 100644 --- a/index.html +++ b/index.html @@ -25,18 +25,31 @@

      >
      >

      Details: <%- data.about %>

      -

      Category: <%- data.category %>

      -

      Cost: $<%- data.cost %>

      - +
        +
      • Category: <%- data.category %>
        • +
      • Cost: $<%- data.cost %>
        • +
      -
      • Continent: <%- data.continent %>
      • Duration: <%- data.weeks %> weeks
      + +
      +
      + + +
      +
      + + +
      +
      + +

    diff --git a/trek.js b/trek.js index 381e27e1..de038c74 100644 --- a/trek.js +++ b/trek.js @@ -33,6 +33,18 @@ $(document).ready(function() { }; + $("form").submit(function(event) { + event.preventDefault(); + + var url = $(this).attr("action"); + var formData = $(this).serialize(); + console.log(formData) + + $.post(url, formData, function(response){ + console.log(response); + }); + }); + var clickHandler = function() { $.get(tripUrl, allTrips) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. }; From f23be8b09e6bb641148f7f0dfae3573963b84a25 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Fri, 26 May 2017 11:11:47 -0700 Subject: [PATCH 12/17] switching to new branch --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1989cf04..3fc4add2 100644 --- a/index.html +++ b/index.html @@ -50,7 +50,10 @@

    >
    -
    + +
    + +

    From 857a2e8fa504163c7880ddb8572f5810d1f4fdf0 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Fri, 26 May 2017 14:02:49 -0700 Subject: [PATCH 13/17] added a new template to fix the empty description bug. Still need to deal with not calling the api more thna once even if the title is clicked on again. --- index.html | 74 +++++++++++++++++++++++++++++++++++------------------- trek.js | 4 +-- 2 files changed, 50 insertions(+), 28 deletions(-) diff --git a/index.html b/index.html index 926da269..a5d8f5ee 100644 --- a/index.html +++ b/index.html @@ -23,15 +23,14 @@

    > <%- data.name %>

    -
    -
    > + +
      @@ -41,31 +40,54 @@

      > <%- data.weeks %> weeks

    - -
    - - -
    -
    - - -
    -
    - - -
    -
    - -
    +
    - +
    + + +
    +
    + + +
    +
    + +
    + + + + + + + + diff --git a/trek.js b/trek.js index 5f0e73d2..eae0b142 100644 --- a/trek.js +++ b/trek.js @@ -21,13 +21,13 @@ $(document).ready(function() { var trip = function(response) { //another callback function console.log("Success in the trip function! (indvidual trip info)"); console.log(response); // shows the api response - var tripTemplate = _.template($('#trips-template').html()); + var tripTemplate = _.template($('#trip-dets').html()); //here you don't need to iterate because now the response is just one object var generatedHtml = tripTemplate ({ data: response }); console.log("obj id: " + "#trip-" + response.id); - $("#trip-" + response.id).replaceWith(generatedHtml); //need to make a specific trip append to the specific name + $("#trip-" + response.id).append(generatedHtml); //need to make a specific trip append to the specific name $(".flip").click(function() { $(".info").slideToggle("slow"); }); From 84c04eab2591ab27995484bf18839e98067b93e8 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Fri, 26 May 2017 15:24:04 -0700 Subject: [PATCH 14/17] switching to slide branch --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a5d8f5ee..6659bb38 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@

    >

    - + + "/reserve" method="post">
    From 8a56dce3aefebe9eac90c7737af79c0583ba2765 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Fri, 26 May 2017 15:26:53 -0700 Subject: [PATCH 15/17] fixed something wrong with the form section tag --- index.html | 2 +- trek.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 6659bb38..30c9dca7 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@

    > - + "/reserve" method="post"> + + "/reserve" method="post">
    diff --git a/trek.js b/trek.js index eae0b142..374e7206 100644 --- a/trek.js +++ b/trek.js @@ -27,6 +27,7 @@ $(document).ready(function() { data: response }); console.log("obj id: " + "#trip-" + response.id); + $("#trip-" + response.id).append(generatedHtml); //need to make a specific trip append to the specific name $(".flip").click(function() { $(".info").slideToggle("slow"); From b7edc7f88d74e881b2c6b87e5e87665206b90e7c Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Tue, 30 May 2017 06:16:14 -0700 Subject: [PATCH 16/17] changed the html so it would recognize and save the correct trip id --- index.html | 25 +++++++++---------------- trek.js | 4 ++-- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index 30c9dca7..80ae38e2 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
    @@ -49,17 +50,19 @@

    > - - - - diff --git a/trek.js b/trek.js index 374e7206..6c362480 100644 --- a/trek.js +++ b/trek.js @@ -27,7 +27,7 @@ $(document).ready(function() { data: response }); console.log("obj id: " + "#trip-" + response.id); - + $("#trip-" + response.id).append(generatedHtml); //need to make a specific trip append to the specific name $(".flip").click(function() { $(".info").slideToggle("slow"); @@ -49,7 +49,7 @@ $(document).ready(function() { }); var clickHandler = function() { - $.get(tripUrl, allTrips) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called. + $.get(tripUrl, allTrips) //passing a function around as a variable (to be invoked later.) when the request comes in, that is when it willb e called. }; $('#trips-list').on('click', '.trip', function(event){ From e9a0ef254b1ff0a3bac7fb5025985c06abc48123 Mon Sep 17 00:00:00 2001 From: Allison Northrop Date: Tue, 30 May 2017 07:41:43 -0700 Subject: [PATCH 17/17] added styling --- index.html | 21 +++++++-------------- styles.css | 19 ++++++++++++++++++- trek.js | 19 ++++++++----------- 3 files changed, 33 insertions(+), 26 deletions(-) diff --git a/index.html b/index.html index 80ae38e2..17dd5791 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,11 @@ + + + + + @@ -11,8 +16,8 @@
    -

    See your next Destination

    - +

    Travel Treks

    +
    @@ -24,24 +29,12 @@

    > <%- data.name %>

    - - - -
    • Continent: <%- data.continent %>
    • Duration: <%- data.weeks %> weeks
    - - diff --git a/styles.css b/styles.css index d490908d..a53a6db5 100644 --- a/styles.css +++ b/styles.css @@ -2,10 +2,27 @@ padding: 5px; text-align: center; background-color: #e5eecc; - border: solid 1px #c3c3c3; + /*border: solid 1px #c3c3c3;*/ } .info { padding: 50px; display: none; } + +h1 { + font-family: 'Permanent Marker', cursive; + font-size: 80px; + color: #595D7F; +} + +h2 { + font-family: 'Permanent Marker', cursive; + color: #137F7E; +} + +p, ul, form { + font-family: 'Open Sans', sans-serif; + color: #595D7F; + +} diff --git a/trek.js b/trek.js index 6c362480..df661c61 100644 --- a/trek.js +++ b/trek.js @@ -23,15 +23,15 @@ $(document).ready(function() { console.log(response); // shows the api response var tripTemplate = _.template($('#trip-dets').html()); //here you don't need to iterate because now the response is just one object - var generatedHtml = tripTemplate ({ - data: response - }); - console.log("obj id: " + "#trip-" + response.id); + var generatedHtml = tripTemplate ({ + data: response + }); + console.log("obj id: " + "#trip-" + response.id); - $("#trip-" + response.id).append(generatedHtml); //need to make a specific trip append to the specific name - $(".flip").click(function() { - $(".info").slideToggle("slow"); - }); + $("#trip-" + response.id).append(generatedHtml); //need to make a specific trip append to the specific name + $(".flip").click(function() { + $(".info").slideToggle("slow"); + }); }; @@ -69,9 +69,6 @@ $(document).ready(function() { $("#errors").html("

    AJAX request failed!

    "); } - - - $('#load').click(clickHandler); });