From 8af0d2770348014442030210606d8efac7e1dd6b Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Tue, 28 Nov 2017 14:57:03 -0800
Subject: [PATCH 01/37] add underscore template

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

diff --git a/dist/index.html b/dist/index.html
index b873b1e..d14dbc5 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,6 +15,26 @@
   <footer>
 
   </footer>
+
+  <script type="text/template" id="trip-template">
+    <tr class="trip">
+      <td>
+        <%- name %>
+      </td>
+      <td>
+        <%- continent %>
+      </td>
+      <td>
+        <%- category %>
+      </td>
+      <td>
+        <%- weeks %>
+      </td>
+      <td>
+        <%- cost %>
+      </td>
+    </tr>
+  </script>
   <script src="app.bundle.js" type="text/javascript"></script>
 </body>
 </html>

From dcaa74821db5773d156c43842f89126cfb900750 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Tue, 28 Nov 2017 15:06:45 -0800
Subject: [PATCH 02/37] add trip model

---
 src/app/models/trip.js | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/app/models/trip.js

diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..c67a37a
--- /dev/null
+++ b/src/app/models/trip.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone'
+
+const Trip = Backbone.Model.extend({
+
+});
+
+export default Trip;

From 83bf6d5f3d70bf2b62fa5898e01048bdacf88763 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Tue, 28 Nov 2017 15:14:09 -0800
Subject: [PATCH 03/37] add trips api to collection

---
 dist/index.html                  |  1 +
 src/app/collections/trip_list.js | 12 ++++++++++++
 2 files changed, 13 insertions(+)
 create mode 100644 src/app/collections/trip_list.js

diff --git a/dist/index.html b/dist/index.html
index d14dbc5..d2deaff 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -35,6 +35,7 @@
       </td>
     </tr>
   </script>
+
   <script src="app.bundle.js" type="text/javascript"></script>
 </body>
 </html>
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..de58a11
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,12 @@
+import Backbone from 'backbone'
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+  parse: function(response) {
+    return response['trips'];
+  }
+});
+
+export default TripList;

From 9fd5d5b7977deca52c9d3d31ed9f7148c2f4bc5c Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Tue, 28 Nov 2017 15:36:14 -0800
Subject: [PATCH 04/37] set up app.js

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

diff --git a/dist/index.html b/dist/index.html
index d2deaff..2aa6c51 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,7 +10,7 @@
 
   </header>
   <main>
-
+    <a href="#">see trips</a>
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index e7af594..52082fa 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,8 +6,14 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
+import TripList from 'app/collections/trip_list';
+
+const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
+
+const tripList = new TripList();
+
 console.log('it loaded!');
 
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+  // $('main').html('<h1>Hello World!</h1>');
 });

From a162f8220e11b4e2d905c45f9e47658d83db3cc1 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Tue, 28 Nov 2017 15:42:27 -0800
Subject: [PATCH 05/37] add table =

---
 dist/index.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/dist/index.html b/dist/index.html
index 2aa6c51..60ea509 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,6 +12,22 @@
   <main>
     <a href="#">see trips</a>
   </main>
+
+  <section>
+    <h2>Trips</h2>
+
+    <table>
+      <thead>
+        <th class="name">name</th>
+        <th class="continent">continent</th>
+        <th class="category">category</th>
+        <th class="weeks">weeks</th>
+        <th class="weeks">weeks</th>
+      </thead>
+      <tbody id="trip-list">
+      </tbody>
+    </table>
+  </section>
   <footer>
 
   </footer>

From 7bcc69e72b3808f47981c9a2b4f9d2bdc74e4fae Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Tue, 28 Nov 2017 17:01:12 -0800
Subject: [PATCH 06/37] add functionality to display trips

---
 dist/index.html                  |  2 +-
 src/app.js                       | 36 +++++++++++++++++++++++++++++++-
 src/app/collections/trip_list.js |  5 ++++-
 3 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 60ea509..c4b4704 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -22,7 +22,7 @@ <h2>Trips</h2>
         <th class="continent">continent</th>
         <th class="category">category</th>
         <th class="weeks">weeks</th>
-        <th class="weeks">weeks</th>
+        <th class="cost">cost</th>
       </thead>
       <tbody id="trip-list">
       </tbody>
diff --git a/src/app.js b/src/app.js
index 52082fa..191c149 100644
--- a/src/app.js
+++ b/src/app.js
@@ -12,8 +12,42 @@ const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
 const tripList = new TripList();
 
