From d7a142660107debd428d87bdf7d41a69f47eaefa Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Tue, 23 May 2017 15:47:31 -0700 Subject: [PATCH 01/28] Initital commit --- index.html | 0 index.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 index.html create mode 100644 index.js diff --git a/index.html b/index.html new file mode 100644 index 00000000..e69de29b diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From a1d3c206d303e90de2de4954a69b7886d9a228a4 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Wed, 24 May 2017 09:58:03 -0700 Subject: [PATCH 02/28] Added scripts to index.html --- index.html | 15 +++++++++++++++ index.js | 1 + 2 files changed, 16 insertions(+) diff --git a/index.html b/index.html index e69de29b..6b2ac29f 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,15 @@ + + + + + TREK + + + + + + + + + + diff --git a/index.js b/index.js index e69de29b..7f5a9af1 100644 --- a/index.js +++ b/index.js @@ -0,0 +1 @@ +// Click button to show all trips From 45986eb37c8bb04e597a0b1e2047ce98633acb69 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Wed, 24 May 2017 11:10:11 -0700 Subject: [PATCH 03/28] All trips button returning all trips from API and displaying in ul --- index.html | 2 ++ index.js | 25 +++++++++++++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/index.html b/index.html index 6b2ac29f..e4e91629 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,8 @@ +
+
    diff --git a/index.js b/index.js index 7f5a9af1..c77523af 100644 --- a/index.js +++ b/index.js @@ -1 +1,26 @@ // Click button to show all trips +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 ++) { + var trip = response[i]; + target.append("
  • " + trip['name'] + ": " + trip['continent'] + ": " + trip["weeks"] + " weeks"); + } +}; + +var failureCallback = function() { + console.log("Nope"); + $("#errors").html("

    AJAX request failed!

    "); +}; + +var clickHandler = function(event) { + $.get(url, successCallback).fail(failureCallback) +}; + +$(document).ready(function() { + $('#load').click(clickHandler); +}); From c7c951435c3460e5a9536a4b8cd4d4f6b9fc4910 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Wed, 24 May 2017 16:17:36 -0700 Subject: [PATCH 04/28] Refactored to use underscore --- index.html | 17 ++++++++++++++++- index.js | 21 ++++++++++++++++++--- 2 files changed, 34 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index e4e91629..b52d6b63 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,21 @@
    -
      +
        + + + + + +
      diff --git a/index.js b/index.js index c77523af..3bfe5fb6 100644 --- a/index.js +++ b/index.js @@ -5,11 +5,21 @@ var successCallback = function(response) { console.log("Success"); console.log(response); - var target = $("#trips"); + // var target = $("#trips"); + // for (var i = 0; i < response.length; i ++) { + // var trip = response[i]; + // target.append("
    • " + trip['name'] + ": " + trip['continent'] + ": " + trip["weeks"] + " weeks" + "
      • "); + // } + + tripsTemplate2 = _.template($('#trips-item-template-2').html()); for (var i = 0; i < response.length; i ++) { - var trip = response[i]; - target.append("
    • " + trip['name'] + ": " + trip['continent'] + ": " + trip["weeks"] + " weeks"); + // var trip = response[i]; + var generatedHtml = tripsTemplate2({trip: response[i]}); + $("#trips").append($(generatedHtml)); } + // var generatedHtml = tripsTemplate({tripsData: response}); + // console.log(generatedHtml); + // $("#trips").append($(generatedHtml)); }; var failureCallback = function() { @@ -21,6 +31,11 @@ var clickHandler = function(event) { $.get(url, successCallback).fail(failureCallback) }; +// to get around scope +var tripsTemplate; + $(document).ready(function() { + tripsTemplate = _.template($('#trips-item-template').html()); + $('#load').click(clickHandler); }); From 6e8be10f2ff6c736bf41867f6b7238f8c05c9abb Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Wed, 24 May 2017 16:44:55 -0700 Subject: [PATCH 05/28] Removed old template and code --- index.html | 11 +---------- index.js | 14 +++----------- 2 files changed, 4 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index b52d6b63..ff9421dd 100644 --- a/index.html +++ b/index.html @@ -14,16 +14,7 @@
        - - - diff --git a/index.js b/index.js index 3bfe5fb6..85049417 100644 --- a/index.js +++ b/index.js @@ -5,21 +5,13 @@ var successCallback = function(response) { console.log("Success"); console.log(response); - // var target = $("#trips"); - // for (var i = 0; i < response.length; i ++) { - // var trip = response[i]; - // target.append("
      • " + trip['name'] + ": " + trip['continent'] + ": " + trip["weeks"] + " weeks" + "
        • "); - // } - - tripsTemplate2 = _.template($('#trips-item-template-2').html()); + tripsTemplate = _.template($('#trips-item-template').html()); for (var i = 0; i < response.length; i ++) { // var trip = response[i]; - var generatedHtml = tripsTemplate2({trip: response[i]}); + var generatedHtml = tripsTemplate({trip: response[i]}); + // append is going to cause the button to add on all the trips again every time its clicked $("#trips").append($(generatedHtml)); } - // var generatedHtml = tripsTemplate({tripsData: response}); - // console.log(generatedHtml); - // $("#trips").append($(generatedHtml)); }; var failureCallback = function() { From 066d643946e7754758eeb6abbb8f22ffbc72c66f Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Thu, 25 May 2017 01:11:39 -0700 Subject: [PATCH 06/28] Added foundation --- index.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index ff9421dd..4bc968b6 100644 --- a/index.html +++ b/index.html @@ -8,10 +8,13 @@ + + +
        - +
          +
        From fd06b43bb5b249713168692c2e219a93ac3fb7fd Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Thu, 25 May 2017 17:22:52 -0700 Subject: [PATCH 08/28] Created CSS file. Added button to All Trips list to retrieve details - not functioning yet --- index.html | 14 ++++++++++++-- trek.css | 4 ++++ 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 trek.css diff --git a/index.html b/index.html index cba9e7a0..7d11977f 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,9 @@ - + + + @@ -18,9 +20,17 @@
          + + +
        diff --git a/trek.css b/trek.css new file mode 100644 index 00000000..fada71b0 --- /dev/null +++ b/trek.css @@ -0,0 +1,4 @@ +ul.vacation { + border: 5px solid black; + background-color: yellow; +} From 6d8926fbbc12b98de88598c8c682d44aa17ea010 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Fri, 26 May 2017 02:57:08 -0700 Subject: [PATCH 09/28] Gave trip ID to buttons. Made click event for buttons - not functioning yet --- index.html | 4 ++-- index.js | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 7d11977f..4c1c6935 100644 --- a/index.html +++ b/index.html @@ -22,12 +22,12 @@ diff --git a/index.js b/index.js index 85049417..71546553 100644 --- a/index.js +++ b/index.js @@ -12,6 +12,9 @@ var successCallback = function(response) { // append is going to cause the button to add on all the trips again every time its clicked $("#trips").append($(generatedHtml)); } + + tripsDetailTemplate = _.template($('#trips-detail-template').html()); + }; var failureCallback = function() { @@ -23,11 +26,30 @@ var clickHandler = function(event) { $.get(url, successCallback).fail(failureCallback) }; +var clickHandlerDetails = function(event) { + // clear the "All Trips" list + $("#trips").empty(); + // make API call for specific id (id passed from button) + // render template + console.log("hi"); +}; + // to get around scope var tripsTemplate; +var tripsdetailTemplate; $(document).ready(function() { tripsTemplate = _.template($('#trips-item-template').html()); $('#load').click(clickHandler); + $('.button.trip-detail').click(clickHandlerDetails); + + // trying to select class + // $(".button.trip-detail").on('click', function(){ + // console.log("yo"); +}); + + // $(document).ready(function() { + // tripsDetailTemplate = _.template($('#trips-detail-template').html()); + // }); }); From d106f0ee186c1d541c029643079950dca878cef8 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Fri, 26 May 2017 12:28:54 -0700 Subject: [PATCH 10/28] Detail click handler now functioning --- index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 71546553..83f14c79 100644 --- a/index.js +++ b/index.js @@ -42,12 +42,12 @@ $(document).ready(function() { tripsTemplate = _.template($('#trips-item-template').html()); $('#load').click(clickHandler); + + $('.button.trip-detail').click(clickHandlerDetails); // trying to select class - // $(".button.trip-detail").on('click', function(){ - // console.log("yo"); -}); + $("body").on('click', ".button.trip-detail", clickHandlerDetails); // $(document).ready(function() { // tripsDetailTemplate = _.template($('#trips-detail-template').html()); From dfe822e38517740e32701f8070df08d6c8dc4461 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Fri, 26 May 2017 12:49:44 -0700 Subject: [PATCH 11/28] Trip details AJAX call now successfully running --- index.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 83f14c79..022a0b9c 100644 --- a/index.js +++ b/index.js @@ -13,6 +13,13 @@ var successCallback = function(response) { $("#trips").append($(generatedHtml)); } + +}; + +var tripDetailCallback = function(response) { + console.log("Success"); + console.log(response); + tripsDetailTemplate = _.template($('#trips-detail-template').html()); }; @@ -30,6 +37,8 @@ var clickHandlerDetails = function(event) { // clear the "All Trips" list $("#trips").empty(); // make API call for specific id (id passed from button) + + $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback) // render template console.log("hi"); }; @@ -44,9 +53,8 @@ $(document).ready(function() { $('#load').click(clickHandler); - $('.button.trip-detail').click(clickHandlerDetails); + // $('.button.trip-detail').click(clickHandlerDetails); - // trying to select class $("body").on('click', ".button.trip-detail", clickHandlerDetails); // $(document).ready(function() { From 23211027bcc388c1ec85dd84b95035ee91e5d5d2 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Sat, 27 May 2017 12:35:20 -0700 Subject: [PATCH 12/28] Trip details template rendering on click at top of the page --- index.html | 8 ++++++-- index.js | 8 ++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 4c1c6935..7d87d7cc 100644 --- a/index.html +++ b/index.html @@ -26,8 +26,12 @@
      - diff --git a/index.js b/index.js index 022a0b9c..af4169f4 100644 --- a/index.js +++ b/index.js @@ -19,9 +19,8 @@ var successCallback = function(response) { var tripDetailCallback = function(response) { console.log("Success"); console.log(response); - - tripsDetailTemplate = _.template($('#trips-detail-template').html()); - + var generatedHtml = tripsDetailTemplate({trip: response}); +$('.vacationDetails').append($(generatedHtml)); }; var failureCallback = function() { @@ -35,7 +34,7 @@ var clickHandler = function(event) { var clickHandlerDetails = function(event) { // clear the "All Trips" list - $("#trips").empty(); + // $("#trips").empty(); // make API call for specific id (id passed from button) $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback) @@ -49,6 +48,7 @@ var tripsdetailTemplate; $(document).ready(function() { tripsTemplate = _.template($('#trips-item-template').html()); + tripsDetailTemplate = _.template($('#trips-detail-template').html()); $('#load').click(clickHandler); From 5c5b3f3107681d237b421d869b4366dbc32901d5 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Sat, 27 May 2017 12:53:25 -0700 Subject: [PATCH 13/28] Rearranged html templates and gave column classes to load all trips list on left and trip details on right --- index.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index 7d87d7cc..ae045eb8 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,7 @@
      -
        +
        -
        - +
        +
        + -
      From 6e4392cbb46a03267c49dbeccd48a2d3e56da44f Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Sat, 27 May 2017 13:28:30 -0700 Subject: [PATCH 14/28] Button added successfully to hide trip details --- index.html | 2 ++ index.js | 15 +++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/index.html b/index.html index ae045eb8..b84d860a 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,8 @@

      <%- trip['name'] %>

      <%- trip['continent'] %>

      <%- trip['about'] %>

      + + diff --git a/index.js b/index.js index af4169f4..030f0746 100644 --- a/index.js +++ b/index.js @@ -21,8 +21,16 @@ var tripDetailCallback = function(response) { console.log(response); var generatedHtml = tripsDetailTemplate({trip: response}); $('.vacationDetails').append($(generatedHtml)); + + // $("#hideTrip").hide(); + }; +function hideTripDetails() { + // $("#hideTrip").hide(); + $(".vacationDetails").hide(); +} + var failureCallback = function() { console.log("Nope"); $("#errors").html("

      AJAX request failed!

      "); @@ -42,6 +50,10 @@ var clickHandlerDetails = function(event) { console.log("hi"); }; + +// Not sure if I need a click handler for the hide button? + + // to get around scope var tripsTemplate; var tripsdetailTemplate; @@ -60,4 +72,7 @@ $(document).ready(function() { // $(document).ready(function() { // tripsDetailTemplate = _.template($('#trips-detail-template').html()); // }); + + + }); From 868fe5067ed57819164922327a52547f7397a7b1 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Sat, 27 May 2017 13:54:18 -0700 Subject: [PATCH 15/28] Added category, weeks, and cost to trip details template. Gave minimal styling --- index.html | 6 +++++- trek.css | 9 +++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b84d860a..87a2fc49 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,11 @@

      <%- trip['name'] %>

      <%- trip['continent'] %>

      <%- trip['about'] %>

      - +
        +
      • <%- trip['weeks'] %> weeks
        • +
      • <%- trip['category'] %>
        • +
      • $<%- trip['cost'] %>
        • +
      diff --git a/trek.css b/trek.css index fada71b0..3e45c471 100644 --- a/trek.css +++ b/trek.css @@ -2,3 +2,12 @@ ul.vacation { border: 5px solid black; background-color: yellow; } + +ul.deets { + color: blue; +} + +ul.deets li { + display: inline-block; + margin-right: 20px; +} From c9057d06c99b923420d0108de3f208bbdafab77d Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Sat, 27 May 2017 14:13:55 -0700 Subject: [PATCH 16/28] Form for reserving trip appears on button click --- index.html | 8 ++++++++ index.js | 6 +++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 87a2fc49..4b848b81 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,14 @@

      <%- trip['continent'] %>

    • $<%- trip['cost'] %>
      • + +
      + Name:
      +
      + Email:
      + + +
      diff --git a/index.js b/index.js index 030f0746..9f8c7422 100644 --- a/index.js +++ b/index.js @@ -22,7 +22,7 @@ var tripDetailCallback = function(response) { var generatedHtml = tripsDetailTemplate({trip: response}); $('.vacationDetails').append($(generatedHtml)); - // $("#hideTrip").hide(); + $(".reserveForm").hide(); }; @@ -31,6 +31,10 @@ function hideTripDetails() { $(".vacationDetails").hide(); } +function reserve() { + $(".reserveForm").show(); +} + var failureCallback = function() { console.log("Nope"); $("#errors").html("

      AJAX request failed!

      "); From 23a3565fccd0f8da26837410e9e4bb2f6003d919 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Sat, 27 May 2017 14:17:31 -0700 Subject: [PATCH 17/28] Gave foundation button class to form submit button --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 4b848b81..66a84713 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@

      <%- trip['continent'] %>


      Email:
      - + From 51a6bcd36e201cb85e94a67a4d3999ba294893d1 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 17:12:44 -0700 Subject: [PATCH 18/28] Reservation post action successful --- index.html | 20 ++++++++++++++------ index.js | 22 ++++++++++++++++++++-- 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 66a84713..2f8ef311 100644 --- a/index.html +++ b/index.html @@ -40,13 +40,21 @@

      <%- trip['continent'] %>

      -
      - Name:
      -
      - Email:
      - - + + +
      + + +
      +
      + + +
      +
      + +
      +
      diff --git a/index.js b/index.js index 9f8c7422..e05f4e80 100644 --- a/index.js +++ b/index.js @@ -24,6 +24,24 @@ $('.vacationDetails').append($(generatedHtml)); $(".reserveForm").hide(); + + $('.reserveForm').submit(function(e) { + e.preventDefault(); + + var postUrl = $(this).attr("action"); + var formData = $(this).serialize(); + console.log(postUrl, formData); + + $.post(postUrl, formData, function(response) { + $('#message').html('

      We saved you a spot!

      '); + console.log(response); + console.log("reservation"); + }) + .fail(function(){ + $('#message').html('

      Reservation failed

      '); + }); + }); + }; function hideTripDetails() { @@ -52,10 +70,10 @@ var clickHandlerDetails = function(event) { $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback) // render template console.log("hi"); -}; -// Not sure if I need a click handler for the hide button? +}; + // to get around scope From 7e427235fdac57e172409f0f8cbedc8964ee6e72 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 17:14:13 -0700 Subject: [PATCH 19/28] Submit button button class reassigned --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 2f8ef311..3ff44279 100644 --- a/index.html +++ b/index.html @@ -50,8 +50,8 @@

      <%- trip['continent'] %>

      -
      - +
      +
      From d34ce5c0fa350fa2e05e9b8ac10a61e7b9181e3a Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 17:33:28 -0700 Subject: [PATCH 20/28] Added background image --- trek.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/trek.css b/trek.css index 3e45c471..80ade12b 100644 --- a/trek.css +++ b/trek.css @@ -1,3 +1,10 @@ +body { + background-image: url("https://wallpapersite.com/images/pages/pic_w/6500.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; +} + ul.vacation { border: 5px solid black; background-color: yellow; From 7b63308d7705f8f2f403b0266db351d8ee0c6066 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 19:25:06 -0700 Subject: [PATCH 21/28] Gave some CSS styling. Edited JS so that user can display new trip details after other trip details have been hidden --- index.html | 1 + index.js | 2 +- trek.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 56 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 3ff44279..faf587f3 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ +

      TREK

      diff --git a/index.js b/index.js index e05f4e80..b198a3a7 100644 --- a/index.js +++ b/index.js @@ -20,7 +20,7 @@ var tripDetailCallback = function(response) { console.log("Success"); console.log(response); var generatedHtml = tripsDetailTemplate({trip: response}); -$('.vacationDetails').append($(generatedHtml)); +$('.vacationDetails').empty().show().append($(generatedHtml)); $(".reserveForm").hide(); diff --git a/trek.css b/trek.css index 80ade12b..164a4398 100644 --- a/trek.css +++ b/trek.css @@ -1,3 +1,9 @@ +/*@import url('https://fonts.googleapis.com/css?family=Shrikhand'); +@import url('https://fonts.googleapis.com/css?family=Bungee+Outline|Shrikhand');*/ +/*@import url('https://fonts.googleapis.com/css?family=Bungee+Outline|Montserrat+Subrayada|Shrikhand');*/ +@import url('https://fonts.googleapis.com/css?family=Bungee+Outline|Montserrat+Subrayada|Russo+One|Shrikhand|Monoton|Oxygen'); + + body { background-image: url("https://wallpapersite.com/images/pages/pic_w/6500.jpg"); background-size: cover; @@ -5,9 +11,55 @@ body { background-attachment: fixed; } +.title { + color: rgba(250, 250, 250, 0.5); + /*font-family: 'Shrikhand', cursive;*/ + /*font-family: 'Bungee Outline', cursive;*/ + /*font-family: 'Montserrat Subrayada', sans-serif;*/ + font-family: 'Monoton', cursive; + + /*font-family: 'Russo One', sans-serif;*/ + + font-size: 12em; + position: fixed; + bottom: 0; + margin: 70px; + z-index: -100; +} + +#load { + position: fixed; + bottom: 0; + right: 0; +} + +#trips { + bottom: 0; + /*background-color: #ff324e;*/ + +} + ul.vacation { - border: 5px solid black; - background-color: yellow; + background-color: rgba(0, 0, 0, 0.5); + color: white; + list-style: none; + font-family: 'Oxygen', sans-serif; + font-size: 1.5em; + padding: 25px; + +} + +.vacationDetails { + background-color: rgba(0, 0, 0, 0.5); + color: white; +} + +.button, .trip-detail { + background-color: black; +} + +.button:hover { + background-color: #ff324e; } ul.deets { From d82c898db4813fb65620fc37197509de1dd25ce5 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 20:15:29 -0700 Subject: [PATCH 22/28] Added JS scroll top animation --- index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.js b/index.js index b198a3a7..a333f969 100644 --- a/index.js +++ b/index.js @@ -70,7 +70,7 @@ var clickHandlerDetails = function(event) { $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback) // render template console.log("hi"); - + $('body').animate({ scrollTop: 0}, "slow"); }; From faa411b5d35097d127b3ab545f35195eb400bccc Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 21:36:16 -0700 Subject: [PATCH 23/28] CSS styling --- index.html | 13 ++++++++----- index.js | 2 +- trek.css | 45 +++++++++++++++++++++++++++++++++++---------- 3 files changed, 44 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index faf587f3..18413af1 100644 --- a/index.html +++ b/index.html @@ -17,13 +17,16 @@

      TREK

      - +
      @@ -36,10 +39,10 @@

      <%- trip['continent'] %>

      <%- trip['about'] %>

      • <%- trip['weeks'] %> weeks
        • -
      • <%- trip['category'] %>
        • +
      • <%- "#" + trip['category'] %>
      • $<%- trip['cost'] %>
      - +
      diff --git a/index.js b/index.js index a333f969..3908b7dd 100644 --- a/index.js +++ b/index.js @@ -89,7 +89,7 @@ $(document).ready(function() { // $('.button.trip-detail').click(clickHandlerDetails); - $("body").on('click', ".button.trip-detail", clickHandlerDetails); + $("body").on('click', ".trip-detail", clickHandlerDetails); // $(document).ready(function() { // tripsDetailTemplate = _.template($('#trips-detail-template').html()); diff --git a/trek.css b/trek.css index 164a4398..eb4756c3 100644 --- a/trek.css +++ b/trek.css @@ -11,6 +11,9 @@ body { background-attachment: fixed; } +li, h1, h3, h4 { + font-family: 'Oxygen', sans-serif; +} .title { color: rgba(250, 250, 250, 0.5); /*font-family: 'Shrikhand', cursive;*/ @@ -31,42 +34,64 @@ body { position: fixed; bottom: 0; right: 0; + margin: 0 170px 180px 0; } #trips { bottom: 0; - /*background-color: #ff324e;*/ + /*background-color: rgba(250, 250, 250, 0.9);*/ } ul.vacation { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.75); color: white; list-style: none; - font-family: 'Oxygen', sans-serif; + /*font-family: 'Oxygen', sans-serif;*/ font-size: 1.5em; padding: 25px; +} + +ul.vacation li:first-child { + font-stretch: expanded; +} +ul.vacation li:nth-child(n+2) { + font-size: 0.75em; + display: inline-block; + margin-right: 20px; + color: #42f4e2; } .vacationDetails { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.75); color: white; } -.button, .trip-detail { - background-color: black; +.trip-detail { + color: white; } -.button:hover { +.trip-detail:hover { + color: #ff6d81; +} + +.button, .button:visited { background-color: #ff324e; } -ul.deets { - color: blue; +.button:hover { + background-color: #ff6d81; } + ul.deets li { + color: #42f4e2; display: inline-block; - margin-right: 20px; + margin-right: 90px; +} + +ul.deets li:nth-child(3) { + color: #ff6d81; + font-weight: bold; } From 0a1eabc96da9971bc9d835fefe9c615a8ce2a7c2 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 21:41:56 -0700 Subject: [PATCH 24/28] #load button now hides on success callback --- index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 3908b7dd..9def233c 100644 --- a/index.js +++ b/index.js @@ -13,6 +13,8 @@ var successCallback = function(response) { $("#trips").append($(generatedHtml)); } + $('#load').hide(); + }; @@ -24,7 +26,6 @@ $('.vacationDetails').empty().show().append($(generatedHtml)); $(".reserveForm").hide(); - $('.reserveForm').submit(function(e) { e.preventDefault(); @@ -59,7 +60,7 @@ var failureCallback = function() { }; var clickHandler = function(event) { - $.get(url, successCallback).fail(failureCallback) + $.get(url, successCallback).fail(failureCallback); }; var clickHandlerDetails = function(event) { From af1ffb610fab157f789cdc3f55100a315d6ca4c9 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 21:50:34 -0700 Subject: [PATCH 25/28] Cleaned up JS code --- index.js | 79 +++++++++++++++++++++++--------------------------------- 1 file changed, 32 insertions(+), 47 deletions(-) diff --git a/index.js b/index.js index 9def233c..4141d922 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ -// Click button to show all trips var url = "https://trektravel.herokuapp.com/trips"; var successCallback = function(response) { @@ -7,76 +6,71 @@ var successCallback = function(response) { tripsTemplate = _.template($('#trips-item-template').html()); for (var i = 0; i < response.length; i ++) { - // var trip = response[i]; var generatedHtml = tripsTemplate({trip: response[i]}); - // append is going to cause the button to add on all the trips again every time its clicked $("#trips").append($(generatedHtml)); } $('#load').hide(); +}; - +var failureCallback = function() { + console.log("Request failed"); + $("#errors").html("

      AJAX request failed!

      "); }; var tripDetailCallback = function(response) { console.log("Success"); console.log(response); var generatedHtml = tripsDetailTemplate({trip: response}); -$('.vacationDetails').empty().show().append($(generatedHtml)); + $('.vacationDetails').empty().show().append($(generatedHtml)); + +// reservation functionality below $(".reserveForm").hide(); - $('.reserveForm').submit(function(e) { - e.preventDefault(); - - var postUrl = $(this).attr("action"); - var formData = $(this).serialize(); - console.log(postUrl, formData); - - $.post(postUrl, formData, function(response) { - $('#message').html('

      We saved you a spot!

      '); - console.log(response); - console.log("reservation"); - }) - .fail(function(){ - $('#message').html('

      Reservation failed

      '); - }); + $('.reserveForm').submit(function(e) { + e.preventDefault(); + + var postUrl = $(this).attr("action"); + var formData = $(this).serialize(); + console.log(postUrl, formData); + + $.post(postUrl, formData, function(response) { + $('#message').html('

      We saved you a spot!

      '); + console.log(response); + console.log("reservation"); + }) + .fail(function(){ + $('#message').html('

      Reservation failed

      '); }); + }); }; -function hideTripDetails() { - // $("#hideTrip").hide(); - $(".vacationDetails").hide(); -} - -function reserve() { - $(".reserveForm").show(); -} -var failureCallback = function() { - console.log("Nope"); - $("#errors").html("

      AJAX request failed!

      "); -}; var clickHandler = function(event) { $.get(url, successCallback).fail(failureCallback); }; var clickHandlerDetails = function(event) { - // clear the "All Trips" list - // $("#trips").empty(); - // make API call for specific id (id passed from button) - $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback) - // render template - console.log("hi"); $('body').animate({ scrollTop: 0}, "slow"); }; +function hideTripDetails() { + $(".vacationDetails").hide(); +} + +function reserve() { + $(".reserveForm").show(); +} + + + // to get around scope var tripsTemplate; var tripsdetailTemplate; @@ -87,15 +81,6 @@ $(document).ready(function() { $('#load').click(clickHandler); - - // $('.button.trip-detail').click(clickHandlerDetails); - $("body").on('click', ".trip-detail", clickHandlerDetails); - // $(document).ready(function() { - // tripsDetailTemplate = _.template($('#trips-detail-template').html()); - // }); - - - }); From 2bed73847983cdfd64d96abe22c3a46d2f4a7c18 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 21:57:26 -0700 Subject: [PATCH 26/28] Cleaned up CSS --- trek.css | 19 ++----------------- 1 file changed, 2 insertions(+), 17 deletions(-) diff --git a/trek.css b/trek.css index eb4756c3..a30a47a4 100644 --- a/trek.css +++ b/trek.css @@ -1,7 +1,5 @@ -/*@import url('https://fonts.googleapis.com/css?family=Shrikhand'); -@import url('https://fonts.googleapis.com/css?family=Bungee+Outline|Shrikhand');*/ -/*@import url('https://fonts.googleapis.com/css?family=Bungee+Outline|Montserrat+Subrayada|Shrikhand');*/ -@import url('https://fonts.googleapis.com/css?family=Bungee+Outline|Montserrat+Subrayada|Russo+One|Shrikhand|Monoton|Oxygen'); +@import url('https://fonts.googleapis.com/css?family=Monoton|Oxygen'); + body { @@ -16,13 +14,7 @@ li, h1, h3, h4 { } .title { color: rgba(250, 250, 250, 0.5); - /*font-family: 'Shrikhand', cursive;*/ - /*font-family: 'Bungee Outline', cursive;*/ - /*font-family: 'Montserrat Subrayada', sans-serif;*/ font-family: 'Monoton', cursive; - - /*font-family: 'Russo One', sans-serif;*/ - font-size: 12em; position: fixed; bottom: 0; @@ -37,17 +29,10 @@ li, h1, h3, h4 { margin: 0 170px 180px 0; } -#trips { - bottom: 0; - /*background-color: rgba(250, 250, 250, 0.9);*/ - -} - ul.vacation { background-color: rgba(0, 0, 0, 0.75); color: white; list-style: none; - /*font-family: 'Oxygen', sans-serif;*/ font-size: 1.5em; padding: 25px; } From f84ef6e8a29c91d8dc3aa8e62039a6abf6c9bdc7 Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 21:59:36 -0700 Subject: [PATCH 27/28] Cleaned up html --- index.html | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 18413af1..ef911b9d 100644 --- a/index.html +++ b/index.html @@ -12,24 +12,23 @@ - +

      TREK

      +
      + -
      +
      -
      From 3321088ffc96ebdddaa767961519bf5f56fd8dac Mon Sep 17 00:00:00 2001 From: Andrea Valliere Date: Mon, 29 May 2017 22:04:43 -0700 Subject: [PATCH 28/28] DRYed selectors in CSS --- trek.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/trek.css b/trek.css index a30a47a4..87f21afc 100644 --- a/trek.css +++ b/trek.css @@ -29,9 +29,12 @@ li, h1, h3, h4 { margin: 0 170px 180px 0; } +ul.vacation, .vacationDetails, .trip-detail, label { + color: white; +} + ul.vacation { background-color: rgba(0, 0, 0, 0.75); - color: white; list-style: none; font-size: 1.5em; padding: 25px; @@ -50,11 +53,6 @@ ul.vacation li:nth-child(n+2) { .vacationDetails { background-color: rgba(0, 0, 0, 0.75); - color: white; -} - -.trip-detail { - color: white; } .trip-detail:hover {