From 93337ca5bb6154d731d20261129c9ba84bf02561 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Tue, 28 Nov 2017 14:49:06 -0800
Subject: [PATCH 01/41] made Trip model and TripList collection

---
 dist/index.html                  | 6 ++++--
 src/app.js                       | 2 +-
 src/app/collections/trip_list.js | 8 ++++++++
 src/app/models/trip.js           | 5 +++++
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/app/collections/trip_list.js
 create mode 100644 src/app/models/trip.js
diff --git a/dist/index.html b/dist/index.html
index b873b1e..6ded96e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,10 +7,12 @@
 </head>
 <body>
   <header>
-
+    <h1>BackTREK</h1>
   </header>
   <main>
-
+    <section id="start-background">
+      <button id="get-trips" class="button">Explore our trips!</button>
+    </section>
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index e7af594..f387740 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,5 +9,5 @@ import './css/style.css';
 console.log('it loaded!');
 
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+  // $('main').html('<h1>Hello World!</h1>');
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..e014200
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,8 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip
+})
+
+export default TripList
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..2741612
--- /dev/null
+++ b/src/app/models/trip.js
@@ -0,0 +1,5 @@
+import Backbone from 'backbone'
+
+const Trip = Backbone.Model.extend({});
+
+export default Trip; 

From 709ac3e549b1b00ed70a3cf1d6eabea6769ff833 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Tue, 28 Nov 2017 15:49:33 -0800
Subject: [PATCH 02/41] all trip are displayed on the page automatically

---
 dist/index.html                  | 35 +++++++++++++++++++++++---
 src/app.js                       | 42 +++++++++++++++++++++++++++++---
 src/app/collections/trip_list.js |  7 +++---
 3 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 6ded96e..524b750 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -13,10 +13,37 @@ <h1>BackTREK</h1>
     <section id="start-background">
       <button id="get-trips" class="button">Explore our trips!</button>
     </section>
-  </main>
-  <footer>
 
-  </footer>
-  <script src="app.bundle.js" type="text/javascript"></script>
+    <table>
+      <thead>
+        <th class="sort name">Name</th>
+        <th class="sort continent">Continent</th>
+        <th class="sort category">Category</th>
+        <th class="sort weeks">Weeks</th>
+        <th class="sort cost">Cost</th>
+        <th class=" sort trip-id">Trip Id</th>
+      </thead>
+      <tbody id="trip-list">
+      </tbody>
+    </tbody>
+  </table>
+
+</main>
+<footer>
+
+</footer>
+<script src="app.bundle.js" type="text/javascript"></script>
+
+<script type="text/template" id="display-trips">
+  <tr class="trip">
+    <td><%- name %></td>
+    <td><%- continent %></td>
+    <td><%- category %></td>
+    <td><%- weeks %></td>
+    <td><%- cost %></td>
+    <td><%- id %></td>
+  </tr>
+</script>
+
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
index f387740..ef370e2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,8 +6,42 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
-console.log('it loaded!');
+// collections
+import TripList from 'app/collections/trip_list';
 
-$(document).ready( () => {
-  // $('main').html('<h1>Hello World!</h1>');
-});
+
+// create the tripList to store the trips we access from the API
+const tripList = new TripList();
+
+// define the allTripsTemplate at a global level so we can access it in the render function
+let allTripsTemplate;
+
+// define a render function to call when tripList is updated or sorted
+const render = function render(tripList) {
+  // select the tbody element to append to
+  const tripListElement = $('#trip-list')
+
+  // empty the tbody before rendering
+  tripListElement.empty();
+
+  // make a tr for each trip
+  tripList.forEach((trip) => {
+    // use the underscore function to generate HTML for each trip
+    let tripHTML = allTripsTemplate(trip.attributes);
+    // append the tr with HTML for each trip to the tbody
+    tripListElement.append($(tripHTML));
+  }) // forEach
+} // render
+
+
+$(document).ready(() => {
+    // make the underscore function to list all the trips
+    console.log('in .ready!');
+    allTripsTemplate = _.template($('#display-trips').html());
+
+    // get the trips from the api. This will cause the update event to be triggered
+    tripList.fetch();
+
+    // when we update tripList we will rerender the page
+    tripList.on('update', render)
+  }); // .ready
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index e014200..35919a1 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -2,7 +2,8 @@ import Backbone from 'backbone';
 import Trip from '../models/trip';
 
 const TripList = Backbone.Collection.extend({
-  model: Trip
-})
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+});
 
-export default TripList
+export default TripList;

From f62a846663e479676569b470af944cd703f29cd8 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Tue, 28 Nov 2017 15:55:25 -0800
Subject: [PATCH 03/41] added click event to show all the trips:

---
 src/app.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index ef370e2..542f638 100644
--- a/src/app.js
+++ b/src/app.js
@@ -33,14 +33,23 @@ const render = function render(tripList) {
   }) // forEach
 } // render
 
+// function to show all the trips when the 'Explore our trips' button is clicked
+const showAllTrips = function showAllTrips() {
+  // get all the trips from the API
+  // fetch will cause the update event to be triggered
+  tripList.fetch();
+  // Hide the button
+  $(this).hide();
+}
 
 $(document).ready(() => {
     // make the underscore function to list all the trips
     console.log('in .ready!');
     allTripsTemplate = _.template($('#display-trips').html());
 
-    // get the trips from the api. This will cause the update event to be triggered
-    tripList.fetch();
+    // get the trips from the api when the user clicks the 'Explore our trips!'.
+    $('#get-trips').on('click', showAllTrips)
+
 
     // when we update tripList we will rerender the page
     tripList.on('update', render)

From 91598b9b7c1bbb2a9dc01a85f13090b4836a618d Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Tue, 28 Nov 2017 17:36:42 -0800
Subject: [PATCH 04/41] added data-id to each tr so I can access the id to get
 the trip details for a trip

---
 dist/index.html | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 524b750..551dee1 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -14,19 +14,26 @@ <h1>BackTREK</h1>
       <button id="get-trips" class="button">Explore our trips!</button>
     </section>
 
-    <table>
-      <thead>
-        <th class="sort name">Name</th>
-        <th class="sort continent">Continent</th>
-        <th class="sort category">Category</th>
-        <th class="sort weeks">Weeks</th>
-        <th class="sort cost">Cost</th>
-        <th class=" sort trip-id">Trip Id</th>
-      </thead>
-      <tbody id="trip-list">
+    <section id="main-page" class="row">
+      <table>
+        <thead>
+          <th class="sort name">Name</th>
+          <th class="sort continent">Continent</th>
+          <th class="sort category">Category</th>
+          <th class="sort weeks">Weeks</th>
+          <th class="sort cost">Cost</th>
+          <th class=" sort trip-id">Trip Id</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
       </tbody>
-    </tbody>
-  </table>
+    </table>
+    <article id="trip-details">
+      <div>
+
+      </div>
+    </article>
+  </section>
 
 </main>
 <footer>
@@ -35,13 +42,12 @@ <h1>BackTREK</h1>
 <script src="app.bundle.js" type="text/javascript"></script>
 
 <script type="text/template" id="display-trips">
-  <tr class="trip">
+  <tr class="trip" data-id="<%- id %>">
     <td><%- name %></td>
     <td><%- continent %></td>
     <td><%- category %></td>
     <td><%- weeks %></td>
     <td><%- cost %></td>
-    <td><%- id %></td>
   </tr>
 </script>
 

From 6cab10e52fc23c5ba9f8ace36a9d5adec9567235 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Tue, 28 Nov 2017 21:38:02 -0800
Subject: [PATCH 05/41] can access new attributes for model after fetch for
 trip detauls

---
 dist/index.html                  |  4 +---
 src/app.js                       | 27 ++++++++++++++++++++++++++-
 src/app/collections/trip_list.js |  2 ++
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 551dee1..068766f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -22,15 +22,13 @@ <h1>BackTREK</h1>
           <th class="sort category">Category</th>
           <th class="sort weeks">Weeks</th>
           <th class="sort cost">Cost</th>
-          <th class=" sort trip-id">Trip Id</th>
         </thead>
         <tbody id="trip-list">
         </tbody>
       </tbody>
     </table>
     <article id="trip-details">
-      <div>
-
+      <div id="book-trip">
       </div>
     </article>
   </section>
diff --git a/src/app.js b/src/app.js
index 542f638..586a5d1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -31,6 +31,23 @@ const render = function render(tripList) {
     // append the tr with HTML for each trip to the tbody
     tripListElement.append($(tripHTML));
   }) // forEach
+
+  // click event to get the details for a trip
+  $('.trip').on('click', function(event) {
+    console.log('in the trip click');
+
+    // get the id of the trip you clicked on
+    let tripId = $(this).attr('data-id')
+
+    // fetch the trip details of the trip you clicked on from the api
+    // the new attributes fetch sets for the model need to be access in a callback function
+    let trip = tripList.get(tripId)
+    trip.fetch({
+      success: function(model) {
+        // console.log(`in the fetch and about is: ${model.get('about')}`);
+      } // function
+    }); // fetch
+  })
 } // render
 
 // function to show all the trips when the 'Explore our trips' button is clicked
@@ -42,6 +59,13 @@ const showAllTrips = function showAllTrips() {
   $(this).hide();
 }
 