-console.log('it loaded!');
+let tripTemplate;
+
+const render = function render(list) {
+  const tripTableElement = $('#trip-list');
+  tripTableElement.html('');
+  console.log(`tripList :${list}`);
+  list.forEach((trip) => {
+    const generatedHTML = tripTemplate(trip.attributes);
+    tripTableElement.append(generatedHTML);
+  });
+
+
+};
 
 $(document).ready( () => {
   // $('main').html('<h1>Hello World!</h1>');
+  tripTemplate = _.template($('#trip-template').html());
+
+  console.log(`About to fetch data from ${ tripList.url }`);
+
+
+
+  tripList.on('update', render, tripList);
+
+  tripList.fetch({
+    success: function(list, resp) {
+      console.log('worked');
+      console.log(list);
+
+    },
+    error: function() {
+      console.log('error');
+    }
+  });
+  console.log(`fetched`);
+
+  // render(tripList);
+  console.log(tripList);
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index de58a11..a1e9773 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -5,8 +5,11 @@ const TripList = Backbone.Collection.extend({
   model: Trip,
   url: 'https://ada-backtrek-api.herokuapp.com/trips',
   parse: function(response) {
-    return response['trips'];
+    // it works!
+    console.log('in parse', response);
+    return response;
   }
 });
 
+
 export default TripList;

From a622920807b3904f1dfa9e7b7667affe98969092 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Wed, 29 Nov 2017 14:24:50 -0800
Subject: [PATCH 07/37] add on click event

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

diff --git a/dist/index.html b/dist/index.html
index c4b4704..c28f521 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,7 +10,7 @@
 
   </header>
   <main>
-    <a href="#">see trips</a>
+    <a href="#" id="trips">see trips</a>
   </main>
 
   <section>
diff --git a/src/app.js b/src/app.js
index 191c149..defbcfa 100644
--- a/src/app.js
+++ b/src/app.js
@@ -8,7 +8,7 @@ import './css/style.css';
 
 import TripList from 'app/collections/trip_list';
 
-const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
+// const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
 const tripList = new TripList();
 
@@ -32,9 +32,7 @@ $(document).ready( () => {
 
   console.log(`About to fetch data from ${ tripList.url }`);
 
-
-
-  tripList.on('update', render, tripList);
+  // tripList.on('update', render, tripList);
 
   tripList.fetch({
     success: function(list, resp) {
@@ -46,8 +44,9 @@ $(document).ready( () => {
       console.log('error');
     }
   });
-  console.log(`fetched`);
 
-  // render(tripList);
-  console.log(tripList);
+  $('#trips').on('click', (event) => {
+    console.log('CLICKED!');
+    render(tripList);
+  })
 });

From 51132eb274c29153fba75a3278d550776f732441 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Thu, 30 Nov 2017 16:55:09 -0800
Subject: [PATCH 08/37] add template for indivdual trip view

---
 dist/index.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/dist/index.html b/dist/index.html
index c28f521..71093a2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -16,6 +16,7 @@
   <section>
     <h2>Trips</h2>
 
+    <div id="trip"></div>
     <table>
       <thead>
         <th class="name">name</th>
@@ -32,7 +33,18 @@ <h2>Trips</h2>
 
   </footer>
 
+
   <script type="text/template" id="trip-template">
+    <div class="indTrip">
+      <h4><%- name %></h4>
+      <p><%- continent %></p>
+      <p><%- category %></p>
+      <p><%- weeks %></p>
+      <p><%- cost %></p>
+    </div>
+  </script>
+
+  <script type="text/template" id="list-template">
     <tr class="trip">
       <td>
         <%- name %>

From c5506bb575ffd95f37008e2a46cb678dc2cf1339 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Thu, 30 Nov 2017 21:05:58 -0800
Subject: [PATCH 09/37] add urlRoot and toString override

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

diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index c67a37a..6019d1b 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,6 +1,13 @@
 import Backbone from 'backbone'
 
 const Trip = Backbone.Model.extend({
+  urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
+  // urlRoot() {
+  //   return `https://ada-backtrek-api.herokuapp.com/trips/${ this.get('tripId') }/reservations`;
+  // },
+  toString() {
+    return `<Trip ${ this.get('name') }>`;
+  },
 
 });
 

From 0c1e94b6e3639d974d2f8eaff6c848982bc7330e Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 10:14:51 -0800
Subject: [PATCH 10/37] update selector names

---
 dist/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 71093a2..ce430d6 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -35,7 +35,7 @@ <h2>Trips</h2>
 
 
   <script type="text/template" id="trip-template">
-    <div class="indTrip">
+    <div id="ind-trip">
       <h4><%- name %></h4>
       <p><%- continent %></p>
       <p><%- category %></p>
@@ -46,7 +46,7 @@ <h4><%- name %></h4>
 
   <script type="text/template" id="list-template">
     <tr class="trip">
-      <td>
+      <td id="trip-name">
         <%- name %>
       </td>
       <td>

From 3f828b420964cf1aa51b53c7bb2737accb39439a Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 10:16:14 -0800
Subject: [PATCH 11/37] whitespace

---
 src/app/collections/trip_list.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index a1e9773..3efdde7 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -5,8 +5,6 @@ const TripList = Backbone.Collection.extend({
   model: Trip,
   url: 'https://ada-backtrek-api.herokuapp.com/trips',
   parse: function(response) {
-    // it works!
-    console.log('in parse', response);
     return response;
   }
 });

From 8ad54c6134a488a7f7cfe8715d55b5ce0a6c6503 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 10:18:43 -0800
Subject: [PATCH 12/37] add renderTrip function

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

diff --git a/src/app.js b/src/app.js
index defbcfa..029dcb3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,27 +7,48 @@ import './css/foundation.css';
 import './css/style.css';
 
 import TripList from 'app/collections/trip_list';
+import Trip from 'app/models/trip'
 
 // const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
 const tripList = new TripList();
+const adventure = new Trip();
+console.log(`trip trip ${adventure}`);
 
-let tripTemplate;
+let listTemplate;
 
-const render = function render(list) {
+const renderTrips = function render(list) {
   const tripTableElement = $('#trip-list');
   tripTableElement.html('');
   console.log(`tripList :${list}`);
   list.forEach((trip) => {
-    const generatedHTML = tripTemplate(trip.attributes);
+    const generatedHTML = listTemplate(trip.attributes);
+    // console.log(trip.toString());
     tripTableElement.append(generatedHTML);
   });
+};
 
+let tripTemplate;
+
+const renderTrip = function renderTrip(trip) {
+  const tripElement = $('#trip');
+  // clears html in tripElement
+  tripElement.html('');
+  const generatedHTML = tripTemplate(
+    {name: "name",
+    continent: "continent",
+    weeks: "weeks",
+    cost: "cost",
+    category: "name",
+});
+  tripElement.append(generatedHTML);
+}
 
-};
 
 $(document).ready( () => {
-  // $('main').html('<h1>Hello World!</h1>');
+  // compile underscore list-template
+  listTemplate = _.template($('#list-template').html());
+
   tripTemplate = _.template($('#trip-template').html());
 
   console.log(`About to fetch data from ${ tripList.url }`);
@@ -36,8 +57,8 @@ $(document).ready( () => {
 
   tripList.fetch({
     success: function(list, resp) {
-      console.log('worked');
-      console.log(list);
+      // console.log('worked');
+      // console.log(list);
 
     },
     error: function() {
@@ -45,8 +66,22 @@ $(document).ready( () => {
     }
   });
 
+  console.log(`log trip url : ${trip.url}`);
+   // call .fetch on an instance of a trip
+   // passing the trip into click event function closure thing
+
   $('#trips').on('click', (event) => {
-    console.log('CLICKED!');
-    render(tripList);
-  })
+    renderTrips(tripList);
+
+    $('#trip-name').on('click', (event) => {
+      // grab backbone object and pass into function
+      renderTrip(adventure);
+    })
+
+  });
+
+  // $('td').on('click', 'th', function (){
+  //   console.log(`clicked! the trip name`);
+  // })
+
 });

From ff5e9c58b11c55c805063d335f5e463904eb1d9d Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 15:04:22 -0800
Subject: [PATCH 13/37] fix typo

---
 src/app/collections/trip_list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index 3efdde7..a223225 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -6,7 +6,7 @@ const TripList = Backbone.Collection.extend({
   url: 'https://ada-backtrek-api.herokuapp.com/trips',
   parse: function(response) {
     return response;
-  }
+  }, 
 });
 
 

From f1de288abe81c0edcbcabb7a9650fc2ee2876b82 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 15:15:00 -0800
Subject: [PATCH 14/37] update toString override

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

diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 6019d1b..e09f7a9 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -3,10 +3,10 @@ import Backbone from 'backbone'
 const Trip = Backbone.Model.extend({
   urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
   // urlRoot() {
-  //   return `https://ada-backtrek-api.herokuapp.com/trips/${ this.get('tripId') }/reservations`;
+  //   return `https://ada-backtrek-api.herokuapp.com/trips/${ this.get('tripId') }`;
   // },
   toString() {
-    return `<Trip ${ this.get('name') }>`;
+    return `<Trip name:${this.get("name")},continent:${this.get("continent")}, weeks:${this.get("weeks")}, cost:${this.get("cost")} >`;
   },
 
 });

From 50714128b178e6d2eb2bccc90bb9b3956abcf132 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 15:15:53 -0800
Subject: [PATCH 15/37] add trip event handler to renderTrips function

---
 src/app.js | 72 +++++++++++++++++++-----------------------------------
 1 file changed, 25 insertions(+), 47 deletions(-)

diff --git a/src/app.js b/src/app.js
index 029dcb3..5284465 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,81 +7,59 @@ import './css/foundation.css';
 import './css/style.css';
 
 import TripList from 'app/collections/trip_list';
-import Trip from 'app/models/trip'
 
 // const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
 const tripList = new TripList();
-const adventure = new Trip();
-console.log(`trip trip ${adventure}`);
 
+// initalize templates
 let listTemplate;
+let tripTemplate;
 
-const renderTrips = function render(list) {
+const renderTrips = function renderTrips(list) {
   const tripTableElement = $('#trip-list');
   tripTableElement.html('');
   console.log(`tripList :${list}`);
   list.forEach((trip) => {
-    const generatedHTML = listTemplate(trip.attributes);
-    // console.log(trip.toString());
+    const generatedHTML = $(listTemplate(trip.attributes));
+    // adding event handler here gives context as to which trip needs to be clicked
+    generatedHTML.on('click', (event) => {
+      // grab backbone object and pass into function
+      renderTrip(trip);
+    })
     tripTableElement.append(generatedHTML);
   });
 };
 
-let tripTemplate;
-
 const renderTrip = function renderTrip(trip) {
+  console.log(`trip: ${trip}`);
   const tripElement = $('#trip');
   // clears html in tripElement
   tripElement.html('');
-  const generatedHTML = tripTemplate(
-    {name: "name",
-    continent: "continent",
-    weeks: "weeks",
-    cost: "cost",
-    category: "name",
-});
+  const generatedHTML = tripTemplate(trip.attributes);
   tripElement.append(generatedHTML);
 }
 
-
 $(document).ready( () => {
-  // compile underscore list-template
+  // compile underscore templates
   listTemplate = _.template($('#list-template').html());
-
   tripTemplate = _.template($('#trip-template').html());
 
-  console.log(`About to fetch data from ${ tripList.url }`);
+  tripList.fetch();
 
-  // tripList.on('update', render, tripList);
-
-  tripList.fetch({
-    success: function(list, resp) {
-      // console.log('worked');
-      // console.log(list);
-
-    },
-    error: function() {
-      console.log('error');
-    }
-  });
-
-  console.log(`log trip url : ${trip.url}`);
-   // call .fetch on an instance of a trip
-   // passing the trip into click event function closure thing
+  // tripList.fetch({
+  //   success: function(list, resp) {
+  //     // console.log('worked');
+  //     // console.log(list);
+  //
+  //   },
+  //   error: function() {
+  //     console.log('error');
+  //   }
+  // });
 
   $('#trips').on('click', (event) => {
     renderTrips(tripList);
+  }); // end tripsList event handler
 
-    $('#trip-name').on('click', (event) => {
-      // grab backbone object and pass into function
-      renderTrip(adventure);
-    })
-
-  });
-
-  // $('td').on('click', 'th', function (){
-  //   console.log(`clicked! the trip name`);
-  // })
-
-});
+}); // end doc.ready

From 3ae45d6386c7b1608d266ed8861a4b2b658c6462 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 15:17:17 -0800
Subject: [PATCH 16/37] add about attribute to undersroce template

---
 dist/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/dist/index.html b/dist/index.html
index ce430d6..0786806 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -41,6 +41,7 @@ <h4><%- name %></h4>
       <p><%- category %></p>
       <p><%- weeks %></p>
       <p><%- cost %></p>
+      <p><%- about %></p>
     </div>
   </script>
 

From 3e12509ceb2e4d9cc271107a06a429617afda324 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 17:01:28 -0800
Subject: [PATCH 17/37] update urlRoot

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

diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index e09f7a9..dd79eb1 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -3,10 +3,10 @@ import Backbone from 'backbone'
 const Trip = Backbone.Model.extend({
   urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
   // urlRoot() {
-  //   return `https://ada-backtrek-api.herokuapp.com/trips/${ this.get('tripId') }`;
+  //   return `https://ada-backtrek-api.herokuapp.com/trips/${ this.get('id') }`;
   // },
   toString() {
-    return `<Trip name:${this.get("name")},continent:${this.get("continent")}, weeks:${this.get("weeks")}, cost:${this.get("cost")} >`;
+    return `<Trip id:${this.get("id")},name:${this.get("name")},continent:${this.get("continent")}, weeks:${this.get("weeks")}, cost:${this.get("cost")}, about:${this.get("about")}  >`;
   },
 
 });

From 9fbade4e97e016822bea2f66f5e1e07c71f3ab87 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 17:05:24 -0800
Subject: [PATCH 18/37] fetch trip details from within trips loop

---
 src/app.js | 96 ++++++++++++++++++++++++++++++++----------------------
 1 file changed, 57 insertions(+), 39 deletions(-)

diff --git a/src/app.js b/src/app.js
index 5284465..5e853fd 100644
--- a/src/app.js
+++ b/src/app.js
@@ -7,11 +7,12 @@ import './css/foundation.css';
 import './css/style.css';
 
 import TripList from 'app/collections/trip_list';
+import Trip from 'app/models/trip';
+
 
 // const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
 const tripList = new TripList();
-
 // initalize templates
 let listTemplate;
 let tripTemplate;
@@ -24,42 +25,59 @@ const renderTrips = function renderTrips(list) {
     const generatedHTML = $(listTemplate(trip.attributes));
     // adding event handler here gives context as to which trip needs to be clicked
     generatedHTML.on('click', (event) => {
+      const tripDetails = new Trip({id: trip.get('id')})
       // grab backbone object and pass into function
-      renderTrip(trip);
-    })
-    tripTableElement.append(generatedHTML);
-  });
-};
-
-const renderTrip = function renderTrip(trip) {
-  console.log(`trip: ${trip}`);
-  const tripElement = $('#trip');
-  // clears html in tripElement
-  tripElement.html('');
-  const generatedHTML = tripTemplate(trip.attributes);
-  tripElement.append(generatedHTML);
-}
-
-$(document).ready( () => {
-  // compile underscore templates
-  listTemplate = _.template($('#list-template').html());
-  tripTemplate = _.template($('#trip-template').html());
-
-  tripList.fetch();
-
-  // tripList.fetch({
-  //   success: function(list, resp) {
-  //     // console.log('worked');
-  //     // console.log(list);
-  //
-  //   },
-  //   error: function() {
-  //     console.log('error');
-  //   }
-  // });
-
-  $('#trips').on('click', (event) => {
-    renderTrips(tripList);
-  }); // end tripsList event handler
-
-}); // end doc.ready
+
+      tripDetails.fetch(
+        {
+          success: function(trip) {
+            console.log('worked');
+            renderTrip(trip);
+
+          },
+          error: function(message, b) {
+            console.log(message, b);
+          }
+        }); // end of fetch
+
+      })
+      tripTableElement.append(generatedHTML);
+    });
+  };
+
+  const renderTrip = function renderTrip(trip) {
+    const tripElement = $('#trip');
+    // clears html in tripElement
+    tripElement.html('');
+    const generatedHTML = tripTemplate(trip.attributes);
+    tripElement.append(generatedHTML);
+
+    // $.get(url, function(response) {
+    //     $(`#trip-template`).html(tripTemplate(response));
+    //   })
+  }
+
+  $(document).ready( () => {
+    // compile underscore templates
+    listTemplate = _.template($('#list-template').html());
+    tripTemplate = _.template($('#trip-template').html());
+
+    tripList.fetch();
+
+
+    // tripList.fetch({
+    //   success: function(list, resp) {
+    //     // console.log('worked');
+    //     // console.log(list);
+    //
+    //   },
+    //   error: function() {
+    //     console.log('error');
+    //   }
+    // });
+
+    $('#trips').on('click', (event) => {
+      renderTrips(tripList);
+    }); // end tripsList event handler
+
+  }); // end doc.ready

From 656417319b93bdfcf6260c70f1d5e70c72685348 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Fri, 1 Dec 2017 17:25:21 -0800
Subject: [PATCH 19/37] add form

---
 dist/index.html | 58 +++++++++++++++++++++++++++++++++++--------------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 0786806..11bc335 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,24 +11,50 @@
   </header>
   <main>
     <a href="#" id="trips">see trips</a>
+    <aside id="trip"></aside>
+
+    <section class="columns large-4 small-12">
+      <h2>Add a Trip</h2>
+      <form id="add-trip-form">
+        <label for="name">Title</label>
+        <input type="text" name="name"></input>
+
+        <label for="continent">Author</label>
+        <input type="text" name="continent"></input>
+
+        <label for="category">Published</label>
+        <input type="text" name="category"></input>
+
+        <label for="weeks">Published</label>
+        <input type="number" name="weeks"></input>
+
+        <label for="cost">Published</label>
+        <input type="text" name="cost"></input>
+
+        <label for="about">Published</label>
+        <input type="text" name="about"></input>
+
+        <input type="submit" value="Trip it!" class="button"></input>
+      </form>
+    </section>
+
+
+    <section>
+      <table>
+        <thead>
+          <th class="name">name</th>
+          <th class="continent">continent</th>
+          <th class="category">category</th>
+          <th class="weeks">weeks</th>
+          <th class="cost">cost</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
+
   </main>
 