+// function to show the trip details when a tr is clicked on
+const showTripDetails = function showTripDetails() {
+  console.log('got into the showTripDetails function!');
+
+  alert('in the showTripDetails function')
+} // showTripDetails
+
 $(document).ready(() => {
     // make the underscore function to list all the trips
     console.log('in .ready!');
@@ -50,7 +74,8 @@ $(document).ready(() => {
     // get the trips from the api when the user clicks the 'Explore our trips!'.
     $('#get-trips').on('click', showAllTrips)
 
-
     // when we update tripList we will rerender the page
     tripList.on('update', render)
+
+
   }); // .ready
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index 35919a1..2b06a2e 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -4,6 +4,8 @@ import Trip from '../models/trip';
 const TripList = Backbone.Collection.extend({
   model: Trip,
   url: 'https://ada-backtrek-api.herokuapp.com/trips',
+  // default comparator so it sorts by name to start off 
+  comparator: name,
 });
 
 export default TripList;

From 4310db0f08b880e8ea9959ce2184aced0100c2e4 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Tue, 28 Nov 2017 22:01:00 -0800
Subject: [PATCH 06/41] trying to figure out how to access all the attributes
 at once

---
 dist/index.html | 12 ++++++++++++
 src/app.js      | 16 +++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 068766f..99c9012 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -39,6 +39,7 @@ <h1>BackTREK</h1>
 </footer>
 <script src="app.bundle.js" type="text/javascript"></script>
 
+
 <script type="text/template" id="display-trips">
   <tr class="trip" data-id="<%- id %>">
     <td><%- name %></td>
@@ -49,5 +50,16 @@ <h1>BackTREK</h1>
   </tr>
 </script>
 
+<script type="text/template" id="trip-details-template">
+  <h3><%- name %></h3>
+  <ul>
+    <li>Continent: <%- continent %></li>
+    <li>Category: <%- category %></li>
+    <li>Weeks: <%- weeks %></li>
+    <li>Cost: <%- cost %></li>
+  </ul>
+  <p> <%- about %> </p>
+</script>
+
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
index 586a5d1..7c54149 100644
--- a/src/app.js
+++ b/src/app.js
@@ -13,8 +13,9 @@ import TripList from 'app/collections/trip_list';
 // create the tripList to store the trips we access from the API
 const tripList = new TripList();
 
-// define the allTripsTemplate at a global level so we can access it in the render function
+// define the underscore templates at a global level so we can access it in the render function and other functions
 let allTripsTemplate;
+let tripDetailsTemplate;
 
 // define a render function to call when tripList is updated or sorted
 const render = function render(tripList) {
@@ -44,7 +45,14 @@ const render = function render(tripList) {
     let trip = tripList.get(tripId)
     trip.fetch({
       success: function(model) {
-        // console.log(`in the fetch and about is: ${model.get('about')}`);
+        // QUESTION: Why can't I access the attributes like this? .get('about') works, so I know the attributes were updated and can be accessed....
+        console.log(`in fetch and attributes are: ${model.attributes}`);
+
+        console.log(`in fetch and about is: ${model.get('about')}`);
+
+        let detailsHTML = tripDetailsTemplate(model.attattributes)
+        console.log(detailsHTML);
+
       } // function
     }); // fetch
   })
@@ -68,9 +76,11 @@ const showTripDetails = function showTripDetails() {
 
 $(document).ready(() => {
     // make the underscore function to list all the trips
-    console.log('in .ready!');
     allTripsTemplate = _.template($('#display-trips').html());
 
+    // underscore function to display the trip details
+    tripDetailsTemplate = _.template($('#trip-details-template').html());
+
     // get the trips from the api when the user clicks the 'Explore our trips!'.
     $('#get-trips').on('click', showAllTrips)
 

From d8084d38591dbb7bcc64986ff54639f004d2a65e Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 12:04:23 -0800
Subject: [PATCH 07/41] trip details are prepended to the correct spot when a
 trip is clicked on

---
 dist/index.html |  2 +-
 src/app.js      | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 99c9012..d7789cc 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,7 +15,7 @@ <h1>BackTREK</h1>
     </section>
 
     <section id="main-page" class="row">
-      <table>
+      <table id="trip-table">
         <thead>
           <th class="sort name">Name</th>
           <th class="sort continent">Continent</th>
diff --git a/src/app.js b/src/app.js
index 7c54149..1d5bfc8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -45,14 +45,18 @@ const render = function render(tripList) {
     let trip = tripList.get(tripId)
     trip.fetch({
       success: function(model) {
-        // QUESTION: Why can't I access the attributes like this? .get('about') works, so I know the attributes were updated and can be accessed....
-        console.log(`in fetch and attributes are: ${model.attributes}`);
 
-        console.log(`in fetch and about is: ${model.get('about')}`);
+        console.log(model.attributes);
 
-        let detailsHTML = tripDetailsTemplate(model.attattributes)
+        // generate the HTML for the trip details
+        let detailsHTML = tripDetailsTemplate(model.attributes)
         console.log(detailsHTML);
 
+        // prepend the trip detail inside the trip-details article. Need to change classes as well to make foundation styling work
+        $('#trip-table').addClass("large-5 column")
+        $('#trip-details').addClass("large-5 column");
+        $('#trip-details').prepend(detailsHTML);
+
       } // function
     }); // fetch
   })

From a9a969266603bcb5d312756ed10dba479967f7c2 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 12:05:52 -0800
Subject: [PATCH 08/41] empty out the trip-details article before adding
 another trips details

---
 src/app.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app.js b/src/app.js
index 1d5bfc8..8c0e875 100644
--- a/src/app.js
+++ b/src/app.js
@@ -55,6 +55,7 @@ const render = function render(tripList) {
         // prepend the trip detail inside the trip-details article. Need to change classes as well to make foundation styling work
         $('#trip-table').addClass("large-5 column")
         $('#trip-details').addClass("large-5 column");
+        $('#trip-details').empty();
         $('#trip-details').prepend(detailsHTML);
 
       } // function

From 48c1bcc1a2cb73c5eb6aed2386b450749b471370 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 13:51:43 -0800
Subject: [PATCH 09/41] now I can hide the trip details

---
 dist/index.html |  1 +
 src/app.js      | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/dist/index.html b/dist/index.html
index d7789cc..97054bb 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -51,6 +51,7 @@ <h1>BackTREK</h1>
 </script>
 
 <script type="text/template" id="trip-details-template">
+  <button id="hide-details" class="button">Hide trip details</button>
   <h3><%- name %></h3>
   <ul>
     <li>Continent: <%- continent %></li>
diff --git a/src/app.js b/src/app.js
index 8c0e875..1e26758 100644
--- a/src/app.js
+++ b/src/app.js
@@ -17,6 +17,13 @@ const tripList = new TripList();
 let allTripsTemplate;
 let tripDetailsTemplate;
 
+// function to hide the trip details
+const hideDetails = function hideDetails() {
+  $('#trip-details').empty();
+  $('#trip-table').removeClass("large-5 column")
+  $('#trip-details').removeClass("large-5 column");
+}
+
 // define a render function to call when tripList is updated or sorted
 const render = function render(tripList) {
   // select the tbody element to append to
@@ -33,6 +40,7 @@ const render = function render(tripList) {
     tripListElement.append($(tripHTML));
   }) // forEach
 
+  // QUESTION: should this be in render? it doesn't work in .ready, but render feels like a weird place for it to be....
   // click event to get the details for a trip
   $('.trip').on('click', function(event) {
     console.log('in the trip click');
@@ -58,6 +66,11 @@ const render = function render(tripList) {
         $('#trip-details').empty();
         $('#trip-details').prepend(detailsHTML);
 
+        // TODO: add an error function!
+
+        // I need to define the click function for hide-trip details within the function that generates the html for the button
+        $('#hide-details').on('click', hideDetails)
+
       } // function
     }); // fetch
   })

From 538d3bad38073c8dd049b2584087e24e536f03d7 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 14:16:33 -0800
Subject: [PATCH 10/41] changed the click event for getting the trip details to
 be applied to the tr as it is generated

---
 src/app.js | 80 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/src/app.js b/src/app.js
index 1e26758..d4b9e31 100644
--- a/src/app.js
+++ b/src/app.js
@@ -17,6 +17,41 @@ const tripList = new TripList();
 let allTripsTemplate;
 let tripDetailsTemplate;
 
+// function to show trip details
+const renderDetails = (trip) => {
+  console.log('in the renderDetails function');
+
+  // get the id of the trip you clicked on
+  let tripId = trip.get('id')
+
+  // fetch the trip details of the trip you clicked on from the api
+  // the new attributes fetch sets for the model need to be access in a callback function
+  let currentTrip = tripList.get(tripId)
+
+  currentTrip.fetch({
+    success: function(model) {
+
+      console.log(model.attributes);
+
+      // generate the HTML for the trip details
+      let detailsHTML = tripDetailsTemplate(model.attributes)
+      console.log(detailsHTML);
+
+      // prepend the trip detail inside the trip-details article. Need to change classes as well to make foundation styling work
+      $('#trip-table').addClass("large-5 column")
+      $('#trip-details').addClass("large-5 column");
+      $('#trip-details').empty();
+      $('#trip-details').prepend(detailsHTML);
+
+      // TODO: add an error function!
+
+      // I need to define the click function for hide-trip details within the function that generates the html for the button
+      $('#hide-details').on('click', hideDetails)
+
+    } // function
+  }); // fetch
+}
+
 // function to hide the trip details
 const hideDetails = function hideDetails() {
   $('#trip-details').empty();
@@ -35,45 +70,16 @@ const render = function render(tripList) {
   // make a tr for each trip
   tripList.forEach((trip) => {
     // use the underscore function to generate HTML for each trip
-    let tripHTML = allTripsTemplate(trip.attributes);
+    let tripHTML = $(allTripsTemplate(trip.attributes));
+
+    // add an event handler to each tr as it is created
+    tripHTML.on('click', (event) => {
+      renderDetails(trip);
+    }) // tripHTML.on
+
     // append the tr with HTML for each trip to the tbody
     tripListElement.append($(tripHTML));
   }) // forEach
-
-  // QUESTION: should this be in render? it doesn't work in .ready, but render feels like a weird place for it to be....
-  // click event to get the details for a trip
-  $('.trip').on('click', function(event) {
-    console.log('in the trip click');
-
-    // get the id of the trip you clicked on
-    let tripId = $(this).attr('data-id')
-
-    // fetch the trip details of the trip you clicked on from the api
-    // the new attributes fetch sets for the model need to be access in a callback function
-    let trip = tripList.get(tripId)
-    trip.fetch({
-      success: function(model) {
-
-        console.log(model.attributes);
-
-        // generate the HTML for the trip details
-        let detailsHTML = tripDetailsTemplate(model.attributes)
-        console.log(detailsHTML);
-
-        // prepend the trip detail inside the trip-details article. Need to change classes as well to make foundation styling work
-        $('#trip-table').addClass("large-5 column")
-        $('#trip-details').addClass("large-5 column");
-        $('#trip-details').empty();
-        $('#trip-details').prepend(detailsHTML);
-
-        // TODO: add an error function!
-
-        // I need to define the click function for hide-trip details within the function that generates the html for the button
-        $('#hide-details').on('click', hideDetails)
-
-      } // function
-    }); // fetch
-  })
 } // render
 
 // function to show all the trips when the 'Explore our trips' button is clicked
@@ -83,7 +89,7 @@ const showAllTrips = function showAllTrips() {
   tripList.fetch();
   // Hide the button
   $(this).hide();
-}
+} // showAllTrips
 
 // function to show the trip details when a tr is clicked on
 const showTripDetails = function showTripDetails() {

From 42310c5a572cc2c9414792e59a18c507cd72d3bc Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 14:29:14 -0800
Subject: [PATCH 11/41] changed functionality to only make the fetch api call
 for the model if it hasn't already made an api call for that trip

---
 dist/index.html |  2 +-
 src/app.js      | 69 +++++++++++++++++++++++++++----------------------
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 97054bb..b45e228 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -41,7 +41,7 @@ <h1>BackTREK</h1>
 
 
 <script type="text/template" id="display-trips">
-  <tr class="trip" data-id="<%- id %>">
+  <tr class="trip">
     <td><%- name %></td>
     <td><%- continent %></td>
     <td><%- category %></td>
diff --git a/src/app.js b/src/app.js
index d4b9e31..536cac9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,6 +16,24 @@ const tripList = new TripList();
 // define the underscore templates at a global level so we can access it in the render function and other functions
 let allTripsTemplate;
 let tripDetailsTemplate;
+// funtion to generate the html for the trip details
+const renderDetailsHtml = (model) => {
+  // generate the HTML for the trip details
+  let detailsHTML = tripDetailsTemplate(model.attributes)
+  console.log(detailsHTML);
+
+  // prepend the trip detail inside the trip-details article. Need to change classes as well to make foundation styling work
+  $('#trip-table').addClass("large-5 column")
+  $('#trip-details').addClass("large-5 column");
+  $('#trip-details').empty();
+  $('#trip-details').prepend(detailsHTML);
+
+  // TODO: add an error function!
+
+  // I need to define the click function for hide-trip details within the function that generates the html for the button
+  $('#hide-details').on('click', hideDetails)
+
+} // renderDetailsHtml
 
 // function to show trip details
 const renderDetails = (trip) => {
@@ -28,28 +46,17 @@ const renderDetails = (trip) => {
   // the new attributes fetch sets for the model need to be access in a callback function
   let currentTrip = tripList.get(tripId)
 
-  currentTrip.fetch({
-    success: function(model) {
-
-      console.log(model.attributes);
-
-      // generate the HTML for the trip details
-      let detailsHTML = tripDetailsTemplate(model.attributes)
-      console.log(detailsHTML);
-
-      // prepend the trip detail inside the trip-details article. Need to change classes as well to make foundation styling work
-      $('#trip-table').addClass("large-5 column")
-      $('#trip-details').addClass("large-5 column");
-      $('#trip-details').empty();
-      $('#trip-details').prepend(detailsHTML);
-
-      // TODO: add an error function!
-
-      // I need to define the click function for hide-trip details within the function that generates the html for the button
-      $('#hide-details').on('click', hideDetails)
-
-    } // function
-  }); // fetch
+  // if we havn't already done an api call to updage the currentTrips attributes to have 'about' then do an api call, if not then just make the trip details from the attribute the currentTrip allready has access to! 
+  if (!currentTrip.get('about')) {
+    currentTrip.fetch({
+      success: function(model) {
+        renderDetailsHtml(model);
+      } // function
+    }); // fetch
+  } else {
+    console.log('in the else! ');
+    renderDetailsHtml(trip);
+  }// if/else the currentTrip already has the about attribute
 }
 
 // function to hide the trip details
@@ -99,17 +106,17 @@ const showTripDetails = function showTripDetails() {
 } // showTripDetails
 
 $(document).ready(() => {
-    // make the underscore function to list all the trips
-    allTripsTemplate = _.template($('#display-trips').html());
+  // make the underscore function to list all the trips
+  allTripsTemplate = _.template($('#display-trips').html());
 
-    // underscore function to display the trip details
-    tripDetailsTemplate = _.template($('#trip-details-template').html());
+  // underscore function to display the trip details
+  tripDetailsTemplate = _.template($('#trip-details-template').html());
 
-    // get the trips from the api when the user clicks the 'Explore our trips!'.
-    $('#get-trips').on('click', showAllTrips)
+  // get the trips from the api when the user clicks the 'Explore our trips!'.
+  $('#get-trips').on('click', showAllTrips)
 
-    // when we update tripList we will rerender the page
-    tripList.on('update', render)
+  // when we update tripList we will rerender the page
+  tripList.on('update', render)
 
 
-  }); // .ready
+}); // .ready

From f3c818ae942dfb920442d76e0319cca0bf1e2ee2 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 16:00:23 -0800
Subject: [PATCH 12/41] basic post set up

---
 dist/index.html   | 76 +++++++++++++++++++++++++++++++-------------
 src/app.js        | 80 +++++++++++++++++++++++++++++++++++++++++++++--
 src/css/style.css |  2 +-
 3 files changed, 134 insertions(+), 24 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index b45e228..e0e5499 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -8,31 +8,41 @@
 <body>
   <header>
     <h1>BackTREK</h1>
+    <button id="add-trip" class="button">Add a trip</button>
   </header>
   <main>
-    <section id="start-background">
-      <button id="get-trips" class="button">Explore our trips!</button>
-    </section>
-
-    <section id="main-page" class="row">
-      <table id="trip-table">
-        <thead>
-          <th class="sort name">Name</th>
-          <th class="sort continent">Continent</th>
-          <th class="sort category">Category</th>
-          <th class="sort weeks">Weeks</th>
-          <th class="sort cost">Cost</th>
-        </thead>
-        <tbody id="trip-list">
-        </tbody>
-      </tbody>
-    </table>
-    <article id="trip-details">
-      <div id="book-trip">
-      </div>
-    </article>
+    <section id="status-messages">
+    <!-- <button class="clear float-right">
+      <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
+    </button> -->
+
+    <ul>
+    </ul>
+  </section>
+
+  <section id="start-background">
+    <button id="get-trips" class="button">Explore our trips!</button>
   </section>
 
+  <section id="main-page" class="row">
+    <table id="trip-table">
+      <thead>
+        <th class="sort name">Name</th>
+        <th class="sort continent">Continent</th>
+        <th class="sort category">Category</th>
+        <th class="sort weeks">Weeks</th>
+        <th class="sort cost">Cost</th>
+      </thead>
+      <tbody id="trip-list">
+      </tbody>
+    </tbody>
+  </table>
+  <article id="trip-details">
+    <div id="book-trip">
+    </div>
+  </article>
+</section>
+
 </main>
 <footer>
 
@@ -62,5 +72,29 @@ <h3><%- name %></h3>
   <p> <%- about %> </p>
 </script>
 
+<script type="text/template" id="trip-form-template">
+  <form id="add-trip-form">
+    <label for="name">Name</label>
+    <input type="text" name="name"></input>
+
+    <label for="continent">Continent</label>
+    <input type="text" name="continent"></input>
+
+    <label for="category">Category</label>
+    <input type="text" name="category"></input>
+
+    <label for="weeks">Number of weeks</label>
+    <input type="text" name="weeks"></input>
+
+    <label for="cost">Cost</label>
+    <input type="text" name="cost"></input>
+
+    <label for="about">Description</label>
+    <input type="text" name="about"></input>
+
+    <input type="submit" value="Add trip!" class="button submit-trip"></input>
+  </form>
+</script>
+
 </body>
 </html>
diff --git a/src/app.js b/src/app.js
index 536cac9..0709cea 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,9 +6,11 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
-// collections
+// collections and models
 import TripList from 'app/collections/trip_list';
+import Trip from 'app/models/trip';
 
+const TRIP_FIELDS = ['name', 'continent', 'category', 'about', 'weeks', 'cost', ]
 
 // create the tripList to store the trips we access from the API
 const tripList = new TripList();
@@ -16,6 +18,8 @@ const tripList = new TripList();
 // define the underscore templates at a global level so we can access it in the render function and other functions
 let allTripsTemplate;
 let tripDetailsTemplate;
+let tripFormTemplate;
+
 // funtion to generate the html for the trip details
 const renderDetailsHtml = (model) => {
   // generate the HTML for the trip details
@@ -46,7 +50,7 @@ const renderDetails = (trip) => {
   // the new attributes fetch sets for the model need to be access in a callback function
   let currentTrip = tripList.get(tripId)
 
-  // if we havn't already done an api call to updage the currentTrips attributes to have 'about' then do an api call, if not then just make the trip details from the attribute the currentTrip allready has access to! 
+  // if we havn't already done an api call to updage the currentTrips attributes to have 'about' then do an api call, if not then just make the trip details from the attribute the currentTrip allready has access to!
   if (!currentTrip.get('about')) {
     currentTrip.fetch({
       success: function(model) {
@@ -105,6 +109,67 @@ const showTripDetails = function showTripDetails() {
   alert('in the showTripDetails function')
 } // showTripDetails
 
+// function to read the data from the add-trip-form
+const readFormData = function readFormData() {
+  const tripData = {};
+
+  TRIP_FIELDS.forEach((field) => {
+    const inputElement = $(`#add-trip-form input[name="${ field} "]`);
+    const value = inputElement.val();
+
+    // don't allow empty strings
+    if (value != '') {
+      tripData[field] = value;
+    } // if
+
+    // clear the inputElement
+    inputElement.val('');
+  }) // forEach
+  console.log("read the trip data");
+
+  return tripData;
+} // readFormData
+
+// function to add a trip
+const addTripHandler = function(event) {
+  event.preventDefault();
+
+  const trip = new Trip(readFormData());
+
+  // TODO: add validations here!
+
+  tripList.add(trip);
+
+  trip.save({}, {
+    success: (model, response) => {
+      console.log('The trip was saved!');
+      reportStatus('success', 'Successfully saved trip!');
+    }, // success
+    error: (model, response) => {
+      console.log('failed to save the trip. Server response:');
+      console.log(response);
+
+      // remove the trip if it was not saved
+      tripList.remove(model);
+
+      // TODO: handle validations here
+    }
+  }) // book.save
+
+} // addTripHandler
+
+// funtion to report statuses
+// const reportStatus = function reportStatus(status, message) {
+//   console.log(`reporting ${ status } status: ${ message }`);
+//
+//   // Should probably use an Underscore template here.
+//   const statusHTML = `<li class="${ status }">${ message }</li>`;
+//
+//   // note the symetry with clearStatus()
+//   $('#status-messages ul').append(statusHTML);
+//   $('#status-messages').show();
+// } // reportStatus
+
 $(document).ready(() => {
   // make the underscore function to list all the trips
   allTripsTemplate = _.template($('#display-trips').html());
@@ -112,11 +177,22 @@ $(document).ready(() => {
   // underscore function to display the trip details
   tripDetailsTemplate = _.template($('#trip-details-template').html());
 
+  // underscore function to get form to make a new trip
+  tripFormTemplate = _.template($('#trip-form-template').html());
+
   // get the trips from the api when the user clicks the 'Explore our trips!'.
   $('#get-trips').on('click', showAllTrips)
 
   // when we update tripList we will rerender the page
   tripList.on('update', render)
 
+  // click event to add a trip
+  // keeping this all in the .ready for now so it is easier to refactor to add a modal later
+  $('#add-trip').on('click', () => {
+    let formHTML = tripFormTemplate();
+    $('main').prepend(formHTML);
 
+    // make the form go away when you submit the form
+    $('#add-trip-form').on('submit', addTripHandler)
+  }) // add-trip.on
 }); // .ready
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..cef9b8d 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,2 @@
 
-/* Your styles go here! */
+/* modal */

From a29cb93635f62a2d51a04b14211a8cd2717a3a7d Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 16:28:16 -0800
Subject: [PATCH 13/41] actually posting now

---
 src/app.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app.js b/src/app.js
index 0709cea..97aa763 100644
--- a/src/app.js
+++ b/src/app.js
@@ -10,7 +10,7 @@ import './css/style.css';
 import TripList from 'app/collections/trip_list';
 import Trip from 'app/models/trip';
 
-const TRIP_FIELDS = ['name', 'continent', 'category', 'about', 'weeks', 'cost', ]
+const TRIP_FIELDS = ['name', 'continent', 'category', 'about', 'weeks', 'cost']
 
 // create the tripList to store the trips we access from the API
 const tripList = new TripList();
@@ -110,12 +110,13 @@ const showTripDetails = function showTripDetails() {
 } // showTripDetails
 
 // function to read the data from the add-trip-form
-const readFormData = function readFormData() {
-  const tripData = {};
+let readFormData = function readFormData() {
+  let tripData = {};
 
   TRIP_FIELDS.forEach((field) => {
-    const inputElement = $(`#add-trip-form input[name="${ field} "]`);
-    const value = inputElement.val();
+    let inputElement = $(`#add-trip-form input[name="${field}"]`);
+    let value = inputElement.val();
+    console.log(value);
 
     // don't allow empty strings
     if (value != '') {
@@ -126,8 +127,9 @@ const readFormData = function readFormData() {
     inputElement.val('');
   }) // forEach
   console.log("read the trip data");
-
+  console.log(tripData);
   return tripData;
+
 } // readFormData
 
 // function to add a trip
@@ -136,6 +138,9 @@ const addTripHandler = function(event) {
 
   const trip = new Trip(readFormData());
 
+  console.log(`trip data:`);
+  console.log(trip);
+
   // TODO: add validations here!
 
   tripList.add(trip);

From 1e69e5cf62ed4a301e17d2acab2411ecdb590c55 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 16:37:04 -0800
Subject: [PATCH 14/41] form is removed if trip is saved

---
 src/app.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app.js b/src/app.js
index 97aa763..210e6a6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -149,6 +149,7 @@ const addTripHandler = function(event) {
     success: (model, response) => {
       console.log('The trip was saved!');
       reportStatus('success', 'Successfully saved trip!');
+      $('#add-trip-form').remove();
     }, // success
     error: (model, response) => {
       console.log('failed to save the trip. Server response:');
@@ -164,16 +165,16 @@ const addTripHandler = function(event) {
 } // addTripHandler
 
 // funtion to report statuses
-// const reportStatus = function reportStatus(status, message) {
-//   console.log(`reporting ${ status } status: ${ message }`);
-//
-//   // Should probably use an Underscore template here.
-//   const statusHTML = `<li class="${ status }">${ message }</li>`;
-//
-//   // note the symetry with clearStatus()
-//   $('#status-messages ul').append(statusHTML);
-//   $('#status-messages').show();
-// } // reportStatus
+const reportStatus = function reportStatus(status, message) {
+  console.log(`reporting ${ status } status: ${ message }`);
+
+  // Should probably use an Underscore template here.
+  const statusHTML = `<li class="${ status }">${ message }</li>`;
+
+  // note the symetry with clearStatus()
+  $('#status-messages ul').append(statusHTML);
+  $('#status-messages').show();
+} // reportStatus
 
 $(document).ready(() => {
   // make the underscore function to list all the trips

From 2e24203f7615d0045aa71e1e22ed6ef1149f7a5d Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 16:43:41 -0800
Subject: [PATCH 15/41] added handleValidationFailures function

---
 src/app.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 210e6a6..e5fda46 100644
--- a/src/app.js
+++ b/src/app.js
@@ -132,6 +132,15 @@ let readFormData = function readFormData() {
 
 } // readFormData
 
+// function to display validation failure error message
+const handleValidationErrors = function handleValidationErrors(errors) {
+  for (let field in errors) {
+    for (let problem of errors[field]) {
+      reportStatus('error', `${field}: ${problem}`);
+    }
+  }
+} // handleValidationErrors
+
 // function to add a trip
 const addTripHandler = function(event) {
   event.preventDefault();
@@ -159,9 +168,9 @@ const addTripHandler = function(event) {
       tripList.remove(model);
 
       // TODO: handle validations here
-    }
+      handleValidationErrors(response.responseJSON["errors"]);
+    },
   }) // book.save
-
 } // addTripHandler
 
 // funtion to report statuses

From 7747b9a42447a35ff3ce0376fa6f4cc53a95fd02 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 16:47:08 -0800
Subject: [PATCH 16/41] added validation check via an if statement in
 addTripHandler

---
 src/app.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app.js b/src/app.js
index e5fda46..97ba475 100644
--- a/src/app.js
+++ b/src/app.js
@@ -150,8 +150,11 @@ const addTripHandler = function(event) {
   console.log(`trip data:`);
   console.log(trip);
 
-  // TODO: add validations here!
-
+  // break out of the function if the trip is not valid
+  if (!trip.isValid()) {
+    handleValidationErrors(trip.validationError);
+    return;
+  }
   tripList.add(trip);
 
   trip.save({}, {
@@ -167,7 +170,6 @@ const addTripHandler = function(event) {
       // remove the trip if it was not saved
       tripList.remove(model);
 
-      // TODO: handle validations here
       handleValidationErrors(response.responseJSON["errors"]);
     },
   }) // book.save

From 864bba9818114e87cb0cec33b72c9cc826d6876c Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 16:54:06 -0800
Subject: [PATCH 17/41] added validations to the Trip model

---
 src/app/models/trip.js | 32 ++++++++++++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 2741612..12b9585 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,5 +1,33 @@
 import Backbone from 'backbone'
 
-const Trip = Backbone.Model.extend({});
+const Trip = Backbone.Model.extend({
+  validate(attributes) {
+    const errors = {};
 
-export default Trip; 
+    if (!attributes.name) {
+      errors.name = ['cannot be blank'];
+    }
+
+    if (!attributes.continent) {
+      errors.continent = ['cannot be blank'];
+    }
+
+    if (!attributes.category) {
+      errors.category = ['cannot be blank'];
+    }
+
+    if (!attributes.about) {
+      errors.about = ['cannot be blank'];
+    }
+
+    if (!attributes.weeks) {
+      errors.weeks = ['cannot be blank'];
+    }
+
+    if (!attributes.cost) {
+      errors.cost = ['cannot be blank'];
+    }
+  } // validate
+});
+
+export default Trip;

From ff3e1639124e607c1ece592e45a6d2ebdb8ecb7a Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 19:33:04 -0800
Subject: [PATCH 18/41] added url to the model so now I can make a bad most
 request without triggering update

---
 src/app.js             | 6 ++++--
 src/app/models/trip.js | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 97ba475..2fc5451 100644
--- a/src/app.js
+++ b/src/app.js
@@ -145,6 +145,7 @@ const handleValidationErrors = function handleValidationErrors(errors) {
 const addTripHandler = function(event) {
   event.preventDefault();
 
+
   const trip = new Trip(readFormData());
 
   console.log(`trip data:`);
@@ -155,11 +156,12 @@ const addTripHandler = function(event) {
     handleValidationErrors(trip.validationError);
     return;
   }
-  tripList.add(trip);
 
   trip.save({}, {
     success: (model, response) => {
+      tripList.add(trip);
       console.log('The trip was saved!');
+      console.log(`I can access the trip $(tripList.get(trip))`);
       reportStatus('success', 'Successfully saved trip!');
       $('#add-trip-form').remove();
     }, // success
@@ -168,7 +170,7 @@ const addTripHandler = function(event) {
       console.log(response);
 
       // remove the trip if it was not saved
-      tripList.remove(model);
+      // tripList.remove(model);
 
       handleValidationErrors(response.responseJSON["errors"]);
     },
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 12b9585..a21b75b 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,6 +1,7 @@
 import Backbone from 'backbone'
 
 const Trip = Backbone.Model.extend({
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
   validate(attributes) {
     const errors = {};
 

From fc66b9f310b196a13c27c16c47adb4ee49c33a42 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 19:39:38 -0800
Subject: [PATCH 19/41] moved where the form is placed down one lace

---
 dist/index.html | 2 +-
 src/app.js      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index e0e5499..3933895 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,10 +15,10 @@ <h1>BackTREK</h1>
     <!-- <button class="clear float-right">
       <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
     </button> -->
-
     <ul>
     </ul>
   </section>
+  <section id="place-for-form"></section>
 
   <section id="start-background">
     <button id="get-trips" class="button">Explore our trips!</button>
diff --git a/src/app.js b/src/app.js
index 2fc5451..9c386b2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -209,7 +209,7 @@ $(document).ready(() => {
   // keeping this all in the .ready for now so it is easier to refactor to add a modal later
   $('#add-trip').on('click', () => {
     let formHTML = tripFormTemplate();
-    $('main').prepend(formHTML);
+    $('#place-for-form').append(formHTML);
 
     // make the form go away when you submit the form
     $('#add-trip-form').on('submit', addTripHandler)

From 503647381806d18f680b088dc6fdb72aa830a67a Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 20:17:50 -0800
Subject: [PATCH 20/41] adding functionality to hide and show the add a trip
 button

---
 src/app.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app.js b/src/app.js
index 9c386b2..3b0707d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -164,6 +164,7 @@ const addTripHandler = function(event) {
       console.log(`I can access the trip $(tripList.get(trip))`);
       reportStatus('success', 'Successfully saved trip!');
       $('#add-trip-form').remove();
+      $('#add-trip').show();
     }, // success
     error: (model, response) => {
       console.log('failed to save the trip. Server response:');
@@ -210,6 +211,7 @@ $(document).ready(() => {
   $('#add-trip').on('click', () => {
     let formHTML = tripFormTemplate();
     $('#place-for-form').append(formHTML);
+    $('#add-trip').hide();
 
     // make the form go away when you submit the form
     $('#add-trip-form').on('submit', addTripHandler)

From 15d1dc89dc9af25a3f55fd845d446a4f85f91c02 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 20:22:29 -0800
Subject: [PATCH 21/41] added a cancel button for the add-trip frm

---
 dist/index.html | 2 ++
 src/app.js      | 7 +++++++
 2 files changed, 9 insertions(+)

diff --git a/dist/index.html b/dist/index.html
index 3933895..f196d34 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -93,7 +93,9 @@ <h3><%- name %></h3>
     <input type="text" name="about"></input>
 
     <input type="submit" value="Add trip!" class="button submit-trip"></input>
+    <button id="cancel" class="button">Cancel</button>
   </form>
+
 </script>
 
 </body>
diff --git a/src/app.js b/src/app.js
index 3b0707d..6b8aadc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -213,6 +213,13 @@ $(document).ready(() => {
     $('#place-for-form').append(formHTML);
     $('#add-trip').hide();
 
+    // remove form when you hit the cancel button
+    $('#cancel').on('click', (event) => {
+      $('#add-trip-form').remove();
+      $('#cancel').remove();
+      $('#add-trip').show();
+    }) // cancel.on
+
     // make the form go away when you submit the form
     $('#add-trip-form').on('submit', addTripHandler)
   }) // add-trip.on

From d21e399a6367772c27044a37adfcc616486e3eff Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 21:25:00 -0800
Subject: [PATCH 22/41] pushing so I can checkout a differnt branch

---
 dist/index.html               | 18 ++++++++++++++++--
 src/app/models/reservation.js |  7 +++++++
 2 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/app/models/reservation.js

diff --git a/dist/index.html b/dist/index.html
index f196d34..bd4f0c3 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -38,8 +38,6 @@ <h1>BackTREK</h1>
     </tbody>
   </table>
   <article id="trip-details">
-    <div id="book-trip">
-    </div>
   </article>
 </section>
 
@@ -70,6 +68,22 @@ <h3><%- name %></h3>
     <li>Cost: <%- cost %></li>
   </ul>
   <p> <%- about %> </p>
+
+  <form id="reservation-form">
+
+    <input type="hidden" id="trip_id" name="trip_id" value="<%- id %>">
+
+    <label for="name">Name</label>
+    <input type="text" name="name"></input>
+
+    <label for="age">Age</label>
+    <input type="text" name="age"></input>
+
+    <label for="email">Email</label>
+    <input type="text" name="email"></input>
+
+    <input type="submit" value="Book trip!" class="button"></input>
+  </form>
 </script>
 
 <script type="text/template" id="trip-form-template">
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
new file mode 100644
index 0000000..f1ee22a
--- /dev/null
+++ b/src/app/models/reservation.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+
+});
+
+export default Reservation

From 9c274dfd8c0b7621d4de57f46b74a70afa1e7fc8 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 21:40:40 -0800
Subject: [PATCH 23/41] added a form to reserve the trip

---
 dist/index.html        | 2 +-
 src/app/models/trip.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index bd4f0c3..46e441d 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -69,8 +69,8 @@ <h3><%- name %></h3>
   </ul>
   <p> <%- about %> </p>
 
+  <h4>Book this trip!</h4>
   <form id="reservation-form">
-
     <input type="hidden" id="trip_id" name="trip_id" value="<%- id %>">
 
     <label for="name">Name</label>
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index a21b75b..2fe2f22 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,7 +1,8 @@
 import Backbone from 'backbone'
 
 const Trip = Backbone.Model.extend({
-  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+  // NOTE: if I put this url is then the fetch() doesn't work to get the trip details, but it makes it so the 'update' action isn't run when I add a trip to tripList right before I save a new trip ... 
+  // url: 'https://ada-backtrek-api.herokuapp.com/trips',
   validate(attributes) {
     const errors = {};
 

From 0abfef0a0592d5e3e4947c31d8f26ade86d776ab Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 21:54:43 -0800
Subject: [PATCH 24/41] added click event for reserving a trip, but right now
 it just sends an allert

---
 src/app.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app.js b/src/app.js
index 6b8aadc..d2ebd23 100644
--- a/src/app.js
+++ b/src/app.js
@@ -20,6 +20,12 @@ let allTripsTemplate;
 let tripDetailsTemplate;
 let tripFormTemplate;
 
+// function to reserve a trip
+const reserveTrip = (trip) => {
+  trip.preventDefault();
+  alert('in reserveTrip!')
+}//
+
 // funtion to generate the html for the trip details
 const renderDetailsHtml = (model) => {
   // generate the HTML for the trip details
@@ -37,6 +43,12 @@ const renderDetailsHtml = (model) => {
   // I need to define the click function for hide-trip details within the function that generates the html for the button
   $('#hide-details').on('click', hideDetails)
 
+  // add click event for the reservation form in this HTML
+  $('#reservation-form').on('submit', (event) => {
+    event.preventDefault();
+    reserveTrip(event);
+  });
+
 } // renderDetailsHtml
 
 // function to show trip details

From 05df3d3ccda929995c7d657e1258ef34e09770cf Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 22:24:53 -0800
Subject: [PATCH 25/41] attempted to make custom url for Reservation and wrote
 reserveTrip method to try to make an api call to reserve a trip. Not working
 yet

---
 src/app.js                    | 43 +++++++++++++++++++++++++++++++----
 src/app/models/reservation.js |  5 +++-
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/app.js b/src/app.js
index d2ebd23..47ac189 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,6 +9,7 @@ import './css/style.css';
 // collections and models
 import TripList from 'app/collections/trip_list';
 import Trip from 'app/models/trip';
+import Reservation from 'app/models/reservation';
 
 const TRIP_FIELDS = ['name', 'continent', 'category', 'about', 'weeks', 'cost']
 
@@ -21,10 +22,44 @@ let tripDetailsTemplate;
 let tripFormTemplate;
 
 // function to reserve a trip
-const reserveTrip = (trip) => {
-  trip.preventDefault();
-  alert('in reserveTrip!')
-}//
+const reserveTrip = (event) => {
+  event.preventDefault();
+  console.log('in reserveTrip');
+  // alert('in reserveTrip!')
+
+  // QUESTION: can you manually set the url for the Reservation in here instead of in the model? then each Reservation would have their own url? Or can you define a url method in the model that will know to take the trip_id attribute from the model and put it into the url?
+
+  const RES_FIELDS = ['name', 'age', 'email'];
+  let resData = {}
+
+  RES_FIELDS.forEach((field) => {
+    const resInputEl = $('#reservation-form input[name="${field}"]');
+
+    const resValue = resInputEl.val();
+
+    if (resValue != '') {
+      resData[field] = resValue
+    } // if
+
+    // QUESTION: Do I need to clear out resValue too?
+    resInputEl.val('')//
+  }) // forEach
+
+  const reservation = new Reservation(resData);
+
+  reservation.save({}, {
+    success: (model, response) => {
+      console.log('successfully saved the reservation');
+      reportStatus('success', 'You are reserved for the trip!')
+    }, // success
+    error: (model, response) => {
+      console.log('Failed to reserve the trip! Server response:');
+      console.log(response);
+
+      handleValidationFailures(response.responseJSON["errors"]);
+    }, // error
+  }) // save
+} // reserveTrip
 
 // funtion to generate the html for the trip details
 const renderDetailsHtml = (model) => {
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index f1ee22a..546af6c 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -1,7 +1,10 @@
 import Backbone from 'backbone';
 
 const Reservation = Backbone.Model.extend({
-
+  baseUrl: "https://ada-backtrek-api.herokuapp.com/trips/",
+  url: function() {
+    return this.baseUrl + this.trip_id + "reservations";
+  }, // url
 });
 
 export default Reservation

From 6c3b0e3555d364e2dca10d2dd559786f1a6931bc Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Wed, 29 Nov 2017 22:26:23 -0800
Subject: [PATCH 26/41] added some comments to help me tomorrow

---
 src/app.js                    | 1 +
 src/app/models/reservation.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app.js b/src/app.js
index 47ac189..13cb442 100644
--- a/src/app.js
+++ b/src/app.js
@@ -56,6 +56,7 @@ const reserveTrip = (event) => {
       console.log('Failed to reserve the trip! Server response:');
       console.log(response);
 
+      // QUESTION: why isn't handleValidationErrors defined in this scope?
       handleValidationFailures(response.responseJSON["errors"]);
     }, // error
   }) // save
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index 546af6c..e08560f 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -3,6 +3,7 @@ import Backbone from 'backbone';
 const Reservation = Backbone.Model.extend({
   baseUrl: "https://ada-backtrek-api.herokuapp.com/trips/",
   url: function() {
+    // QUESTION: how do I make 'this.trip_id' not be 'undefined'?
     return this.baseUrl + this.trip_id + "reservations";
   }, // url
 });

From 9cac8683690ee1b075d1f4d2dcb6e5f916dd6d77 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 09:51:18 -0800
Subject: [PATCH 27/41] you can reserve a trip now

---
 src/app.js                    | 18 +++++++++---------
 src/app/models/reservation.js | 10 ++++++----
 src/app/models/trip.js        |  3 ++-
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/app.js b/src/app.js
index 13cb442..7499d56 100644
--- a/src/app.js
+++ b/src/app.js
@@ -29,23 +29,23 @@ const reserveTrip = (event) => {
 
   // QUESTION: can you manually set the url for the Reservation in here instead of in the model? then each Reservation would have their own url? Or can you define a url method in the model that will know to take the trip_id attribute from the model and put it into the url?
 
-  const RES_FIELDS = ['name', 'age', 'email'];
+  const RES_FIELDS = ['name', 'age', 'email', 'trip_id'];
   let resData = {}
 
   RES_FIELDS.forEach((field) => {
-    const resInputEl = $('#reservation-form input[name="${field}"]');
+    const input = $(`#reservation-form input[name="${ field }"]`);
+    const val = input.val();
 
-    const resValue = resInputEl.val();
-
-    if (resValue != '') {
-      resData[field] = resValue
-    } // if
+    if (val != '') {
+      resData[field] = val;
+    }
 
-    // QUESTION: Do I need to clear out resValue too?
-    resInputEl.val('')//
+    input.val('');
   }) // forEach
 
   const reservation = new Reservation(resData);
+  console.log(`reservation`);
+  console.log(reservation);
 
   reservation.save({}, {
     success: (model, response) => {
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index e08560f..cf83c79 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -1,11 +1,13 @@
 import Backbone from 'backbone';
 
 const Reservation = Backbone.Model.extend({
-  baseUrl: "https://ada-backtrek-api.herokuapp.com/trips/",
-  url: function() {
+  // baseUrl: "https://ada-backtrek-api.herokuapp.com/trips/",
+  // tripIdAttribute: this.get('trip_id'),
+  //QUESTION: can I access trip_id in here and have it be differnt for each model? Or do I need to have a more complex function to set the url that takes an argument (the trip_id) and then I can set it for each instance of the model before I call .save()?
+  urlRoot() {
     // QUESTION: how do I make 'this.trip_id' not be 'undefined'?
-    return this.baseUrl + this.trip_id + "reservations";
-  }, // url
+    return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('trip_id')}/reservations`
+  }, // urlRoot
 });
 
 export default Reservation
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 2fe2f22..756d554 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,7 +1,8 @@
 import Backbone from 'backbone'
 
 const Trip = Backbone.Model.extend({
-  // NOTE: if I put this url is then the fetch() doesn't work to get the trip details, but it makes it so the 'update' action isn't run when I add a trip to tripList right before I save a new trip ... 
+  // NOTE: if I put this url is then the fetch() doesn't work to get the trip details, but it makes it so the 'update' action isn't run when I add a trip to tripList right before I save a new trip ...
+  // use urlRoot instead 
   // url: 'https://ada-backtrek-api.herokuapp.com/trips',
   validate(attributes) {
     const errors = {};

From ae5ff977e13bce0b1fe7139221b2a1c01f818f96 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 10:14:15 -0800
Subject: [PATCH 28/41] switched to using a template method to display the
 status messages

---
 dist/index.html               |  5 +++++
 src/app.js                    | 12 ++++++++++--
 src/app/models/reservation.js |  1 -
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 46e441d..a3bf4e6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -109,7 +109,12 @@ <h4>Book this trip!</h4>
     <input type="submit" value="Add trip!" class="button submit-trip"></input>
     <button id="cancel" class="button">Cancel</button>
   </form>
+</script>
 
+<script type="text/template" id="status-message-template">
+  <li class="<%- status %>">
+    <%- message %>
+  </li>
 </script>
 
 </body>
diff --git a/src/app.js b/src/app.js
index 7499d56..5345cc3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -20,6 +20,7 @@ const tripList = new TripList();
 let allTripsTemplate;
 let tripDetailsTemplate;
 let tripFormTemplate;
+let statusTemplate;
 
 // function to reserve a trip
 const reserveTrip = (event) => {
@@ -230,8 +231,11 @@ const addTripHandler = function(event) {
 const reportStatus = function reportStatus(status, message) {
   console.log(`reporting ${ status } status: ${ message }`);
 
-  // Should probably use an Underscore template here.
-  const statusHTML = `<li class="${ status }">${ message }</li>`;
+  // make an object to pass to the template method
+  let statusMessage = {status: status, message: message}
+
+  // template method generates the li html for each message 
+  const statusHTML = statusTemplate(statusMessage);
 
   // note the symetry with clearStatus()
   $('#status-messages ul').append(statusHTML);
@@ -248,6 +252,10 @@ $(document).ready(() => {
   // underscore function to get form to make a new trip
   tripFormTemplate = _.template($('#trip-form-template').html());
 
+
+  // underscore template to show status messages
+  statusTemplate = _.template($('#status-message-template').html());
+
   // get the trips from the api when the user clicks the 'Explore our trips!'.
   $('#get-trips').on('click', showAllTrips)
 
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index cf83c79..fcc37fc 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -5,7 +5,6 @@ const Reservation = Backbone.Model.extend({
   // tripIdAttribute: this.get('trip_id'),
   //QUESTION: can I access trip_id in here and have it be differnt for each model? Or do I need to have a more complex function to set the url that takes an argument (the trip_id) and then I can set it for each instance of the model before I call .save()?
   urlRoot() {
-    // QUESTION: how do I make 'this.trip_id' not be 'undefined'?
     return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('trip_id')}/reservations`
   }, // urlRoot
 });

From 4384c761dd7fbe4247bc6416ff383c65554a09d3 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 10:21:48 -0800
Subject: [PATCH 29/41] added book css for status messages to style.css

---
 dist/index.html   |  4 ++--
 src/css/style.css | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index a3bf4e6..9df3c34 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,9 +12,9 @@ <h1>BackTREK</h1>
   </header>
   <main>
     <section id="status-messages">
-    <!-- <button class="clear float-right">
+    <button class="clear float-right">
       <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
-    </button> -->
+    </button>
     <ul>
     </ul>
   </section>
diff --git a/src/css/style.css b/src/css/style.css
index cef9b8d..66aef21 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,35 @@
 
-/* modal */
+/* Styles for error section at the top */
+#status-messages {
+  background-color: #dfdfdf;
+
+  /* Hide by default */
+  display: none;
+
+  border-radius: 1rem;
+  margin: 1rem;
+  height: 100%;
+  padding: .8rem;
+}
+
+#status-messages ul {
+  list-style: none;
+  margin-left: 0;
+}
+
+#status-messages button.clear {
+  margin-top: .2rem;
+  height: 100%;
+}
+
+#status-messages button.clear img {
+  width: 2rem;
+}
+
+#status-messages .error {
+  color: red;
+}
+
+#status-messages .success {
+  color: green;
+}

From bb94dfd2b5a6acf12a53dca9dfa4071c6f9a814e Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 10:25:06 -0800
Subject: [PATCH 30/41] can remove status messages by clicking the x

---
 src/app.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app.js b/src/app.js
index 5345cc3..7a90b73 100644
--- a/src/app.js
+++ b/src/app.js
@@ -227,6 +227,12 @@ const addTripHandler = function(event) {
   }) // book.save
 } // addTripHandler
 
+// clear status messages when you click the x button
+const clearStatus = function clearStatus() {
+  $('#status-messages ul').html('');
+  $('#status-messages').hide();
+} // clear status
+
 // funtion to report statuses
 const reportStatus = function reportStatus(status, message) {
   console.log(`reporting ${ status } status: ${ message }`);
@@ -234,7 +240,7 @@ const reportStatus = function reportStatus(status, message) {
   // make an object to pass to the template method
   let statusMessage = {status: status, message: message}
 
-  // template method generates the li html for each message 
+  // template method generates the li html for each message
   const statusHTML = statusTemplate(statusMessage);
 
   // note the symetry with clearStatus()
@@ -279,4 +285,7 @@ $(document).ready(() => {
     // make the form go away when you submit the form
     $('#add-trip-form').on('submit', addTripHandler)
   }) // add-trip.on
+
+  // click event to clear status messages
+   $('#status-messages button.clear').on('click', clearStatus);
 }); // .ready

From 66e587192f60250fd5987caf480c127e5c091a53 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 12:53:33 -0800
Subject: [PATCH 31/41] added extra attribute to reportStatus to direct where
 to put the status messages. Still works for error messages that go to the top
 of the page

---
 src/app.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app.js b/src/app.js
index 7a90b73..24ea52f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -51,7 +51,7 @@ const reserveTrip = (event) => {
   reservation.save({}, {
     success: (model, response) => {
       console.log('successfully saved the reservation');
-      reportStatus('success', 'You are reserved for the trip!')
+      reportStatus('success', 'You are reserved for the trip!', 'top')
     }, // success
     error: (model, response) => {
       console.log('Failed to reserve the trip! Server response:');
@@ -185,7 +185,7 @@ let readFormData = function readFormData() {
 const handleValidationErrors = function handleValidationErrors(errors) {
   for (let field in errors) {
     for (let problem of errors[field]) {
-      reportStatus('error', `${field}: ${problem}`);
+      reportStatus('error', `${field}: ${problem}`, 'top');
     }
   }
 } // handleValidationErrors
@@ -211,7 +211,7 @@ const addTripHandler = function(event) {
       tripList.add(trip);
       console.log('The trip was saved!');
       console.log(`I can access the trip $(tripList.get(trip))`);
-      reportStatus('success', 'Successfully saved trip!');
+      reportStatus('success', 'Successfully saved trip!', 'top');
       $('#add-trip-form').remove();
       $('#add-trip').show();
     }, // success
@@ -234,7 +234,7 @@ const clearStatus = function clearStatus() {
 } // clear status
 
 // funtion to report statuses
-const reportStatus = function reportStatus(status, message) {
+const reportStatus = function reportStatus(status, message, appendTo) {
   console.log(`reporting ${ status } status: ${ message }`);
 
   // make an object to pass to the template method
@@ -242,10 +242,11 @@ const reportStatus = function reportStatus(status, message) {
 
   // template method generates the li html for each message
   const statusHTML = statusTemplate(statusMessage);
-
-  // note the symetry with clearStatus()
-  $('#status-messages ul').append(statusHTML);
-  $('#status-messages').show();
+  if (appendTo === 'top') {
+    // note the symetry with clearStatus()
+    $('#status-messages ul').append(statusHTML);
+    $('#status-messages').show();
+  } // if
 } // reportStatus
 
 $(document).ready(() => {
@@ -287,5 +288,5 @@ $(document).ready(() => {
   }) // add-trip.on
 
   // click event to clear status messages
-   $('#status-messages button.clear').on('click', clearStatus);
+  $('#status-messages button.clear').on('click', clearStatus);
 }); // .ready

From 12b698de1ef340c134a9bbe33b5e8ce69a5e99fe Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 13:09:06 -0800
Subject: [PATCH 32/41] undid addition of if else statement to reportStatus

---
 src/app.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app.js b/src/app.js
index 24ea52f..4978361 100644
--- a/src/app.js
+++ b/src/app.js
@@ -51,7 +51,7 @@ const reserveTrip = (event) => {
   reservation.save({}, {
     success: (model, response) => {
       console.log('successfully saved the reservation');
-      reportStatus('success', 'You are reserved for the trip!', 'top')
+      reportStatus('success', 'You are reserved for the trip!')
     }, // success
     error: (model, response) => {
       console.log('Failed to reserve the trip! Server response:');
@@ -185,7 +185,7 @@ let readFormData = function readFormData() {
 const handleValidationErrors = function handleValidationErrors(errors) {
   for (let field in errors) {
     for (let problem of errors[field]) {
-      reportStatus('error', `${field}: ${problem}`, 'top');
+      reportStatus('error', `${field}: ${problem}`);
     }
   }
 } // handleValidationErrors
@@ -211,7 +211,7 @@ const addTripHandler = function(event) {
       tripList.add(trip);
       console.log('The trip was saved!');
       console.log(`I can access the trip $(tripList.get(trip))`);
-      reportStatus('success', 'Successfully saved trip!', 'top');
+      reportStatus('success', 'Successfully saved trip!');
       $('#add-trip-form').remove();
       $('#add-trip').show();
     }, // success
@@ -234,7 +234,7 @@ const clearStatus = function clearStatus() {
 } // clear status
 
 // funtion to report statuses
-const reportStatus = function reportStatus(status, message, appendTo) {
+const reportStatus = function reportStatus(status, message) {
   console.log(`reporting ${ status } status: ${ message }`);
 
   // make an object to pass to the template method
@@ -242,11 +242,11 @@ const reportStatus = function reportStatus(status, message, appendTo) {
 
   // template method generates the li html for each message
   const statusHTML = statusTemplate(statusMessage);
-  if (appendTo === 'top') {
-    // note the symetry with clearStatus()
-    $('#status-messages ul').append(statusHTML);
-    $('#status-messages').show();
-  } // if
+
+  // note the symetry with clearStatus()
+  $('#status-messages ul').append(statusHTML);
+  $('#status-messages').show();
+
 } // reportStatus
 
 $(document).ready(() => {

From f58b1e8b025186f92af86b9786a074a44707c6f1 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 13:15:57 -0800
Subject: [PATCH 33/41] success status for reserving trip is now put below the
 h4 for the reserve form

---
 dist/index.html |  4 +++-
 src/app.js      | 15 +++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 9df3c34..82da088 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -69,7 +69,9 @@ <h3><%- name %></h3>
   </ul>
   <p> <%- about %> </p>
 
-  <h4>Book this trip!</h4>
+  <h4 id="form-title">Book this trip!</h4>
+  <ul id="form-status">
+  </ul>
   <form id="reservation-form">
     <input type="hidden" id="trip_id" name="trip_id" value="<%- id %>">
 
diff --git a/src/app.js b/src/app.js
index 4978361..050ecab 100644
--- a/src/app.js
+++ b/src/app.js
@@ -51,7 +51,7 @@ const reserveTrip = (event) => {
   reservation.save({}, {
     success: (model, response) => {
       console.log('successfully saved the reservation');
-      reportStatus('success', 'You are reserved for the trip!')
+      reserveStatus('success', 'You are reserved for the trip!')
     }, // success
     error: (model, response) => {
       console.log('Failed to reserve the trip! Server response:');
@@ -233,7 +233,7 @@ const clearStatus = function clearStatus() {
   $('#status-messages').hide();
 } // clear status
 
-// funtion to report statuses
+// funtion to report statuses at the top of the page
 const reportStatus = function reportStatus(status, message) {
   console.log(`reporting ${ status } status: ${ message }`);
 
@@ -249,6 +249,17 @@ const reportStatus = function reportStatus(status, message) {
 
 } // reportStatus
 
+// function to report status for the reserve trip form
+const reserveStatus = function reserveStatus(status, message) {
+  const statusObj = { status: status, message: message }
+
+  const resStatusHtml = statusTemplate(statusObj);
+
+  $('#form-status').append(resStatusHtml);
+} // reserveStatus
+
+
+
 $(document).ready(() => {
   // make the underscore function to list all the trips
   allTripsTemplate = _.template($('#display-trips').html());

From 188906bd86215835958466f65c90ed385cce326c Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 16:09:56 -0800
Subject: [PATCH 34/41] error messages from the server for the reserve trip are
 now added below the header above the form

---
 src/app.js                    | 26 +++++++++++++++-----------
 src/app/models/reservation.js |  7 +++++++
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/app.js b/src/app.js
index 050ecab..66f0a8e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -26,9 +26,6 @@ let statusTemplate;
 const reserveTrip = (event) => {
   event.preventDefault();
   console.log('in reserveTrip');
-  // alert('in reserveTrip!')
-
-  // QUESTION: can you manually set the url for the Reservation in here instead of in the model? then each Reservation would have their own url? Or can you define a url method in the model that will know to take the trip_id attribute from the model and put it into the url?
 
   const RES_FIELDS = ['name', 'age', 'email', 'trip_id'];
   let resData = {}
@@ -56,9 +53,10 @@ const reserveTrip = (event) => {
     error: (model, response) => {
       console.log('Failed to reserve the trip! Server response:');
       console.log(response);
+      console.log(response.responseJSON["errors"]);
 
-      // QUESTION: why isn't handleValidationErrors defined in this scope?
-      handleValidationFailures(response.responseJSON["errors"]);
+      // QUESTION: why isn't handleValidationErrors defined in this scope? Might work now
+      handleValidationErrors(response.responseJSON["errors"], 'form');
     }, // error
   }) // save
 } // reserveTrip
@@ -182,11 +180,17 @@ let readFormData = function readFormData() {
 } // readFormData
 
 // function to display validation failure error message
-const handleValidationErrors = function handleValidationErrors(errors) {
+const handleValidationErrors = function handleValidationErrors(errors, nextFunction) {
   for (let field in errors) {
-    for (let problem of errors[field]) {
-      reportStatus('error', `${field}: ${problem}`);
-    }
+    if (nextFunction === 'top') {
+      for (let problem of errors[field]) {
+        reportStatus('error', `${field}: ${problem}`);
+      } // for
+    } else if (nextFunction === 'form') {
+      for (let problem of errors[field]) {
+        reserveStatus('error', `${field}: ${problem}`);
+      } // for
+    }// if else if
   }
 } // handleValidationErrors
 
@@ -202,7 +206,7 @@ const addTripHandler = function(event) {
 
   // break out of the function if the trip is not valid
   if (!trip.isValid()) {
-    handleValidationErrors(trip.validationError);
+    handleValidationErrors(trip.validationError, 'top');
     return;
   }
 
@@ -222,7 +226,7 @@ const addTripHandler = function(event) {
       // remove the trip if it was not saved
       // tripList.remove(model);
 
-      handleValidationErrors(response.responseJSON["errors"]);
+      handleValidationErrors(response.responseJSON["resErrors"], 'top');
     },
   }) // book.save
 } // addTripHandler
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index fcc37fc..6213b8e 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -7,6 +7,13 @@ const Reservation = Backbone.Model.extend({
   urlRoot() {
     return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('trip_id')}/reservations`
   }, // urlRoot
+  validate(attributes) {
+    const resErrors = {};
+
+    if (!attributes.name) {
+      resErrors.name = ['cannot be blank']
+    }
+  } // attributes
 });
 
 export default Reservation

From 484fecd88ca09ee8703bb729cec1fabb6bd1e6cd Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 16:22:48 -0800
Subject: [PATCH 35/41] client side validations work for the reservation now,
 and the error messages go to the right place

---
 src/app.js                    |  9 ++++++++-
 src/app/models/reservation.js | 15 ++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 66f0a8e..47cc423 100644
--- a/src/app.js
+++ b/src/app.js
@@ -42,9 +42,16 @@ const reserveTrip = (event) => {
   }) // forEach
 
   const reservation = new Reservation(resData);
+
   console.log(`reservation`);
   console.log(reservation);
 
+  // display client side validation error messages if the user entered invlalid input and break out of the function before you make the api request to post the reservation 
+  if (!reservation.isValid()) {
+    handleValidationErrors(reservation.validationError, 'form');
+    return;
+  } // if isVALID
+
   reservation.save({}, {
     success: (model, response) => {
       console.log('successfully saved the reservation');
@@ -55,7 +62,6 @@ const reserveTrip = (event) => {
       console.log(response);
       console.log(response.responseJSON["errors"]);
 
-      // QUESTION: why isn't handleValidationErrors defined in this scope? Might work now
       handleValidationErrors(response.responseJSON["errors"], 'form');
     }, // error
   }) // save
@@ -181,6 +187,7 @@ let readFormData = function readFormData() {
 
 // function to display validation failure error message
 const handleValidationErrors = function handleValidationErrors(errors, nextFunction) {
+  console.log('in handleValidationErrors');
   for (let field in errors) {
     if (nextFunction === 'top') {
       for (let problem of errors[field]) {
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index 6213b8e..daeed84 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -13,7 +13,20 @@ const Reservation = Backbone.Model.extend({
     if (!attributes.name) {
       resErrors.name = ['cannot be blank']
     }
-  } // attributes
+
+    if (!attributes.age) {
+      resErrors.age = ['cannot be blank']
+    }
+
+    if (!attributes.email) {
+      resErrors.email = ['cannot be blank']
+    }
+
+    if (Object.keys(resErrors).length < 1) {
+      return false;
+    }
+    return resErrors;
+  } // validate
 });
 
 export default Reservation

From 05bd4fa3f1f5ed8ae7659d1e91cdec9a13ef6e2c Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 16:27:15 -0800
Subject: [PATCH 36/41] done with adding trip functionality for now

---
 src/app.js             | 3 ++-
 src/app/models/trip.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app.js b/src/app.js
index 47cc423..515237b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -46,7 +46,7 @@ const reserveTrip = (event) => {
   console.log(`reservation`);
   console.log(reservation);
 
-  // display client side validation error messages if the user entered invlalid input and break out of the function before you make the api request to post the reservation 
+  // display client side validation error messages if the user entered invlalid input and break out of the function before you make the api request to post the reservation
   if (!reservation.isValid()) {
     handleValidationErrors(reservation.validationError, 'form');
     return;
@@ -213,6 +213,7 @@ const addTripHandler = function(event) {
 
   // break out of the function if the trip is not valid
   if (!trip.isValid()) {
+    console.log('in if for !trip.isValid');
     handleValidationErrors(trip.validationError, 'top');
     return;
   }
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 756d554..cec838e 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -2,7 +2,7 @@ import Backbone from 'backbone'
 
 const Trip = Backbone.Model.extend({
   // NOTE: if I put this url is then the fetch() doesn't work to get the trip details, but it makes it so the 'update' action isn't run when I add a trip to tripList right before I save a new trip ...
-  // use urlRoot instead 
+  // use urlRoot instead
   // url: 'https://ada-backtrek-api.herokuapp.com/trips',
   validate(attributes) {
     const errors = {};

From 2aacfebc2e3dfa3a6257f401a715eeb1fbd2f829 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 16:30:37 -0800
Subject: [PATCH 37/41] fixed Trip so client side validations are now returned
 to be displayed to the page

---
 src/app/models/trip.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index cec838e..e8a99f1 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -30,6 +30,11 @@ const Trip = Backbone.Model.extend({
     if (!attributes.cost) {
       errors.cost = ['cannot be blank'];
     }
+
+    if (Object.keys(errors).length < 1) {
+      return false;
+    }
+    return errors;
   } // validate
 });
 

From c2d71b960bd2db892d7d287721ed536c560bb543 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 16:45:25 -0800
Subject: [PATCH 38/41] added url to Trip model, but I didn't need it anymore
 because adding client side validations fixed the problem of adding an invalid
 Trip

---
 src/app/collections/trip_list.js | 2 +-
 src/app/models/trip.js           | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index 2b06a2e..a48cef3 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -4,7 +4,7 @@ import Trip from '../models/trip';
 const TripList = Backbone.Collection.extend({
   model: Trip,
   url: 'https://ada-backtrek-api.herokuapp.com/trips',
-  // default comparator so it sorts by name to start off 
+  // default comparator so it sorts by name to start off
   comparator: name,
 });
 
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index e8a99f1..b64ee06 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,9 +1,8 @@
 import Backbone from 'backbone'
 
 const Trip = Backbone.Model.extend({
-  // NOTE: if I put this url is then the fetch() doesn't work to get the trip details, but it makes it so the 'update' action isn't run when I add a trip to tripList right before I save a new trip ...
-  // use urlRoot instead
-  // url: 'https://ada-backtrek-api.herokuapp.com/trips',
+
+  urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
   validate(attributes) {
     const errors = {};
 

From c891fefddb11369fe9ae474dbab21409bea07790 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 17:01:42 -0800
Subject: [PATCH 39/41] table is sorted when a th is clicked on

---
 src/app.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/app.js b/src/app.js
index 515237b..85bedf4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -292,6 +292,9 @@ $(document).ready(() => {
   // when we update tripList we will rerender the page
   tripList.on('update', render)
 
+  // trigger render when the table is sorted
+  tripList.on('sort', render);
+
   // click event to add a trip
   // keeping this all in the .ready for now so it is easier to refactor to add a modal later
   $('#add-trip').on('click', () => {
@@ -312,4 +315,21 @@ $(document).ready(() => {
 
   // click event to clear status messages
   $('#status-messages button.clear').on('click', clearStatus);
+
+  // click handler to sort the table when one of the th is clicked on
+  TRIP_FIELDS.forEach((field) => {
+    // find th with the class sort and the field
+    const headerElement = $(`th.sort.${field}`);
+
+    //add a click event to each th
+    headerElement.on('click', (event) => {
+       console.log(`Sorting table by ${ field }`);
+
+       // change the comparator and then call sort
+       // sort will trigger render 
+       tripList.comparator = field;
+       tripList.sort();
+    });
+  }) // forEach
+
 }); // .ready

From 12b8c9be3bef9feb2ccd42ebf9affd3435be3f43 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 20:16:41 -0800
Subject: [PATCH 40/41] added css to change th when you sort by th

---
 src/app.js        | 16 +++++++++++-----
 src/css/style.css |  5 +++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/app.js b/src/app.js
index 85bedf4..475aa26 100644
--- a/src/app.js
+++ b/src/app.js
@@ -144,6 +144,12 @@ const render = function render(tripList) {
     // append the tr with HTML for each trip to the tbody
     tripListElement.append($(tripHTML));
   }) // forEach
+
+  // remove the css styling for the previously sorted th
+  $('th.sort').removeClass('current-sort-field');
+
+  // add css styling to the newly softed th
+  $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
 } // render
 
 // function to show all the trips when the 'Explore our trips' button is clicked
@@ -323,12 +329,12 @@ $(document).ready(() => {
 
     //add a click event to each th
     headerElement.on('click', (event) => {
-       console.log(`Sorting table by ${ field }`);
+      console.log(`Sorting table by ${ field }`);
 
-       // change the comparator and then call sort
-       // sort will trigger render 
-       tripList.comparator = field;
-       tripList.sort();
+      // change the comparator and then call sort
+      // sort will trigger render
+      tripList.comparator = field;
+      tripList.sort();
     });
   }) // forEach
 
diff --git a/src/css/style.css b/src/css/style.css
index 66aef21..d330714 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,8 @@
+/* style for sorted th */ 
+.current-sort-field {
+  background-color: darkgrey;
+  color: white;
+}
 
 /* Styles for error section at the top */
 #status-messages {

From 32448b536310a057dff9130137404139c9c279d4 Mon Sep 17 00:00:00 2001
From: Tamira Vojnar <tamiravojnar@gmail.com>
Date: Thu, 30 Nov 2017 20:47:30 -0800
Subject: [PATCH 41/41] add form to filter trips

---
 dist/index.html | 73 +++++++++++++++++++++++++++++++------------------
 1 file changed, 47 insertions(+), 26 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 82da088..e542afe 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,35 +11,56 @@ <h1>BackTREK</h1>
     <button id="add-trip" class="button">Add a trip</button>
   </header>
   <main>
-    <section id="status-messages">
-    <button class="clear float-right">
-      <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
-    </button>
-    <ul>
-    </ul>
-  </section>
-  <section id="place-for-form"></section>
+    <div class="row">
 
-  <section id="start-background">
-    <button id="get-trips" class="button">Explore our trips!</button>
-  </section>
 
-  <section id="main-page" class="row">
-    <table id="trip-table">
-      <thead>
-        <th class="sort name">Name</th>
-        <th class="sort continent">Continent</th>
-        <th class="sort category">Category</th>
-        <th class="sort weeks">Weeks</th>
-        <th class="sort cost">Cost</th>
-      </thead>
-      <tbody id="trip-list">
+      <div id="filter container" class="large-3 column">
+        <form id="trip-filter-form">
+          <select name="category">
+            <option style="display:none;" selected>Filter trips by</option>
+            <option value="name">Trip Name</option>
+            <option value="continent">Continent</option>
+            <option value="category">Category</option>
+            <option value="continent">Duration</option>
+            <option value="cost">Cost</option>
+          </select>
+
+          <input type="text"/>
+
+          <input type="submit" class="button" />
+
+        </form>
+      </div>
+    </div>
+    <section id="status-messages">
+      <button class="clear float-right">
+        <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
+      </button>
+      <ul>
+      </ul>
+    </section>
+    <section id="place-for-form"></section>
+
+    <section id="start-background">
+      <button id="get-trips" class="button">Explore our trips!</button>
+    </section>
+
+    <section id="main-page" class="row">
+      <table id="trip-table">
+        <thead>
+          <th class="sort name">Name</th>
+          <th class="sort continent">Continent</th>
+          <th class="sort category">Category</th>
+          <th class="sort weeks">Weeks</th>
+          <th class="sort cost">Cost</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
       </tbody>
-    </tbody>
-  </table>
-  <article id="trip-details">
-  </article>
-</section>
+    </table>
+    <article id="trip-details">
+    </article>
+  </section>
 
 </main>
 <footer>