-  <section>
-    <h2>Trips</h2>
-
-    <div id="trip"></div>
-    <table>
-      <thead>
-        <th class="name">name</th>
-        <th class="continent">continent</th>
-        <th class="category">category</th>
-        <th class="weeks">weeks</th>
-        <th class="cost">cost</th>
-      </thead>
-      <tbody id="trip-list">
-      </tbody>
-    </table>
-  </section>
   <footer>
 
   </footer>

From a058ee69e7254ea652e14ebddd112f504d54a2f9 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 09:28:47 -0800
Subject: [PATCH 20/37] update form

---
 dist/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 11bc335..8257ecb 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -16,22 +16,22 @@
     <section class="columns large-4 small-12">
       <h2>Add a Trip</h2>
       <form id="add-trip-form">
-        <label for="name">Title</label>
+        <label for="name">Name</label>
         <input type="text" name="name"></input>
 
-        <label for="continent">Author</label>
+        <label for="continent">Continent</label>
         <input type="text" name="continent"></input>
 
-        <label for="category">Published</label>
+        <label for="category">Category</label>
         <input type="text" name="category"></input>
 
-        <label for="weeks">Published</label>
+        <label for="weeks">Weeks</label>
         <input type="number" name="weeks"></input>
 
-        <label for="cost">Published</label>
+        <label for="cost">Cost</label>
         <input type="text" name="cost"></input>
 
-        <label for="about">Published</label>
+        <label for="about">About</label>
         <input type="text" name="about"></input>
 
         <input type="submit" value="Trip it!" class="button"></input>

From 67c2362dc18839b9114a685c9d94833f8d833868 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 12:24:46 -0800
Subject: [PATCH 21/37] add functions to read and save form data

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

diff --git a/src/app.js b/src/app.js
index 5e853fd..279d7e2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -10,7 +10,7 @@ import TripList from 'app/collections/trip_list';
 import Trip from 'app/models/trip';
 
 
-// const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
+const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
 const tripList = new TripList();
 // initalize templates
@@ -57,6 +57,42 @@ const renderTrips = function renderTrips(list) {
     //   })
   }
 
+  const readFormData = function readFormData() {
+    const tripData = {};
+
+    TRIP_FIELDS.forEach((field) => {
+
+      const inputElement = $(`#add-trip-form input[name="${field}"]`);
+      const value = inputElement.val();
+
+      if (value != '') {
+        tripData[field] = value;
+      }
+      inputElement.val('');
+    });
+    console.log("reading trip data");
+    console.log(tripData);
+    return tripData;
+  };
+
+  const addTripHandler = function(event) {
+    event.preventDefault();
+
+    const trip = new Trip(readFormData());
+
+    tripList.add(trip);
+
+    trip.save({}, {
+      success: (model, response) => {
+        console.log('successfully saved trip');
+      },
+      error: (model, response) => {
+        console.log('failed to save trip');
+        console.log(response);
+      }
+    });
+  };
+
   $(document).ready( () => {
     // compile underscore templates
     listTemplate = _.template($('#list-template').html());
@@ -80,4 +116,6 @@ const renderTrips = function renderTrips(list) {
       renderTrips(tripList);
     }); // end tripsList event handler
 
+    $('#add-trip-form').on('submit', addTripHandler);
+
   }); // end doc.ready

From d7fe793b09450d0a7ac021927da9523d6ac03305 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 12:26:19 -0800
Subject: [PATCH 22/37] remove comments

---
 src/app.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app.js b/src/app.js
index 279d7e2..baeb0f3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -52,9 +52,6 @@ const renderTrips = function renderTrips(list) {
     const generatedHTML = tripTemplate(trip.attributes);
     tripElement.append(generatedHTML);
 
-    // $.get(url, function(response) {
-    //     $(`#trip-template`).html(tripTemplate(response));
-    //   })
   }
 
   const readFormData = function readFormData() {

From e2a350f94c2b2b2030d6378950db87cec9bde76a Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 12:35:01 -0800
Subject: [PATCH 23/37] add functionality to remove trip from list if it does
 not save

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

diff --git a/src/app.js b/src/app.js
index baeb0f3..23ff8cd 100644
--- a/src/app.js
+++ b/src/app.js
@@ -86,6 +86,8 @@ const renderTrips = function renderTrips(list) {
       error: (model, response) => {
         console.log('failed to save trip');
         console.log(response);
+        // removes from list if fails validations
+        tripList.remove(model);
       }
     });
   };
@@ -97,18 +99,6 @@ const renderTrips = function renderTrips(list) {
 
     tripList.fetch();
 
-
-    // tripList.fetch({
-    //   success: function(list, resp) {
-    //     // console.log('worked');
-    //     // console.log(list);
-    //
-    //   },
-    //   error: function() {
-    //     console.log('error');
-    //   }
-    // });
-
     $('#trips').on('click', (event) => {
       renderTrips(tripList);
     }); // end tripsList event handler

From 36a69f766ad79f73d5840afa25b5e6ac659c182f Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 14:43:05 -0800
Subject: [PATCH 24/37] add reserve link trip-template

---
 dist/index.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/dist/index.html b/dist/index.html
index 8257ecb..5bfc364 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -68,6 +68,8 @@ <h4><%- name %></h4>
       <p><%- weeks %></p>
       <p><%- cost %></p>
       <p><%- about %></p>
+      <a href="#" id="reserve">reserve trip</a>
+
     </div>
   </script>
 

From f6a222e2203676fbbe23792c7425041773a5d147 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 15:07:25 -0800
Subject: [PATCH 25/37] add reserve form template

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

diff --git a/dist/index.html b/dist/index.html
index 5bfc364..cb0622f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -73,6 +73,20 @@ <h4><%- name %></h4>
     </div>
   </script>
 
+  <script type="text/template" id="reserve-template">
+    <div id="reserve-trip">
+      <form id="reserve-trip-form">
+        <label for="name">Name</label>
+        <input type="text" name="name"></input>
+
+        <label for="email">Email</label>
+        <input type="text" name="email"></input>
+
+        <input type="submit" value="Reserve!" class="button"></input>
+      </form>
+    </div>
+  </script>
+
   <script type="text/template" id="list-template">
     <tr class="trip">
       <td id="trip-name">
diff --git a/src/app.js b/src/app.js
index 23ff8cd..47fa301 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,6 +16,7 @@ const tripList = new TripList();
 // initalize templates
 let listTemplate;
 let tripTemplate;
+let reserveTemplate;
 
 const renderTrips = function renderTrips(list) {
   const tripTableElement = $('#trip-list');

From a7aded4336876f3dabc423d93a42f3ea2b8a61fc Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 15:09:15 -0800
Subject: [PATCH 26/37] compile underscore template

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

diff --git a/src/app.js b/src/app.js
index 47fa301..79dd968 100644
--- a/src/app.js
+++ b/src/app.js
@@ -97,6 +97,7 @@ const renderTrips = function renderTrips(list) {
     // compile underscore templates
     listTemplate = _.template($('#list-template').html());
     tripTemplate = _.template($('#trip-template').html());
+    reserveTemplate = _.template($'#reserve-template').html());
 
     tripList.fetch();
 

From bce8b3b19fc21267af6d56833b0849c11e26a13a Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sat, 2 Dec 2017 15:10:08 -0800
Subject: [PATCH 27/37] fix typo

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

diff --git a/src/app.js b/src/app.js
index 79dd968..78ba5fe 100644
--- a/src/app.js
+++ b/src/app.js
@@ -97,7 +97,7 @@ const renderTrips = function renderTrips(list) {
     // compile underscore templates
     listTemplate = _.template($('#list-template').html());
     tripTemplate = _.template($('#trip-template').html());
-    reserveTemplate = _.template($'#reserve-template').html());
+    reserveTemplate = _.template($('#reserve-template').html());
 
     tripList.fetch();
 

From e9e9abc6addff5c7979875307252b27f9cab7f10 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 19:43:23 -0800
Subject: [PATCH 28/37] add functionality to sort by trip fields

---
 dist/index.html                  | 10 +++++-----
 src/app.js                       | 14 ++++++++++++++
 src/app/collections/trip_list.js |  3 ++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index cb0622f..e9a153a 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -42,11 +42,11 @@ <h2>Add a Trip</h2>
     <section>
       <table>
         <thead>
-          <th class="name">name</th>
-          <th class="continent">continent</th>
-          <th class="category">category</th>
-          <th class="weeks">weeks</th>
-          <th class="cost">cost</th>
+          <th class="name sort">name</th>
+          <th class="continent sort">continent</th>
+          <th class="category sort">category</th>
+          <th class="weeks sort">weeks</th>
+          <th class="cost sort">cost</th>
         </thead>
         <tbody id="trip-list">
         </tbody>
diff --git a/src/app.js b/src/app.js
index 78ba5fe..4ad362a 100644
--- a/src/app.js
+++ b/src/app.js
@@ -55,6 +55,9 @@ const renderTrips = function renderTrips(list) {
 
   }
 
+  $('th.sort').removeClass('current-sort-field');
+  $(`th.sort.${tripList.comparator}`).addClass('current-sort-field');
+
   const readFormData = function readFormData() {
     const tripData = {};
 
@@ -99,6 +102,7 @@ const renderTrips = function renderTrips(list) {
     tripTemplate = _.template($('#trip-template').html());
     reserveTemplate = _.template($('#reserve-template').html());
 
+    tripList.on('sort', renderTrips);
     tripList.fetch();
 
     $('#trips').on('click', (event) => {
@@ -107,4 +111,14 @@ const renderTrips = function renderTrips(list) {
 
     $('#add-trip-form').on('submit', addTripHandler);
 
+    TRIP_FIELDS.forEach((field) => {
+      const headerElement = $(`th.sort.${field}`);
+      console.log(headerElement);
+        headerElement.on('click', (event) => {
+          console.log(`sorting table by ${field}`);
+          tripList.comparator = field;
+          tripList.sort();
+        });
+    });
+
   }); // end doc.ready
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index a223225..ee7e18a 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -6,7 +6,8 @@ const TripList = Backbone.Collection.extend({
   url: 'https://ada-backtrek-api.herokuapp.com/trips',
   parse: function(response) {
     return response;
-  }, 
+  },
+  comparator: 'name',
 });
 
 

From 4728d1dd934df87e9bca09f822abbe258be4a346 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 20:59:20 -0800
Subject: [PATCH 29/37] add click handler to renderTrip function

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

diff --git a/dist/index.html b/dist/index.html
index e9a153a..c21326e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,6 +12,7 @@
   <main>
     <a href="#" id="trips">see trips</a>
     <aside id="trip"></aside>
+    <aside id="reserve-form"></aside>
 
     <section class="columns large-4 small-12">
       <h2>Add a Trip</h2>
diff --git a/src/app.js b/src/app.js
index 4ad362a..92092c1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -34,18 +34,24 @@ const renderTrips = function renderTrips(list) {
           success: function(trip) {
             console.log('worked');
             renderTrip(trip);
-
           },
           error: function(message, b) {
             console.log(message, b);
           }
         }); // end of fetch
-
       })
       tripTableElement.append(generatedHTML);
     });
   };
 
+  const renderReserve = function renderReserve() {
+    const reserveForm = $('#reserve-form');
+    reserveForm.html('');
+    const generatedHTML = reserveTemplate();
+    console.log(generatedHTML);
+    reserveForm.append(generatedHTML);
+  }
+
   const renderTrip = function renderTrip(trip) {
     const tripElement = $('#trip');
     // clears html in tripElement
@@ -53,6 +59,9 @@ const renderTrips = function renderTrips(list) {
     const generatedHTML = tripTemplate(trip.attributes);
     tripElement.append(generatedHTML);
 
+    $('#reserve').on('click', (event) => {
+      renderReserve();
+    });
   }
 
   $('th.sort').removeClass('current-sort-field');
@@ -109,11 +118,12 @@ const renderTrips = function renderTrips(list) {
       renderTrips(tripList);
     }); // end tripsList event handler
 
+
+
     $('#add-trip-form').on('submit', addTripHandler);
 
     TRIP_FIELDS.forEach((field) => {
       const headerElement = $(`th.sort.${field}`);
-      console.log(headerElement);
         headerElement.on('click', (event) => {
           console.log(`sorting table by ${field}`);
           tripList.comparator = field;

From bd75324088f90d2adfba8ce277ebcf52c0a6419f Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 21:08:49 -0800
Subject: [PATCH 30/37] add reservation model

---
 src/app/models/reservation.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/app/models/reservation.js

diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
new file mode 100644
index 0000000..b6e8fa4
--- /dev/null
+++ b/src/app/models/reservation.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+  url: function () {
+    return `https://ada-backtrek-api.herokuapp.com/trips/${this.get('id')}/reservations`;
+  }
+});
+
+export default Reservation;

From e73178a44d62d130931df98a23863044e700497e Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 22:35:26 -0800
Subject: [PATCH 31/37] add error handling

---
 dist/index.html   |  9 +++++++--
 src/app.js        | 37 +++++++++++++++++++++++++++++--------
 src/css/style.css |  9 +++++++++
 3 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index c21326e..0322c55 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,14 +7,19 @@
 </head>
 <body>
   <header>
-
+    <h1>backTrek</h1>
+    <h3>going the distance</h3>
   </header>
+  <section id="status-messages">
+        <ul></ul>
+  </section>
   <main>
     <a href="#" id="trips">see trips</a>
+    <a href="#" id="add-trip">add trip</a>
     <aside id="trip"></aside>
     <aside id="reserve-form"></aside>
 
-    <section class="columns large-4 small-12">
+    <section class="add-trip-form columns large-4 small-12">
       <h2>Add a Trip</h2>
       <form id="add-trip-form">
         <label for="name">Name</label>
diff --git a/src/app.js b/src/app.js
index 92092c1..fa56899 100644
--- a/src/app.js
+++ b/src/app.js
@@ -12,6 +12,24 @@ import Trip from 'app/models/trip';
 
 const TRIP_FIELDS = ['name', 'continent', 'category', 'weeks', 'cost'];
 
+// Clear status messages
+const clearStatus = function clearStatus() {
+  $('#status-messages ul').html('');
+  $('#status-messages').hide();
+};
+
+// Add a new status message
+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();
+};
+
 const tripList = new TripList();
 // initalize templates
 let listTemplate;
@@ -85,6 +103,13 @@ const renderTrips = function renderTrips(list) {
     return tripData;
   };
 
+  const outputValidationFailures = function outputValidationFailures() {
+    for (let field in errors) {
+      for (let problem of errors[field]) {
+        reportStatus('error', `${field}: ${problem}`);
+      }
+    }
+  };
   const addTripHandler = function(event) {
     event.preventDefault();
 
@@ -95,13 +120,15 @@ const renderTrips = function renderTrips(list) {
     trip.save({}, {
       success: (model, response) => {
         console.log('successfully saved trip');
+        reportStatus('success', 'Successfully saved trip!');
       },
       error: (model, response) => {
         console.log('failed to save trip');
         console.log(response);
         // removes from list if fails validations
         tripList.remove(model);
-      }
+        outputValidationFailures(response.responseJSON["errors"]);
+      },
     });
   };
 
@@ -114,12 +141,6 @@ const renderTrips = function renderTrips(list) {
     tripList.on('sort', renderTrips);
     tripList.fetch();
 
-    $('#trips').on('click', (event) => {
-      renderTrips(tripList);
-    }); // end tripsList event handler
-
-
-
     $('#add-trip-form').on('submit', addTripHandler);
 
     TRIP_FIELDS.forEach((field) => {
@@ -130,5 +151,5 @@ const renderTrips = function renderTrips(list) {
           tripList.sort();
         });
     });
-
+    $('#status-messages button.clear').on('click', clearStatus);
   }); // end doc.ready
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..7c35e36 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,11 @@
 
 /* Your styles go here! */
+
+/*body {
+  background-image: url(https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1440&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
+
+}
+header {
+  height: 200px;
+
+}*/

From f8085fcc8fc8bb24823d0472512542dd91886789 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 22:39:37 -0800
Subject: [PATCH 32/37] add toggle

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

diff --git a/src/app.js b/src/app.js
index fa56899..d63b19b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -143,6 +143,16 @@ const renderTrips = function renderTrips(list) {
 
     $('#add-trip-form').on('submit', addTripHandler);
 
+    $('#trips').on('click', () => {
+      $('#trip-list').toggle();
+      renderTrips(tripList);
+    });
+
+    $('#add-trip').on('click', () => {
+      console.log('clicked add trip');
+      $('.add-trip-form').toggle();
+    });
+
     TRIP_FIELDS.forEach((field) => {
       const headerElement = $(`th.sort.${field}`);
         headerElement.on('click', (event) => {

From 0222761355d64437543d576919382381e3be61ff Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 22:41:20 -0800
Subject: [PATCH 33/37] remove unneeded class

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

diff --git a/src/app.js b/src/app.js
index d63b19b..09eab9b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -161,5 +161,5 @@ const renderTrips = function renderTrips(list) {
           tripList.sort();
         });
     });
-    $('#status-messages button.clear').on('click', clearStatus);
+    $('#status-messages').on('click', clearStatus);
   }); // end doc.ready

From bd4186b228db57a05dacc995441088291e043366 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 22:42:42 -0800
Subject: [PATCH 34/37] add comment

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

diff --git a/src/app.js b/src/app.js
index 09eab9b..1bef51f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -103,6 +103,7 @@ const renderTrips = function renderTrips(list) {
     return tripData;
   };
 
+  // TODO: does not work currently 
   const outputValidationFailures = function outputValidationFailures() {
     for (let field in errors) {
       for (let problem of errors[field]) {

From d937594874726051b9183649edb5ec2967d33eb4 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Sun, 3 Dec 2017 22:57:23 -0800
Subject: [PATCH 35/37] update error handling

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

diff --git a/src/app.js b/src/app.js
index 1bef51f..fc57620 100644
--- a/src/app.js
+++ b/src/app.js
@@ -103,8 +103,8 @@ const renderTrips = function renderTrips(list) {
     return tripData;
   };
 
-  // TODO: does not work currently 
-  const outputValidationFailures = function outputValidationFailures() {
+
+  const outputValidationFailures = function outputValidationFailures(errors) {
     for (let field in errors) {
       for (let problem of errors[field]) {
         reportStatus('error', `${field}: ${problem}`);
@@ -116,6 +116,10 @@ const renderTrips = function renderTrips(list) {
 
     const trip = new Trip(readFormData());
 
+    if (!trip.isValid()) {
+      outputValidationFailures(trip.validationError);
+      return;
+    }
     tripList.add(trip);
 
     trip.save({}, {
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index dd79eb1..e1a6e27 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -8,6 +8,43 @@ const Trip = Backbone.Model.extend({
   toString() {
     return `<Trip id:${this.get("id")},name:${this.get("name")},continent:${this.get("continent")}, weeks:${this.get("weeks")}, cost:${this.get("cost")}, about:${this.get("about")}  >`;
   },
+  validate(attributes) {
+    // Note the argument. We will read attribute values from
+    // here instead of calling this.get()
+
+    // Format of errors: same as Rails!
+    // {
+    //   title: ['cannot be blank', 'already taken'],
+    //   author: ['cannot be blank']
+    // }
+
+    const errors = {};
+    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.weeks) {
+      errors.weeks = ['cannot be blank'];
+    }
+
+    if (!attributes.cost) {
+      errors.cost = ['cannot be blank'];
+    }
+
+
+    if (Object.keys(errors).length < 1) {
+      return false;
+    }
+    return errors;
+  },
 
 });
 

From 27c6bd86218f0188f95c9e1161dbcf43fb621e6d Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Mon, 4 Dec 2017 15:27:30 -0800
Subject: [PATCH 36/37] update styling

---
 dist/index.html   | 20 +++++++++++++-------
 src/css/style.css | 10 ++++++----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 0322c55..e54259e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -8,15 +8,21 @@
 <body>
   <header>
     <h1>backTrek</h1>
-    <h3>going the distance</h3>
+    <h3>~going the distance~</h3>
+
+    <div>
+      <button type="button" name="button" class="button" id="trips">see trips</button>
+      <button type="button" name="button" class="button" id="add-trip">add trip</button>
+    </div>
   </header>
+
   <section id="status-messages">
         <ul></ul>
   </section>
+
   <main>
-    <a href="#" id="trips">see trips</a>
-    <a href="#" id="add-trip">add trip</a>
-    <aside id="trip"></aside>
+
+    <aside class="float-center" id="trip"></aside>
     <aside id="reserve-form"></aside>
 
     <section class="add-trip-form columns large-4 small-12">
@@ -44,9 +50,8 @@ <h2>Add a Trip</h2>
       </form>
     </section>
 
-
     <section>
-      <table>
+      <table class="columns large-4 small-12">
         <thead>
           <th class="name sort">name</th>
           <th class="continent sort">continent</th>
@@ -74,7 +79,8 @@ <h4><%- name %></h4>
       <p><%- weeks %></p>
       <p><%- cost %></p>
       <p><%- about %></p>
-      <a href="#" id="reserve">reserve trip</a>
+
+      <button type="button" name="button" class="button" id="reserve">reserve trip</button>
 
     </div>
   </script>
diff --git a/src/css/style.css b/src/css/style.css
index 7c35e36..81e6a0f 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,11 +1,13 @@
 
 /* Your styles go here! */
 
-/*body {
-  background-image: url(https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1440&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
+body {
+  /*background-image: url(https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=1440&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);*/
 
 }
 header {
+  color: white;
+  background-color: #ca412b;
   height: 200px;
-
-}*/
+  text-align: center;
+}

From d15006b80036624e2969684bfd80e967142e37d0 Mon Sep 17 00:00:00 2001
From: Tanisha <tanishahampden@gmail.com>
Date: Mon, 4 Dec 2017 15:30:45 -0800
Subject: [PATCH 37/37] add comment

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

diff --git a/src/app.js b/src/app.js
index fc57620..5b0cfb3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -62,6 +62,7 @@ const renderTrips = function renderTrips(list) {
     });
   };
 
+  // BUG: renderReserve not firing on submit, console.logs not logging
   const renderReserve = function renderReserve() {
     const reserveForm = $('#reserve-form');
     reserveForm.html('');
@@ -103,7 +104,6 @@ const renderTrips = function renderTrips(list) {
     return tripData;
   };
 
-
   const outputValidationFailures = function outputValidationFailures(errors) {
     for (let field in errors) {
       for (let problem of errors[field]) {