From 3a6cd6144468e58216ca6494ef265c2515ec942a Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 14:23:12 -0800
Subject: [PATCH 01/38] Load all trips in a table when user clicks 'All Trips'
 link

---
 dist/index.html                  | 24 ++++++++++++++++++++++--
 src/app.js                       | 23 +++++++++++++++++++++--
 src/app/collections/trip_list.js |  9 +++++++++
 src/app/models/trip.js           |  7 +++++++
 4 files changed, 59 insertions(+), 4 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..ff82b2e 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,10 +7,30 @@
 </head>
 <body>
   <header>
-
+    <a id='load-trips' href='#'>All Trips</a>
   </header>
   <main>
-
+    <table>
+      <thead>
+        <tr id='trip-headers'>
+          <script type="text/template" id="trip-headers-template">
+            <th><%- header %></th>
+          </script>
+        </tr>
+      </thead>
+      <tbody id='all-trips'>
+        <script type="text/template" id="all-trips-template">
+          <tr>
+            <td><%- id %></td>
+            <td><%- name %></td>
+            <td><%- category %></td>
+            <td><%- continent %></td>
+            <td><%- weeks %></td>
+            <td><%- cost %></td>
+          </tr>
+        </script>
+      </tbody>
+    </table>
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index e7af594..fa996d6 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,8 +6,27 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
-console.log('it loaded!');
+let allTripsTemplate;
+let tripHeadersTemplate;
+
+const fields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
+
+const loadTrips = function loadTrips() {
+  $('#all-trips').empty();
+  $('#trip-headers').empty();
+  const url = 'https://ada-backtrek-api.herokuapp.com/trips';
+  $.get(url, (response) => {
+    fields.forEach((field) => {
+      $('#trip-headers').append(tripHeadersTemplate({header: field}))
+    });
+    response.forEach((trip) => {
+      $('#all-trips').append(allTripsTemplate(trip))
+    })
+  });
+};
 
 $(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
+  allTripsTemplate = _.template($('#all-trips-template').html());
+  tripHeadersTemplate = _.template($('#trip-headers-template').html());
+  $('#load-trips').on('click', loadTrips);
 });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..eafcdff
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,9 @@
+import Backbone from 'backbone';
+import Trip from '../models/trip';
+
+const TripList = Backbone.Collection.extend({
+  model: Trip,
+  url: 'https://ada-backtrek-api.herokuapp.com/trips',
+})
+
+export default TripList;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..2926af8
--- /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 7cc1e205839645ead7ed1ccb479dcd720ad3f75a Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 15:06:58 -0800
Subject: [PATCH 02/38] Show trip details from trip link

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

diff --git a/dist/index.html b/dist/index.html
index ff82b2e..5ab22d2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -12,17 +12,17 @@
   <main>
     <table>
       <thead>
-        <tr id='trip-headers'>
+        <tr id='trip-headers' class='content'>
           <script type="text/template" id="trip-headers-template">
             <th><%- header %></th>
           </script>
         </tr>
       </thead>
-      <tbody id='all-trips'>
+      <tbody id='all-trips' class='content'>
         <script type="text/template" id="all-trips-template">
           <tr>
             <td><%- id %></td>
-            <td><%- name %></td>
+            <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
             <td><%- category %></td>
             <td><%- continent %></td>
             <td><%- weeks %></td>
@@ -31,6 +31,14 @@
         </script>
       </tbody>
     </table>
+    <div id='show-trip' class='content'>
+      <script type="text/template" id="show-trip-template">
+        <h3><%- name %></h3>
+        <h5><%- weeks %> week<%- plural %></h5>
+        <h5><%- cost %></h5>
+        <p><%- about %></p>
+      </script>
+    </div>
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index fa996d6..7ec8a1d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,27 +6,47 @@ import _ from 'underscore';
 import './css/foundation.css';
 import './css/style.css';
 
+// Models and Collections
+import Trip from './app/models/trip';
+import TripList from './app/collections/trip_list';
+
+const tripList = new TripList();
 let allTripsTemplate;
 let tripHeadersTemplate;
+let showTripTemplate;
 
+const url = 'https://ada-backtrek-api.herokuapp.com/trips';
 const fields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
 
 const loadTrips = function loadTrips() {
-  $('#all-trips').empty();
-  $('#trip-headers').empty();
-  const url = 'https://ada-backtrek-api.herokuapp.com/trips';
-  $.get(url, (response) => {
-    fields.forEach((field) => {
-      $('#trip-headers').append(tripHeadersTemplate({header: field}))
-    });
-    response.forEach((trip) => {
-      $('#all-trips').append(allTripsTemplate(trip))
-    })
+  $('.content').empty();
+  fields.forEach((field) => {
+    $('#trip-headers').append(tripHeadersTemplate({header: field}))
+  });
+  tripList.forEach((trip) => {
+    $('#all-trips').append(allTripsTemplate(trip.attributes));
   });
 };
 
+const showTrip = function showTrip(event) {
+  $('.content').empty();
+  const tripId = event.currentTarget.id;
+  const tripUrl = `${url}/${tripId}`;
+  $.get(tripUrl, (response) => {
+    if (response.weeks === 1) {
+      response.plural = ''
+    } else {
+      response.plural = 's'
+    }
+    $('#show-trip').append(showTripTemplate(response));
+  })
+};
+
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
+  showTripTemplate = _.template($('#show-trip-template').html());
   $('#load-trips').on('click', loadTrips);
+  $('#all-trips').on('click', '.trip', showTrip);
+  tripList.fetch();
 });
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 2926af8..7a94877 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 
 const Trip = Backbone.Model.extend({
-
+  urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
 });
 
 export default Trip;

From 10750ebe19f284441d3057e9d346c98b42425a0a Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 15:22:37 -0800
Subject: [PATCH 03/38] Dynamically add form when user clicks 'Add trip' link

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

diff --git a/dist/index.html b/dist/index.html
index 5ab22d2..ac433f0 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -8,6 +8,7 @@
 <body>
   <header>
     <a id='load-trips' href='#'>All Trips</a>
+    <a id='add-trip' href='#'>Add Trip</a>
   </header>
   <main>
     <table>
@@ -39,6 +40,14 @@ <h5><%- cost %></h5>
         <p><%- about %></p>
       </script>
     </div>
+    <form id='add-trip-form' class='content'>
+      <script type="text/template" id="add-trip-template">
+        <section>
+          <label><%- field %></label>
+          <input type='text' id=<%- field %> name=<%- field %> />
+        </section>
+      </script>
+    </form>
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index 7ec8a1d..9180d40 100644
--- a/src/app.js
+++ b/src/app.js
@@ -14,6 +14,7 @@ const tripList = new TripList();
 let allTripsTemplate;
 let tripHeadersTemplate;
 let showTripTemplate;
+let addTripTemplate;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
 const fields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
@@ -42,11 +43,27 @@ const showTrip = function showTrip(event) {
   })
 };
 
+const addTripForm = function addTripForm() {
+  $('.content').empty();
+  fields.forEach((item) => {
+    $('#add-trip-form').append(addTripTemplate({field: item, lowercaseField: item}));
+  });
+  $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
+}
+
+const saveTrip = function saveTrip(event) {
+  event.preventDefault();
+  // TODO: save the trip to the API
+}
+
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
   showTripTemplate = _.template($('#show-trip-template').html());
+  addTripTemplate = _.template($('#add-trip-template').html());
   $('#load-trips').on('click', loadTrips);
   $('#all-trips').on('click', '.trip', showTrip);
+  $('#add-trip').on('click', addTripForm);
+  $('#add-trip-form').on('submit', saveTrip);
   tripList.fetch();
 });

From 23fe9bbbb1b95093b2ed9530632c7d5cdf12c220 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 15:58:54 -0800
Subject: [PATCH 04/38] User can add trips via a form

---
 dist/index.html   |  4 ++++
 src/app.js        | 39 ++++++++++++++++++++++++++++++++++++++-
 src/css/style.css | 11 ++++++++++-
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index ac433f0..1fe4533 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,6 +11,10 @@
     <a id='add-trip' href='#'>Add Trip</a>
   </header>
   <main>
+    <section id="status-messages">
+      <button class="clear float-right">[x]</button>
+      <ul></ul>
+    </section>
     <table>
       <thead>
         <tr id='trip-headers' class='content'>
diff --git a/src/app.js b/src/app.js
index 9180d40..4901ab9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -46,7 +46,9 @@ const showTrip = function showTrip(event) {
 const addTripForm = function addTripForm() {
   $('.content').empty();
   fields.forEach((item) => {
-    $('#add-trip-form').append(addTripTemplate({field: item, lowercaseField: item}));
+    if (item !== 'id') {
+      $('#add-trip-form').append(addTripTemplate({field: item, lowercaseField: item}));
+    }
   });
   $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
 }
@@ -54,8 +56,42 @@ const addTripForm = function addTripForm() {
 const saveTrip = function saveTrip(event) {
   event.preventDefault();
   // TODO: save the trip to the API
+  const tripData = {};
+  fields.forEach((field) => {
+    tripData[field] = $(`input[name=${field}]`).val();
+  });
+  const trip = new Trip(tripData);
+  trip.save({}, {
+    success: successfulSave,
+    error: failedSave,
+  })
+}
+
+const successfulSave = function successfulSave(model, response) {
+  fields.forEach((field) => {
+    $(`input[name=${field}]`).val('');
+  });
+  $('#status-messages ul').empty();
+  $('#status-messages ul').append(`<li>${model.get('name')} added!</li>`);
+  $('#status-messages').show();
+}
+
+const failedSave = function failedSave(model, response) {
+  $('#status-messages ul').empty();
+  const errors = response.responseJSON.errors;
+  for (let key in errors) {
+    errors[key].forEach((issue) => {
+      $('#status-messages ul').append(`<li>${key}: ${issue}</li>`);
+    })
+  }
+  $('#status-messages').show();
 }
 
+const clearMessages = function clearMessages() {
+  $('#status-messages ul').empty();
+  $('#status-messages').hide();
+};
+
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
@@ -65,5 +101,6 @@ $(document).ready( () => {
   $('#all-trips').on('click', '.trip', showTrip);
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
+  $('#status-messages').on('click', '.clear', clearMessages);
   tripList.fetch();
 });
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..d31011a 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,11 @@
+#status-messages {
+  background-color: #dfdfdf;
 
-/* Your styles go here! */
+  /* Hide by default */
+  display: none;
+
+  border-radius: 1rem;
+  margin: 1rem;
+  height: 100%;
+  padding: .8rem;
+}

From a190df74326418861e006e63b6aa7970982580e2 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 16:22:23 -0800
Subject: [PATCH 05/38] Use backbone to listen for updates to the trip list

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

diff --git a/src/app.js b/src/app.js
index 4901ab9..bfe6fb2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -17,11 +17,12 @@ let showTripTemplate;
 let addTripTemplate;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
-const fields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
+const tableFields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
+const addTripFields = ['name', 'continent', 'category', 'weeks', 'cost', 'about'];
 
 const loadTrips = function loadTrips() {
   $('.content').empty();
-  fields.forEach((field) => {
+  tableFields.forEach((field) => {
     $('#trip-headers').append(tripHeadersTemplate({header: field}))
   });
   tripList.forEach((trip) => {
@@ -45,38 +46,37 @@ const showTrip = function showTrip(event) {
 
 const addTripForm = function addTripForm() {
   $('.content').empty();
-  fields.forEach((item) => {
-    if (item !== 'id') {
-      $('#add-trip-form').append(addTripTemplate({field: item, lowercaseField: item}));
-    }
+  addTripFields.forEach((item) => {
+    $('#add-trip-form').append(addTripTemplate({field: item, lowercaseField: item}));
   });
   $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
 }
 
 const saveTrip = function saveTrip(event) {
   event.preventDefault();
-  // TODO: save the trip to the API
   const tripData = {};
-  fields.forEach((field) => {
+  addTripFields.forEach((field) => {
     tripData[field] = $(`input[name=${field}]`).val();
   });
   const trip = new Trip(tripData);
   trip.save({}, {
-    success: successfulSave,
-    error: failedSave,
+    success: successfulTripSave,
+    error: failedTripSave,
   })
 }
 
-const successfulSave = function successfulSave(model, response) {
-  fields.forEach((field) => {
+const successfulTripSave = function successfulSave(trip, response) {
+  tripList.add(trip);
+  addTripFields.forEach((field) => {
     $(`input[name=${field}]`).val('');
   });
   $('#status-messages ul').empty();
-  $('#status-messages ul').append(`<li>${model.get('name')} added!</li>`);
+  $('#status-messages ul').append(`<li>${trip.get('name')} added!</li>`);
   $('#status-messages').show();
 }
 
-const failedSave = function failedSave(model, response) {
+const failedTripSave = function failedSave(trip, response) {
+  trip.destroy
   $('#status-messages ul').empty();
   const errors = response.responseJSON.errors;
   for (let key in errors) {
@@ -102,5 +102,6 @@ $(document).ready( () => {
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
   $('#status-messages').on('click', '.clear', clearMessages);
+  tripList.on('update', loadTrips);
   tripList.fetch();
 });

From 82228d6286caa493cd56cd231952143ff5bb9b3e Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 16:57:28 -0800
Subject: [PATCH 06/38] Add form for trip reservations

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

diff --git a/dist/index.html b/dist/index.html
index 1fe4533..4152e89 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -39,13 +39,16 @@
     <div id='show-trip' class='content'>
       <script type="text/template" id="show-trip-template">
         <h3><%- name %></h3>
+        <a id='reserve' tripId=<%- id %> href='#'>Reserve</a>
         <h5><%- weeks %> week<%- plural %></h5>
         <h5><%- cost %></h5>
         <p><%- about %></p>
       </script>
     </div>
+    <form id='reserve-trip-form' class='content'>
+    </form>
     <form id='add-trip-form' class='content'>
-      <script type="text/template" id="add-trip-template">
+      <script type="text/template" id="form-template">
         <section>
           <label><%- field %></label>
           <input type='text' id=<%- field %> name=<%- field %> />
diff --git a/src/app.js b/src/app.js
index bfe6fb2..e0416a1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -14,11 +14,12 @@ const tripList = new TripList();
 let allTripsTemplate;
 let tripHeadersTemplate;
 let showTripTemplate;
-let addTripTemplate;
+let formTemplate;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
 const tableFields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
 const addTripFields = ['name', 'continent', 'category', 'weeks', 'cost', 'about'];
+const reservationFields = ['name', 'age', 'email'];
 
 const loadTrips = function loadTrips() {
   $('.content').empty();
@@ -47,7 +48,7 @@ const showTrip = function showTrip(event) {
 const addTripForm = function addTripForm() {
   $('.content').empty();
   addTripFields.forEach((item) => {
-    $('#add-trip-form').append(addTripTemplate({field: item, lowercaseField: item}));
+    $('#add-trip-form').append(formTemplate({field: item, lowercaseField: item}));
   });
   $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
 }
@@ -56,7 +57,7 @@ const saveTrip = function saveTrip(event) {
   event.preventDefault();
   const tripData = {};
   addTripFields.forEach((field) => {
-    tripData[field] = $(`input[name=${field}]`).val();
+    tripData[field] = $(`#add-trip-form input[name=${field}]`).val();
   });
   const trip = new Trip(tripData);
   trip.save({}, {
@@ -68,7 +69,7 @@ const saveTrip = function saveTrip(event) {
 const successfulTripSave = function successfulSave(trip, response) {
   tripList.add(trip);
   addTripFields.forEach((field) => {
-    $(`input[name=${field}]`).val('');
+    $(`#add-trip-form input[name=${field}]`).val('');
   });
   $('#status-messages ul').empty();
   $('#status-messages ul').append(`<li>${trip.get('name')} added!</li>`);
@@ -92,15 +93,25 @@ const clearMessages = function clearMessages() {
   $('#status-messages').hide();
 };
 
+const reserveForm = function reserveForm(event) {
+  $('.content').empty();
+  // TODO: add trip ID so we can submit reservations
+  reservationFields.forEach((item) => {
+    $('#reserve-trip-form').append(formTemplate({field: item, lowercaseField: item}));
+  });
+  $('#reserve-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
+};
+
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
   showTripTemplate = _.template($('#show-trip-template').html());
-  addTripTemplate = _.template($('#add-trip-template').html());
+  formTemplate = _.template($('#form-template').html());
   $('#load-trips').on('click', loadTrips);
   $('#all-trips').on('click', '.trip', showTrip);
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
+  $('#show-trip').on('click', '#reserve', reserveForm);
   $('#status-messages').on('click', '.clear', clearMessages);
   tripList.on('update', loadTrips);
   tripList.fetch();

From 7c1810223f6176cd96f30321467ab596fa37bf85 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 17:10:49 -0800
Subject: [PATCH 07/38] Add trip id to reservation form

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

diff --git a/dist/index.html b/dist/index.html
index 4152e89..02a2013 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -39,7 +39,7 @@
     <div id='show-trip' class='content'>
       <script type="text/template" id="show-trip-template">
         <h3><%- name %></h3>
-        <a id='reserve' tripId=<%- id %> href='#'>Reserve</a>
+        <a id='reserve' tripid=<%- id %> href='#'>Reserve</a>
         <h5><%- weeks %> week<%- plural %></h5>
         <h5><%- cost %></h5>
         <p><%- about %></p>
diff --git a/src/app.js b/src/app.js
index e0416a1..00731f4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -95,13 +95,16 @@ const clearMessages = function clearMessages() {
 
 const reserveForm = function reserveForm(event) {
   $('.content').empty();
-  // TODO: add trip ID so we can submit reservations
+  const tripId = $(event.currentTarget.attributes.tripid).val();
+  $('#reserve-trip-form').attr('tripid', tripId);
   reservationFields.forEach((item) => {
     $('#reserve-trip-form').append(formTemplate({field: item, lowercaseField: item}));
   });
   $('#reserve-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
 };
 
+// TODO: add a way to save a reservation and the submit listener that calls the function
+
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
   tripHeadersTemplate = _.template($('#trip-headers-template').html());

From 15b75b4014b4dbbca6a49d53496fda74050bcc3e Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Tue, 28 Nov 2017 18:36:05 -0800
Subject: [PATCH 08/38] Add fetchTrips to prevent list of trips from loading
 automatically

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

diff --git a/src/app.js b/src/app.js
index 00731f4..92b66d8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -21,6 +21,10 @@ const tableFields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
 const addTripFields = ['name', 'continent', 'category', 'weeks', 'cost', 'about'];
 const reservationFields = ['name', 'age', 'email'];
 
+const fetchTrips = function fetchTrips() {
+  tripList.fetch();
+}
+
 const loadTrips = function loadTrips() {
   $('.content').empty();
   tableFields.forEach((field) => {
@@ -110,12 +114,11 @@ $(document).ready( () => {
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
   showTripTemplate = _.template($('#show-trip-template').html());
   formTemplate = _.template($('#form-template').html());
-  $('#load-trips').on('click', loadTrips);
+  $('#load-trips').on('click', fetchTrips);
+  tripList.on('update', loadTrips);
   $('#all-trips').on('click', '.trip', showTrip);
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
   $('#show-trip').on('click', '#reserve', reserveForm);
   $('#status-messages').on('click', '.clear', clearMessages);
-  tripList.on('update', loadTrips);
-  tripList.fetch();
 });

From ec6dd6efb0bc1306a625a776b5bb33b31e9ca15a Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Wed, 29 Nov 2017 16:41:42 -0800
Subject: [PATCH 09/38] Add client side validation for adding a trip

---
 src/app.js             | 16 +++++++++++----
 src/app/models/trip.js | 45 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/app.js b/src/app.js
index 92b66d8..a1b1c24 100644
--- a/src/app.js
+++ b/src/app.js
@@ -64,10 +64,18 @@ const saveTrip = function saveTrip(event) {
     tripData[field] = $(`#add-trip-form input[name=${field}]`).val();
   });
   const trip = new Trip(tripData);
-  trip.save({}, {
-    success: successfulTripSave,
-    error: failedTripSave,
-  })
+  if (trip.isValid()) {
+    trip.save({}, {
+      success: successfulTripSave,
+      error: failedTripSave,
+    })
+  } else {
+    $('#status-messages ul').empty();
+      for (let error in trip.validationError) {
+        trip.validationError[error].forEach((message) => $('#status-messages ul').append(`<li>${message}</li>`));
+      }
+      $('#status-messages').show();
+  }
 }
 
 const successfulTripSave = function successfulSave(trip, response) {
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 7a94877..645e669 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,7 +1,52 @@
 import Backbone from 'backbone';
 
+const CONTINENTS = ['Africa', 'Antartica', 'Asia', 'Australasia', 'Europe', 'North America', 'South America'];
+
 const Trip = Backbone.Model.extend({
   urlRoot: 'https://ada-backtrek-api.herokuapp.com/trips',
+  validate(attributes) {
+    const errors = {};
+
+    if (!attributes.name) {
+      errors['name'] = ['Name cannot be blank'];
+    }
+
+    if (!attributes.continent) {
+      errors['continent'] = ['Continent cannot be blank'];
+    } else if (!CONTINENTS.includes(attributes.continent)) {
+      errors['continent'] = [`Continent must be valid (${CONTINENTS.join(', ')})`];
+    }
+
+    if (!attributes.category) {
+      errors['category'] = ['Category cannot be blank'];
+    }
+
+    if (!attributes.weeks) {
+      errors['weeks'] = ['Weeks cannot be blank'];
+    } else if (attributes.weeks != parseInt(attributes.weeks)) {
+      errors['weeks'] = ['Weeks must be an integer'];
+    } else if (parseInt(attributes.weeks) <= 0) {
+      errors['weeks'] = ['Weeks must be greater than 0'];
+    }
+
+    if (!attributes.cost) {
+      errors['cost'] = ['Cost cannot be blank'];
+    } else if (attributes.cost != parseFloat(attributes.cost)) {
+      errors['cost'] = ['Cost must be a number'];
+    } else if (parseFloat(attributes.cost) <= 0) {
+      errors['cost'] = ['Cost must be greater than 0'];
+    }
+
+    if (!attributes.about) {
+      errors['about'] = ['About cannot be blank'];
+    }
+
+    if (Object.keys(errors).length > 0) {
+      return errors;
+    } else {
+      return false;
+    }
+  },
 });
 
 export default Trip;

From 7b14979f17e3c66a4d41402260f2d8d329cd1909 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Wed, 29 Nov 2017 16:43:29 -0800
Subject: [PATCH 10/38] Remove extraneous parameter

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

diff --git a/src/app.js b/src/app.js
index a1b1c24..d66750f 100644
--- a/src/app.js
+++ b/src/app.js
@@ -78,7 +78,7 @@ const saveTrip = function saveTrip(event) {
   }
 }
 
-const successfulTripSave = function successfulSave(trip, response) {
+const successfulTripSave = function successfulSave(trip) {
   tripList.add(trip);
   addTripFields.forEach((field) => {
     $(`#add-trip-form input[name=${field}]`).val('');

From 7ffc290d02ca0764ae474e43d0d3e3877913aaa9 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Wed, 29 Nov 2017 16:53:18 -0800
Subject: [PATCH 11/38] Modify listener for clearMessages to clear any time the
 user exits the messages or changes pages

---
 src/app.js                    |  4 +++-
 src/app/models/reservation.js | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/app/models/reservation.js

diff --git a/src/app.js b/src/app.js
index d66750f..955cc84 100644
--- a/src/app.js
+++ b/src/app.js
@@ -9,6 +9,7 @@ import './css/style.css';
 // Models and Collections
 import Trip from './app/models/trip';
 import TripList from './app/collections/trip_list';
+import Reservation from './app/models/reservation';
 
 const tripList = new TripList();
 let allTripsTemplate;
@@ -128,5 +129,6 @@ $(document).ready( () => {
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
   $('#show-trip').on('click', '#reserve', reserveForm);
-  $('#status-messages').on('click', '.clear', clearMessages);
+  // $('#reserve-trip-form').on('submit', saveReservation);
+  $('.clear, #load-trips, #add-trip').on('click', clearMessages);
 });
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
new file mode 100644
index 0000000..5ca3e34
--- /dev/null
+++ b/src/app/models/reservation.js
@@ -0,0 +1,19 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  validate(attributes) {
+    const errors = {};
+
+    if (!attributes.name) {
+      errors['name'] = ['Name cannot be blank'];
+    }
+
+    if (Object.keys(errors).length > 0) {
+      return errors;
+    } else {
+      return false;
+    }
+  },
+});
+
+export default Trip;

From a499b800224d5b6b843bc9722da157f12f0f6c4e Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Wed, 29 Nov 2017 16:59:35 -0800
Subject: [PATCH 12/38] add saveReservation method and client side reservation
 validation

---
 src/app.js                    | 55 +++++++++++++++++++++++++++++++----
 src/app/models/reservation.js |  4 +++
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/app.js b/src/app.js
index 955cc84..ee94eb5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -50,6 +50,11 @@ const showTrip = function showTrip(event) {
   })
 };
 
+const clearMessages = function clearMessages() {
+  $('#status-messages ul').empty();
+  $('#status-messages').hide();
+};
+
 const addTripForm = function addTripForm() {
   $('.content').empty();
   addTripFields.forEach((item) => {
@@ -101,11 +106,6 @@ const failedTripSave = function failedSave(trip, response) {
   $('#status-messages').show();
 }
 
-const clearMessages = function clearMessages() {
-  $('#status-messages ul').empty();
-  $('#status-messages').hide();
-};
-
 const reserveForm = function reserveForm(event) {
   $('.content').empty();
   const tripId = $(event.currentTarget.attributes.tripid).val();
@@ -116,6 +116,49 @@ const reserveForm = function reserveForm(event) {
   $('#reserve-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
 };
 
+const saveReservation = function saveReservation(event) {
+  event.preventDefault();
+  const reservationData = {};
+  reservationFields.forEach((field) => {
+    reservationData[field] = $(`#reserve-trip-form input[name=${field}]`).val();
+  });
+  const reservation = new Reservation(reservationData);
+  if (reservation.isValid()) {
+    reservation.save({}, {
+      // success: successfulTripSave,
+      // error: failedTripSave,
+    })
+  } else {
+    $('#status-messages ul').empty();
+      for (let error in reservation.validationError) {
+        reservation.validationError[error].forEach((message) => $('#status-messages ul').append(`<li>${message}</li>`));
+      }
+      $('#status-messages').show();
+  }
+}
+
+// const successfulTripSave = function successfulSave(trip) {
+//   tripList.add(trip);
+//   addTripFields.forEach((field) => {
+//     $(`#add-trip-form input[name=${field}]`).val('');
+//   });
+//   $('#status-messages ul').empty();
+//   $('#status-messages ul').append(`<li>${trip.get('name')} added!</li>`);
+//   $('#status-messages').show();
+// }
+//
+// const failedTripSave = function failedSave(trip, response) {
+//   trip.destroy
+//   $('#status-messages ul').empty();
+//   const errors = response.responseJSON.errors;
+//   for (let key in errors) {
+//     errors[key].forEach((issue) => {
+//       $('#status-messages ul').append(`<li>${key}: ${issue}</li>`);
+//     })
+//   }
+//   $('#status-messages').show();
+// }
+
 // TODO: add a way to save a reservation and the submit listener that calls the function
 
 $(document).ready( () => {
@@ -129,6 +172,6 @@ $(document).ready( () => {
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
   $('#show-trip').on('click', '#reserve', reserveForm);
-  // $('#reserve-trip-form').on('submit', saveReservation);
+  $('#reserve-trip-form').on('submit', saveReservation);
   $('.clear, #load-trips, #add-trip').on('click', clearMessages);
 });
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index 5ca3e34..a307fcd 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -8,6 +8,10 @@ const Trip = Backbone.Model.extend({
       errors['name'] = ['Name cannot be blank'];
     }
 
+    if (!attributes.email) {
+      errors['email'] = ['Email cannot be blank'];
+    }
+
     if (Object.keys(errors).length > 0) {
       return errors;
     } else {

From dd0375412494b6f1db2fc4569af1624b4dec98e7 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Thu, 30 Nov 2017 15:15:00 -0800
Subject: [PATCH 13/38] Allow user to submit a reservation, redirect back to
 the individual trip page if successful, show errors and do not clear form if
 unsuccessful

---
 src/app.js                    | 50 ++++++++++++++---------------------
 src/app/models/reservation.js |  6 +++++
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/src/app.js b/src/app.js
index ee94eb5..64b6e81 100644
--- a/src/app.js
+++ b/src/app.js
@@ -73,7 +73,7 @@ const saveTrip = function saveTrip(event) {
   if (trip.isValid()) {
     trip.save({}, {
       success: successfulTripSave,
-      error: failedTripSave,
+      error: failedSave,
     })
   } else {
     $('#status-messages ul').empty();
@@ -84,7 +84,7 @@ const saveTrip = function saveTrip(event) {
   }
 }
 
-const successfulTripSave = function successfulSave(trip) {
+const successfulTripSave = function successfulTripSave(trip) {
   tripList.add(trip);
   addTripFields.forEach((field) => {
     $(`#add-trip-form input[name=${field}]`).val('');
@@ -94,8 +94,8 @@ const successfulTripSave = function successfulSave(trip) {
   $('#status-messages').show();
 }
 
-const failedTripSave = function failedSave(trip, response) {
-  trip.destroy
+const failedSave = function failedSave(model, response) {
+  model.destroy
   $('#status-messages ul').empty();
   const errors = response.responseJSON.errors;
   for (let key in errors) {
@@ -118,15 +118,18 @@ const reserveForm = function reserveForm(event) {
 
 const saveReservation = function saveReservation(event) {
   event.preventDefault();
+  const baseUrl = 'https://ada-backtrek-api.herokuapp.com/trips';
+  const tripId = $(event.currentTarget.attributes.tripid).val();
+  const finalUrl = `${baseUrl}/${tripId}/reservations`
   const reservationData = {};
   reservationFields.forEach((field) => {
     reservationData[field] = $(`#reserve-trip-form input[name=${field}]`).val();
   });
-  const reservation = new Reservation(reservationData);
+  const reservation = new Reservation(reservationData, {url: finalUrl});
   if (reservation.isValid()) {
     reservation.save({}, {
-      // success: successfulTripSave,
-      // error: failedTripSave,
+      success: successfulReservationSave,
+      error: failedSave,
     })
   } else {
     $('#status-messages ul').empty();
@@ -137,29 +140,16 @@ const saveReservation = function saveReservation(event) {
   }
 }
 
-// const successfulTripSave = function successfulSave(trip) {
-//   tripList.add(trip);
-//   addTripFields.forEach((field) => {
-//     $(`#add-trip-form input[name=${field}]`).val('');
-//   });
-//   $('#status-messages ul').empty();
-//   $('#status-messages ul').append(`<li>${trip.get('name')} added!</li>`);
-//   $('#status-messages').show();
-// }
-//
-// const failedTripSave = function failedSave(trip, response) {
-//   trip.destroy
-//   $('#status-messages ul').empty();
-//   const errors = response.responseJSON.errors;
-//   for (let key in errors) {
-//     errors[key].forEach((issue) => {
-//       $('#status-messages ul').append(`<li>${key}: ${issue}</li>`);
-//     })
-//   }
-//   $('#status-messages').show();
-// }
-
-// TODO: add a way to save a reservation and the submit listener that calls the function
+const successfulReservationSave = function successfulReservationSave(reservation, response) {
+  reservationFields.forEach((field) => {
+    $(`#reserve-trip-form input[name=${field}]`).val('');
+  });
+  $('#status-messages ul').empty();
+  $('#status-messages ul').append(`<li>A space reserved for ${reservation.get('name')}!</li>`);
+  $('#status-messages').show();
+  const fakeEvent = {currentTarget: {id: response.trip_id}};
+  showTrip(fakeEvent);
+}
 
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index a307fcd..e0e4615 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -1,6 +1,12 @@
 import Backbone from 'backbone';
 
 const Trip = Backbone.Model.extend({
+  url() {
+    return this.url;
+  },
+  initialize(attributes, options) {
+    this.url = options.url;
+  },
   validate(attributes) {
     const errors = {};
 

From e74036de24f330c1242fc03667b26f935b6c5792 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Thu, 30 Nov 2017 16:20:10 -0800
Subject: [PATCH 14/38] Add sorting capability on trips table with styling to
 indicate sort column and direction of sort

---
 dist/index.html   |  2 +-
 src/app.js        | 44 +++++++++++++++++++++++++++++++++++++-------
 src/css/style.css | 11 +++++++++++
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 02a2013..37de1d3 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -19,7 +19,7 @@
       <thead>
         <tr id='trip-headers' class='content'>
           <script type="text/template" id="trip-headers-template">
-            <th><%- header %></th>
+            <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
           </script>
         </tr>
       </thead>
diff --git a/src/app.js b/src/app.js
index 64b6e81..53e62a4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -18,22 +18,27 @@ let showTripTemplate;
 let formTemplate;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
-const tableFields = ['id', 'name', 'continent', 'category', 'weeks', 'cost'];
-const addTripFields = ['name', 'continent', 'category', 'weeks', 'cost', 'about'];
+const tableFields = ['id', 'name', 'category', 'continent', 'weeks', 'cost'];
+const addTripFields = ['name', 'category', 'continent', 'weeks', 'cost', 'about'];
 const reservationFields = ['name', 'age', 'email'];
 
 const fetchTrips = function fetchTrips() {
   tripList.fetch();
 }
 
-const loadTrips = function loadTrips() {
+const renderTrips = function renderTrips(list) {
+  $('#all-trips').empty();
+  list.forEach((trip) => {
+    $('#all-trips').append(allTripsTemplate(trip.attributes));
+  });
+}
+
+const loadTripsTable = function loadTripsTable(list) {
   $('.content').empty();
   tableFields.forEach((field) => {
     $('#trip-headers').append(tripHeadersTemplate({header: field}))
   });
-  tripList.forEach((trip) => {
-    $('#all-trips').append(allTripsTemplate(trip.attributes));
-  });
+  renderTrips(list);
 };
 
 const showTrip = function showTrip(event) {
@@ -151,14 +156,39 @@ const successfulReservationSave = function successfulReservationSave(reservation
   showTrip(fakeEvent);
 }
 
+const sortTrips = function sortTrips() {
+  const classes = $(this).attr('class').split(/\s+/);
+  let sortClass;
+  for (let i = 0; i < classes.length; i += 1) {
+    if (tableFields.includes(classes[i])) {
+      sortClass = classes[i];
+    }
+  }
+  tripList.comparator = sortClass;
+  $('.sortorder').empty();
+  if (classes.includes('desc')) {
+    const descModels = tripList.models.reverse();
+    renderTrips(descModels);
+    $(this).removeClass('desc');
+    $(`.${sortClass} .sortorder`).html('&#x25B2');
+  } else {
+    tripList.sort();
+    $(this).addClass('desc').siblings().removeClass('desc');
+    renderTrips(tripList);
+    $(`.${sortClass} .sortorder`).html('&#x25BC');
+  }
+  $(this).addClass('current-sort-field').siblings().removeClass('current-sort-field');
+}
+
 $(document).ready( () => {
   allTripsTemplate = _.template($('#all-trips-template').html());
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
   showTripTemplate = _.template($('#show-trip-template').html());
   formTemplate = _.template($('#form-template').html());
   $('#load-trips').on('click', fetchTrips);
-  tripList.on('update', loadTrips);
+  tripList.on('update', loadTripsTable, tripList);
   $('#all-trips').on('click', '.trip', showTrip);
+  $('thead').on('click', '.sort', sortTrips);
   $('#add-trip').on('click', addTripForm);
   $('#add-trip-form').on('submit', saveTrip);
   $('#show-trip').on('click', '#reserve', reserveForm);
diff --git a/src/css/style.css b/src/css/style.css
index d31011a..d423e92 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -9,3 +9,14 @@
   height: 100%;
   padding: .8rem;
 }
+
+/* table sorting styling */
+.current-sort-field {
+  background-color: darkgrey;
+  color: white;
+}
+
+th a {
+  color: inherit; /* blue colors for links too */
+  text-decoration: inherit; /* no underline */
+}

From 5620f51752a8e0d5ae2af07d54dd59288adb3887 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Thu, 30 Nov 2017 20:00:01 -0800
Subject: [PATCH 15/38] Add dynamic form for filtering input that is only
 visible when appropriate

---
 dist/index.html   | 74 +++++++++++++++++++++++++++--------------------
 src/app.js        | 28 ++++++++++++++----
 src/css/style.css |  5 ++++
 3 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 37de1d3..477f249 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -15,28 +15,38 @@
       <button class="clear float-right">[x]</button>
       <ul></ul>
     </section>
-    <table>
-      <thead>
-        <tr id='trip-headers' class='content'>
-          <script type="text/template" id="trip-headers-template">
-            <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
+    <section>
+      <form id='filter'>
+        <select id='filter-select' class='content'>
+          <script type="text/template" id="filter-trips-template">
+            <option value='<%- item %>'><%- capitalized %></option>
           </script>
-        </tr>
-      </thead>
-      <tbody id='all-trips' class='content'>
-        <script type="text/template" id="all-trips-template">
-          <tr>
-            <td><%- id %></td>
-            <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
-            <td><%- category %></td>
-            <td><%- continent %></td>
-            <td><%- weeks %></td>
-            <td><%- cost %></td>
+        </select>
+        <input type='text' id='filter-input'/>
+      </form>
+      <table>
+        <thead>
+          <tr id='trip-headers' class='content'>
+            <script type="text/template" id="trip-headers-template">
+              <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
+            </script>
           </tr>
-        </script>
-      </tbody>
-    </table>
-    <div id='show-trip' class='content'>
+        </thead>
+        <tbody id='all-trips' class='content'>
+          <script type="text/template" id="all-trips-template">
+            <tr>
+              <td><%- id %></td>
+              <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
+              <td><%- category %></td>
+              <td><%- continent %></td>
+              <td><%- weeks %></td>
+              <td><%- cost %></td>
+            </tr>
+          </script>
+        </tbody>
+      </table>
+    </section>
+    <section id='show-trip' class='content'>
       <script type="text/template" id="show-trip-template">
         <h3><%- name %></h3>
         <a id='reserve' tripid=<%- id %> href='#'>Reserve</a>
@@ -44,17 +54,19 @@ <h5><%- weeks %> week<%- plural %></h5>
         <h5><%- cost %></h5>
         <p><%- about %></p>
       </script>
-    </div>
-    <form id='reserve-trip-form' class='content'>
-    </form>
-    <form id='add-trip-form' class='content'>
-      <script type="text/template" id="form-template">
-        <section>
-          <label><%- field %></label>
-          <input type='text' id=<%- field %> name=<%- field %> />
-        </section>
-      </script>
-    </form>
+    </section>
+    <section>
+      <form id='reserve-trip-form' class='content'>
+      </form>
+      <form id='add-trip-form' class='content'>
+        <script type="text/template" id="form-template">
+          <section>
+            <label><%- field %></label>
+            <input type='text' id=<%- field %> name=<%- field %> />
+          </section>
+        </script>
+      </form>
+    </section>
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index 53e62a4..58f7cc4 100644
--- a/src/app.js
+++ b/src/app.js
@@ -16,10 +16,12 @@ let allTripsTemplate;
 let tripHeadersTemplate;
 let showTripTemplate;
 let formTemplate;
+let filterTemplate;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
 const tableFields = ['id', 'name', 'category', 'continent', 'weeks', 'cost'];
 const addTripFields = ['name', 'category', 'continent', 'weeks', 'cost', 'about'];
+const filterFields = ['name', 'category', 'continent', 'weeks', 'cost']
 const reservationFields = ['name', 'age', 'email'];
 
 const fetchTrips = function fetchTrips() {
@@ -33,16 +35,25 @@ const renderTrips = function renderTrips(list) {
   });
 }
 
+const loadFilters = function loadFilters() {
+  $('#filter').show();
+  filterFields.forEach((filter) => {
+    const capitalFilter = filter.charAt(0).toUpperCase() + filter.slice(1);
+    $('#filter-select').append(filterTemplate({item: filter, capitalized: capitalFilter}))
+  });
+}
+
 const loadTripsTable = function loadTripsTable(list) {
-  $('.content').empty();
+  clearContent();
   tableFields.forEach((field) => {
     $('#trip-headers').append(tripHeadersTemplate({header: field}))
   });
   renderTrips(list);
+  loadFilters();
 };
 
 const showTrip = function showTrip(event) {
-  $('.content').empty();
+  clearContent();
   const tripId = event.currentTarget.id;
   const tripUrl = `${url}/${tripId}`;
   $.get(tripUrl, (response) => {
@@ -55,13 +66,19 @@ const showTrip = function showTrip(event) {
   })
 };
 
+const clearContent = function clearContent() {
+  $('.content').empty();
+  $('#filter-input').val('');
+  $('#filter').hide();
+};
+
 const clearMessages = function clearMessages() {
   $('#status-messages ul').empty();
   $('#status-messages').hide();
 };
 
 const addTripForm = function addTripForm() {
-  $('.content').empty();
+  clearContent();
   addTripFields.forEach((item) => {
     $('#add-trip-form').append(formTemplate({field: item, lowercaseField: item}));
   });
@@ -112,7 +129,7 @@ const failedSave = function failedSave(model, response) {
 }
 
 const reserveForm = function reserveForm(event) {
-  $('.content').empty();
+  clearContent();
   const tripId = $(event.currentTarget.attributes.tripid).val();
   $('#reserve-trip-form').attr('tripid', tripId);
   reservationFields.forEach((item) => {
@@ -159,7 +176,7 @@ const successfulReservationSave = function successfulReservationSave(reservation
 const sortTrips = function sortTrips() {
   const classes = $(this).attr('class').split(/\s+/);
   let sortClass;
-  for (let i = 0; i < classes.length; i += 1) {
+  for (let i = 0; i < classes.length && sortClass === undefined; i += 1) {
     if (tableFields.includes(classes[i])) {
       sortClass = classes[i];
     }
@@ -185,6 +202,7 @@ $(document).ready( () => {
   tripHeadersTemplate = _.template($('#trip-headers-template').html());
   showTripTemplate = _.template($('#show-trip-template').html());
   formTemplate = _.template($('#form-template').html());
+  filterTemplate = _.template($('#filter-trips-template').html());
   $('#load-trips').on('click', fetchTrips);
   tripList.on('update', loadTripsTable, tripList);
   $('#all-trips').on('click', '.trip', showTrip);
diff --git a/src/css/style.css b/src/css/style.css
index d423e92..b3ab072 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -20,3 +20,8 @@ th a {
   color: inherit; /* blue colors for links too */
   text-decoration: inherit; /* no underline */
 }
+
+/* filter form */
+#filter {
+  display: none;
+}

From 0ee18fee391708f241f121b370ce5ad9fff4ef9a Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Thu, 30 Nov 2017 21:38:30 -0800
Subject: [PATCH 16/38] Add ability to filter by text fields

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

diff --git a/src/app.js b/src/app.js
index 58f7cc4..86d9fa0 100644
--- a/src/app.js
+++ b/src/app.js
@@ -12,11 +12,13 @@ import TripList from './app/collections/trip_list';
 import Reservation from './app/models/reservation';
 
 const tripList = new TripList();
+let referenceList = new TripList();
 let allTripsTemplate;
 let tripHeadersTemplate;
 let showTripTemplate;
 let formTemplate;
 let filterTemplate;
+let filterCategory;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
 const tableFields = ['id', 'name', 'category', 'continent', 'weeks', 'cost'];
@@ -28,20 +30,16 @@ const fetchTrips = function fetchTrips() {
   tripList.fetch();
 }
 
+const syncReferenceList = function syncReferenceList() {
+  referenceList.add(tripList.models);
+}
+
 const renderTrips = function renderTrips(list) {
   $('#all-trips').empty();
   list.forEach((trip) => {
     $('#all-trips').append(allTripsTemplate(trip.attributes));
   });
-}
-
-const loadFilters = function loadFilters() {
-  $('#filter').show();
-  filterFields.forEach((filter) => {
-    const capitalFilter = filter.charAt(0).toUpperCase() + filter.slice(1);
-    $('#filter-select').append(filterTemplate({item: filter, capitalized: capitalFilter}))
-  });
-}
+};
 
 const loadTripsTable = function loadTripsTable(list) {
   clearContent();
@@ -52,6 +50,31 @@ const loadTripsTable = function loadTripsTable(list) {
   loadFilters();
 };
 
+const loadFilters = function loadFilters() {
+  $('#filter').show();
+  filterFields.forEach((filter) => {
+    const capitalFilter = filter.charAt(0).toUpperCase() + filter.slice(1);
+    $('#filter-select').append(filterTemplate({item: filter, capitalized: capitalFilter}))
+  });
+  $('#filter-select').prop('selectedIndex', -1);
+};
+
+const setfilterCategory = function setfilterCategory() {
+  const capital = $('#filter-select').find(':selected').text();
+  filterCategory = capital.charAt(0).toLowerCase() + capital.slice(1);
+};
+
+const filterTrips = function filterTrips(event) {
+  if (filterCategory) {
+    const filterInput = event.currentTarget.value.toLowerCase();
+    const filteredTrips = tripList.models.filter(function(trip) {
+      return trip.attributes[filterCategory].toLowerCase().includes(filterInput);
+    });
+    referenceList.reset(filteredTrips);
+    renderTrips(referenceList);
+  }
+};
+
 const showTrip = function showTrip(event) {
   clearContent();
   const tripId = event.currentTarget.id;
@@ -108,6 +131,7 @@ const saveTrip = function saveTrip(event) {
 
 const successfulTripSave = function successfulTripSave(trip) {
   tripList.add(trip);
+  referenceList.add(trip);
   addTripFields.forEach((field) => {
     $(`#add-trip-form input[name=${field}]`).val('');
   });
@@ -181,17 +205,17 @@ const sortTrips = function sortTrips() {
       sortClass = classes[i];
     }
   }
-  tripList.comparator = sortClass;
+  referenceList.comparator = sortClass;
   $('.sortorder').empty();
   if (classes.includes('desc')) {
-    const descModels = tripList.models.reverse();
+    const descModels = referenceList.models.reverse();
     renderTrips(descModels);
     $(this).removeClass('desc');
     $(`.${sortClass} .sortorder`).html('&#x25B2');
   } else {
-    tripList.sort();
+    referenceList.sort();
     $(this).addClass('desc').siblings().removeClass('desc');
-    renderTrips(tripList);
+    renderTrips(referenceList);
     $(`.${sortClass} .sortorder`).html('&#x25BC');
   }
   $(this).addClass('current-sort-field').siblings().removeClass('current-sort-field');
@@ -204,7 +228,11 @@ $(document).ready( () => {
   formTemplate = _.template($('#form-template').html());
   filterTemplate = _.template($('#filter-trips-template').html());
   $('#load-trips').on('click', fetchTrips);
-  tripList.on('update', loadTripsTable, tripList);
+  $('#load-trips').on('click', loadTripsTable, referenceList);
+  tripList.on('update', syncReferenceList);
+  referenceList.on('update', loadTripsTable, referenceList);
+  $('#filter-select').on('change', setfilterCategory);
+  $('#filter-input').on('input', filterTrips);
   $('#all-trips').on('click', '.trip', showTrip);
   $('thead').on('click', '.sort', sortTrips);
   $('#add-trip').on('click', addTripForm);

From 82d963b73265750c4e28425cc7639f2a530d083c Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Thu, 30 Nov 2017 21:47:31 -0800
Subject: [PATCH 17/38] Add filtering capability by numeric values for weeks
 and cost

---
 src/app.js | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app.js b/src/app.js
index 86d9fa0..a4a1ac3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -65,13 +65,30 @@ const setfilterCategory = function setfilterCategory() {
 };
 
 const filterTrips = function filterTrips(event) {
-  if (filterCategory) {
-    const filterInput = event.currentTarget.value.toLowerCase();
-    const filteredTrips = tripList.models.filter(function(trip) {
-      return trip.attributes[filterCategory].toLowerCase().includes(filterInput);
-    });
-    referenceList.reset(filteredTrips);
-    renderTrips(referenceList);
+  let filterInput = event.currentTarget.value;
+  let filteredTrips = [];
+  switch (filterCategory) {
+    case 'name':
+    case 'category':
+    case 'continent':
+      filterInput = filterInput.toLowerCase();
+      filteredTrips = tripList.models.filter(function(trip) {
+        return trip.attributes[filterCategory].toLowerCase().includes(filterInput);
+      });
+      referenceList.reset(filteredTrips);
+      renderTrips(referenceList);
+      break;
+    case 'weeks':
+    case 'cost':
+      filterInput = parseFloat(filterInput);
+      filteredTrips = tripList.models.filter(function(trip) {
+        return trip.attributes[filterCategory] <= filterInput;
+      });
+      referenceList.reset(filteredTrips);
+      renderTrips(referenceList);
+      break;
+    default:
+      break;
   }
 };
 

From 266e7b28eefd10a8b66e8fe4d6f50c9876bb7c48 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 09:59:35 -0800
Subject: [PATCH 18/38] Squash bug: all trips not loading from any other page
 when the tripList didn't change

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

diff --git a/dist/index.html b/dist/index.html
index 477f249..2958ce2 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -58,6 +58,8 @@ <h5><%- cost %></h5>
     <section>
       <form id='reserve-trip-form' class='content'>
       </form>
+    </section>
+    <section>
       <form id='add-trip-form' class='content'>
         <script type="text/template" id="form-template">
           <section>
diff --git a/src/app.js b/src/app.js
index a4a1ac3..c1cfd12 100644
--- a/src/app.js
+++ b/src/app.js
@@ -32,6 +32,7 @@ const fetchTrips = function fetchTrips() {
 
 const syncReferenceList = function syncReferenceList() {
   referenceList.add(tripList.models);
+  $(referenceList).trigger('update');
 }
 
 const renderTrips = function renderTrips(list) {

From 63cd21c4d4b1d477a85fd39667f495b4b38baecc Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 10:05:19 -0800
Subject: [PATCH 19/38] Change trigger to function call

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

diff --git a/src/app.js b/src/app.js
index c1cfd12..fa205ef 100644
--- a/src/app.js
+++ b/src/app.js
@@ -32,7 +32,7 @@ const fetchTrips = function fetchTrips() {
 
 const syncReferenceList = function syncReferenceList() {
   referenceList.add(tripList.models);
-  $(referenceList).trigger('update');
+  loadTripsTable(referenceList);
 }
 
 const renderTrips = function renderTrips(list) {

From 777f945d3ab9dda3deb0c178724373f439b689ba Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 11:16:41 -0800
Subject: [PATCH 20/38] Split screen when click on anything that is not all
 trips

---
 dist/index.html   | 74 +++++++++++++++++++++++++----------------------
 src/app.js        | 15 ++++++++--
 src/css/style.css | 13 +++++++++
 3 files changed, 65 insertions(+), 37 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 2958ce2..740eb1b 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,46 +7,50 @@
 </head>
 <body>
   <header>
-    <a id='load-trips' href='#'>All Trips</a>
-    <a id='add-trip' href='#'>Add Trip</a>
+    <h1 class='columns small-6'>BackTREK</h1>
+    <span id='buttons' class='float-right'>
+      <a id='load-trips' class='button' href='#'>All Trips</a>
+      <a id='add-trip' class='button' href='#'>Add Trip</a>
+    </span>
   </header>
-  <main>
+  <main class='row'>
     <section id="status-messages">
       <button class="clear float-right">[x]</button>
       <ul></ul>
     </section>
-    <section>
-      <form id='filter'>
-        <select id='filter-select' class='content'>
-          <script type="text/template" id="filter-trips-template">
-            <option value='<%- item %>'><%- capitalized %></option>
+
+    <form id='filter'>
+      <select id='filter-select'>
+        <script type="text/template" id="filter-trips-template">
+          <option value='<%- item %>'><%- capitalized %></option>
+        </script>
+      </select>
+      <input type='text' id='filter-input'/>
+    </form>
+    <table class='left-half'>
+      <thead>
+        <tr id='trip-headers'>
+          <script type="text/template" id="trip-headers-template">
+            <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
           </script>
-        </select>
-        <input type='text' id='filter-input'/>
-      </form>
-      <table>
-        <thead>
-          <tr id='trip-headers' class='content'>
-            <script type="text/template" id="trip-headers-template">
-              <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
-            </script>
+        </tr>
+      </thead>
+      <tbody id='all-trips'>
+        <script type="text/template" id="all-trips-template">
+          <tr>
+            <td><%- id %></td>
+            <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
+            <td><%- category %></td>
+            <td><%- continent %></td>
+            <td><%- weeks %></td>
+            <td><%- cost %></td>
           </tr>
-        </thead>
-        <tbody id='all-trips' class='content'>
-          <script type="text/template" id="all-trips-template">
-            <tr>
-              <td><%- id %></td>
-              <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
-              <td><%- category %></td>
-              <td><%- continent %></td>
-              <td><%- weeks %></td>
-              <td><%- cost %></td>
-            </tr>
-          </script>
-        </tbody>
-      </table>
-    </section>
-    <section id='show-trip' class='content'>
+        </script>
+      </tbody>
+    </table>
+
+
+    <section id='show-trip' class='content right-half'>
       <script type="text/template" id="show-trip-template">
         <h3><%- name %></h3>
         <a id='reserve' tripid=<%- id %> href='#'>Reserve</a>
@@ -56,11 +60,11 @@ <h5><%- cost %></h5>
       </script>
     </section>
     <section>
-      <form id='reserve-trip-form' class='content'>
+      <form id='reserve-trip-form' class='content right-half'>
       </form>
     </section>
     <section>
-      <form id='add-trip-form' class='content'>
+      <form id='add-trip-form' class='content right-half'>
         <script type="text/template" id="form-template">
           <section>
             <label><%- field %></label>
diff --git a/src/app.js b/src/app.js
index fa205ef..10762c8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -43,6 +43,7 @@ const renderTrips = function renderTrips(list) {
 };
 
 const loadTripsTable = function loadTripsTable(list) {
+  $('#trip-headers').html('');
   clearContent();
   tableFields.forEach((field) => {
     $('#trip-headers').append(tripHeadersTemplate({header: field}))
@@ -52,6 +53,7 @@ const loadTripsTable = function loadTripsTable(list) {
 };
 
 const loadFilters = function loadFilters() {
+  $('#filter-select').empty();
   $('#filter').show();
   filterFields.forEach((filter) => {
     const capitalFilter = filter.charAt(0).toUpperCase() + filter.slice(1);
@@ -93,8 +95,18 @@ const filterTrips = function filterTrips(event) {
   }
 };
 
+const splitScreen = function splitScreen() {
+  $('.left-half, .right-half').addClass('columns small-5 float-left');
+};
+
+const unSplitScreen = function unSplitScreen() {
+  $('.left-half, .right-half').removeClass('columns small-5 float-left');
+  $('#filter-input').val('');
+}
+
 const showTrip = function showTrip(event) {
   clearContent();
+  splitScreen();
   const tripId = event.currentTarget.id;
   const tripUrl = `${url}/${tripId}`;
   $.get(tripUrl, (response) => {
@@ -109,8 +121,6 @@ const showTrip = function showTrip(event) {
 
 const clearContent = function clearContent() {
   $('.content').empty();
-  $('#filter-input').val('');
-  $('#filter').hide();
 };
 
 const clearMessages = function clearMessages() {
@@ -245,6 +255,7 @@ $(document).ready( () => {
   showTripTemplate = _.template($('#show-trip-template').html());
   formTemplate = _.template($('#form-template').html());
   filterTemplate = _.template($('#filter-trips-template').html());
+  $('#load-trips').on('click', unSplitScreen);
   $('#load-trips').on('click', fetchTrips);
   $('#load-trips').on('click', loadTripsTable, referenceList);
   tripList.on('update', syncReferenceList);
diff --git a/src/css/style.css b/src/css/style.css
index b3ab072..a6a3942 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,3 +1,16 @@
+/* general */
+.row {
+  min-width: 100vw;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
 #status-messages {
   background-color: #dfdfdf;
 

From e941cbd736b57cccca40abab95dd92c00adf5fb8 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 12:47:15 -0800
Subject: [PATCH 21/38] Highlight current selected trip in all trips table

---
 dist/index.html   | 2 +-
 src/app.js        | 8 ++++++++
 src/css/style.css | 9 +++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/dist/index.html b/dist/index.html
index 740eb1b..cb6bbc4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -13,7 +13,7 @@ <h1 class='columns small-6'>BackTREK</h1>
       <a id='add-trip' class='button' href='#'>Add Trip</a>
     </span>
   </header>
-  <main class='row'>
+  <main class='row clear'>
     <section id="status-messages">
       <button class="clear float-right">[x]</button>
       <ul></ul>
diff --git a/src/app.js b/src/app.js
index 10762c8..9f7d5be 100644
--- a/src/app.js
+++ b/src/app.js
@@ -104,7 +104,15 @@ const unSplitScreen = function unSplitScreen() {
   $('#filter-input').val('');
 }
 
+const highlightCurrentTrip = function highlightCurrentTrip(event) {
+  const currentRow = $(event.currentTarget).parent().parents('tr:first').children();
+  console.log(currentRow);
+  $('#all-trips tr td').removeClass('current-trip');
+  $(currentRow).addClass('current-trip');
+};
+
 const showTrip = function showTrip(event) {
+  highlightCurrentTrip(event);
   clearContent();
   splitScreen();
   const tripId = event.currentTarget.id;
diff --git a/src/css/style.css b/src/css/style.css
index a6a3942..13a6555 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -11,6 +11,10 @@
   float: right;
 }
 
+.clear {
+  clear: both;
+}
+
 #status-messages {
   background-color: #dfdfdf;
 
@@ -34,6 +38,11 @@ th a {
   text-decoration: inherit; /* no underline */
 }
 
+.current-trip {
+  background-color: darkgrey;
+  color: white;
+}
+
 /* filter form */
 #filter {
   display: none;

From 99850a43a08dfa6fa212c33e4505419e121a7733 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 13:41:29 -0800
Subject: [PATCH 22/38] Get filter form onto left half of screen

---
 dist/index.html   | 60 +++++++++++++++++++++++++----------------------
 src/app.js        |  3 ++-
 src/css/style.css | 20 ++++++++++++++++
 3 files changed, 54 insertions(+), 29 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index cb6bbc4..06f622a 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -19,35 +19,39 @@ <h1 class='columns small-6'>BackTREK</h1>
       <ul></ul>
     </section>
 
-    <form id='filter'>
-      <select id='filter-select'>
-        <script type="text/template" id="filter-trips-template">
-          <option value='<%- item %>'><%- capitalized %></option>
-        </script>
-      </select>
-      <input type='text' id='filter-input'/>
-    </form>
-    <table class='left-half'>
-      <thead>
-        <tr id='trip-headers'>
-          <script type="text/template" id="trip-headers-template">
-            <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
-          </script>
-        </tr>
-      </thead>
-      <tbody id='all-trips'>
-        <script type="text/template" id="all-trips-template">
-          <tr>
-            <td><%- id %></td>
-            <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
-            <td><%- category %></td>
-            <td><%- continent %></td>
-            <td><%- weeks %></td>
-            <td><%- cost %></td>
+    <section>
+      <div id='filter-container' class='columns small-12'>
+        <form id='filter' class='columns small-5'>
+          <select id='filter-select' class='width35'>
+            <script type="text/template" id="filter-trips-template">
+              <option value='<%- item %>'><%- capitalized %></option>
+            </script>
+          </select>
+          <input type='text' id='filter-input' class='width55'/>
+        </form>
+      </div>
+      <table class='left-half'>
+        <thead>
+          <tr id='trip-headers'>
+            <script type="text/template" id="trip-headers-template">
+              <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
+            </script>
           </tr>
-        </script>
-      </tbody>
-    </table>
+        </thead>
+        <tbody id='all-trips'>
+          <script type="text/template" id="all-trips-template">
+            <tr>
+              <td><%- id %></td>
+              <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
+              <td><%- category %></td>
+              <td><%- continent %></td>
+              <td><%- weeks %></td>
+              <td><%- cost %></td>
+            </tr>
+          </script>
+        </tbody>
+      </table>
+    </section>
 
 
     <section id='show-trip' class='content right-half'>
diff --git a/src/app.js b/src/app.js
index 9f7d5be..b446338 100644
--- a/src/app.js
+++ b/src/app.js
@@ -106,7 +106,6 @@ const unSplitScreen = function unSplitScreen() {
 
 const highlightCurrentTrip = function highlightCurrentTrip(event) {
   const currentRow = $(event.currentTarget).parent().parents('tr:first').children();
-  console.log(currentRow);
   $('#all-trips tr td').removeClass('current-trip');
   $(currentRow).addClass('current-trip');
 };
@@ -138,6 +137,7 @@ const clearMessages = function clearMessages() {
 
 const addTripForm = function addTripForm() {
   clearContent();
+  splitScreen();
   addTripFields.forEach((item) => {
     $('#add-trip-form').append(formTemplate({field: item, lowercaseField: item}));
   });
@@ -166,6 +166,7 @@ const saveTrip = function saveTrip(event) {
 }
 
 const successfulTripSave = function successfulTripSave(trip) {
+  unSplitScreen();
   tripList.add(trip);
   referenceList.add(trip);
   addTripFields.forEach((field) => {
diff --git a/src/css/style.css b/src/css/style.css
index 13a6555..ad06504 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,4 +1,8 @@
 /* general */
+main {
+  height: 80vh;
+}
+
 .row {
   min-width: 100vw;
 }
@@ -15,6 +19,11 @@
   clear: both;
 }
 
+/*.scrollable {
+  height: 100%;
+  overflow: auto;
+}*/
+
 #status-messages {
   background-color: #dfdfdf;
 
@@ -27,6 +36,17 @@
   padding: .8rem;
 }
 
+/* filter form styling */
+.width35 {
+  display: inline-block;
+  width: 35%;
+}
+
+.width55 {
+  display: inline-block;
+  width: 55%;
+}
+
 /* table sorting styling */
 .current-sort-field {
   background-color: darkgrey;

From 237bc4301410445e548633cddfe936707f1d81a2 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 13:43:33 -0800
Subject: [PATCH 23/38] Give appropriate height to status messges

---
 src/css/style.css | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index ad06504..f31bd1e 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -19,11 +19,6 @@ main {
   clear: both;
 }
 
-/*.scrollable {
-  height: 100%;
-  overflow: auto;
-}*/
-
 #status-messages {
   background-color: #dfdfdf;
 
@@ -32,7 +27,6 @@ main {
 
   border-radius: 1rem;
   margin: 1rem;
-  height: 100%;
   padding: .8rem;
 }
 

From b8db86a1a4507c1414d43b24b727f6b2b2d63dec Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 13:46:06 -0800
Subject: [PATCH 24/38] Add header to reservation form

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

diff --git a/dist/index.html b/dist/index.html
index 06f622a..6c6c89c 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -64,6 +64,7 @@ <h5><%- cost %></h5>
       </script>
     </section>
     <section>
+      <h1 id='reserve-header' class='content right-half'></h1>
       <form id='reserve-trip-form' class='content right-half'>
       </form>
     </section>
diff --git a/src/app.js b/src/app.js
index b446338..294fe86 100644
--- a/src/app.js
+++ b/src/app.js
@@ -191,6 +191,7 @@ const failedSave = function failedSave(model, response) {
 
 const reserveForm = function reserveForm(event) {
   clearContent();
+  $('#reserve-header').append('Reserve');
   const tripId = $(event.currentTarget.attributes.tripid).val();
   $('#reserve-trip-form').attr('tripid', tripId);
   reservationFields.forEach((item) => {

From 17e8c8266de958c408b5b3d295c2d9363738f145 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 14:01:13 -0800
Subject: [PATCH 25/38] Make table of all trips scrollable, separate from the
 right half of the screen

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

diff --git a/dist/index.html b/dist/index.html
index 6c6c89c..f5f92cd 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -31,7 +31,7 @@ <h1 class='columns small-6'>BackTREK</h1>
         </form>
       </div>
       <table class='left-half'>
-        <thead>
+        <thead class='table'>
           <tr id='trip-headers'>
             <script type="text/template" id="trip-headers-template">
               <th class='sort <%- header %>'><a><%- header %></a><span class='sortorder'></span></th>
diff --git a/src/css/style.css b/src/css/style.css
index f31bd1e..d56b5f7 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,6 +1,6 @@
 /* general */
-main {
-  height: 80vh;
+body {
+  height: 99vh;
 }
 
 .row {
@@ -19,6 +19,40 @@ main {
   clear: both;
 }
 
+table.tableSection {
+  display: table;
+  width: 100%;
+}
+
+/*thead, tbody {
+  width: 100%;
+}*/
+
+thead {
+  overflow-y: scroll;
+  display: table;
+  table-layout: fixed;
+  /*width: calc(100% - 16px);*/
+  /* assuming scrollbar width as 16px */
+}
+
+tbody {
+  overflow: auto;
+  height: 100vh;
+  display: block;
+}
+
+tr {
+  width: 100%;
+  text-align: left;
+  display: table;
+  table-layout: fixed;
+}
+
+td {
+  overflow-x: scroll;
+}
+
 #status-messages {
   background-color: #dfdfdf;
 

From f110f0432ad17b0694e41f9c62cbac003f605538 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 14:19:42 -0800
Subject: [PATCH 26/38] Make trip details scrollable separate from table

---
 src/app.js        |  2 ++
 src/css/style.css | 35 +++++++++++++----------------------
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/app.js b/src/app.js
index 294fe86..74ebec3 100644
--- a/src/app.js
+++ b/src/app.js
@@ -111,6 +111,8 @@ const highlightCurrentTrip = function highlightCurrentTrip(event) {
 };
 
 const showTrip = function showTrip(event) {
+  $('#show-trip').addClass('show-right');
+  $('#show-trip').siblings().removeClass('show-right');
   highlightCurrentTrip(event);
   clearContent();
   splitScreen();
diff --git a/src/css/style.css b/src/css/style.css
index d56b5f7..f0c4e06 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,6 +1,6 @@
 /* general */
 body {
-  height: 99vh;
+  max-height: 99vh;
 }
 
 .row {
@@ -19,47 +19,38 @@ body {
   clear: both;
 }
 
-table.tableSection {
-  display: table;
-  width: 100%;
-}
-
-/*thead, tbody {
-  width: 100%;
-}*/
-
 thead {
-  overflow-y: scroll;
   display: table;
+  overflow-y: scroll;
   table-layout: fixed;
-  /*width: calc(100% - 16px);*/
-  /* assuming scrollbar width as 16px */
 }
 
 tbody {
-  overflow: auto;
-  height: 100vh;
   display: block;
+  height: 75vh;
+  overflow: auto;
 }
 
 tr {
-  width: 100%;
-  text-align: left;
   display: table;
   table-layout: fixed;
+  text-align: left;
+  width: 100%;
 }
 
-td {
+td, th {
   overflow-x: scroll;
 }
 
+.show-right {
+  height: 80vh;
+  overflow-y: scroll;
+}
+
 #status-messages {
   background-color: #dfdfdf;
-
-  /* Hide by default */
-  display: none;
-
   border-radius: 1rem;
+  display: none;
   margin: 1rem;
   padding: .8rem;
 }

From 936a87eb816586bb92eae745bc0d0fb92b6d4ff7 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 14:22:29 -0800
Subject: [PATCH 27/38] Change trip details scroll to only scroll the about
 paragraph

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

diff --git a/dist/index.html b/dist/index.html
index f5f92cd..f18e3f4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -60,7 +60,7 @@ <h3><%- name %></h3>
         <a id='reserve' tripid=<%- id %> href='#'>Reserve</a>
         <h5><%- weeks %> week<%- plural %></h5>
         <h5><%- cost %></h5>
-        <p><%- about %></p>
+        <p class='scrollable'><%- about %></p>
       </script>
     </section>
     <section>
diff --git a/src/css/style.css b/src/css/style.css
index f0c4e06..fd176b6 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -42,8 +42,8 @@ td, th {
   overflow-x: scroll;
 }
 
-.show-right {
-  height: 80vh;
+.scrollable {
+  max-height: 60vh;
   overflow-y: scroll;
 }
 

From f16cbd888de27318a5db714b13944527ce10513d Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 14:42:46 -0800
Subject: [PATCH 28/38] Display cost as money in table

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

diff --git a/dist/index.html b/dist/index.html
index f18e3f4..370f419 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -41,12 +41,11 @@ <h1 class='columns small-6'>BackTREK</h1>
         <tbody id='all-trips'>
           <script type="text/template" id="all-trips-template">
             <tr>
-              <td><%- id %></td>
               <td><a id=<%- id %> class='trip' href='#'><%- name %></a></td>
               <td><%- category %></td>
               <td><%- continent %></td>
               <td><%- weeks %></td>
-              <td><%- cost %></td>
+              <td>$<%- cost.toFixed(2) %></td>
             </tr>
           </script>
         </tbody>
diff --git a/src/app.js b/src/app.js
index 74ebec3..734d266 100644
--- a/src/app.js
+++ b/src/app.js
@@ -21,9 +21,8 @@ let filterTemplate;
 let filterCategory;
 
 const url = 'https://ada-backtrek-api.herokuapp.com/trips';
-const tableFields = ['id', 'name', 'category', 'continent', 'weeks', 'cost'];
+const tableFields = ['name', 'category', 'continent', 'weeks', 'cost'];
 const addTripFields = ['name', 'category', 'continent', 'weeks', 'cost', 'about'];
-const filterFields = ['name', 'category', 'continent', 'weeks', 'cost']
 const reservationFields = ['name', 'age', 'email'];
 
 const fetchTrips = function fetchTrips() {
@@ -55,7 +54,7 @@ const loadTripsTable = function loadTripsTable(list) {
 const loadFilters = function loadFilters() {
   $('#filter-select').empty();
   $('#filter').show();
-  filterFields.forEach((filter) => {
+  tableFields.forEach((filter) => {
     const capitalFilter = filter.charAt(0).toUpperCase() + filter.slice(1);
     $('#filter-select').append(filterTemplate({item: filter, capitalized: capitalFilter}))
   });
@@ -96,7 +95,8 @@ const filterTrips = function filterTrips(event) {
 };
 
 const splitScreen = function splitScreen() {
-  $('.left-half, .right-half').addClass('columns small-5 float-left');
+  $('.left-half').addClass('columns small-5 float-left');
+  $('.right-half').addClass('columns small-5 float-right');
 };
 
 const unSplitScreen = function unSplitScreen() {

From 2711296b4436d11addde00dc2181d7861bd76c9e Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 14:43:36 -0800
Subject: [PATCH 29/38] display cost as money in trip description

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

diff --git a/dist/index.html b/dist/index.html
index 370f419..57bd510 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -58,7 +58,7 @@ <h1 class='columns small-6'>BackTREK</h1>
         <h3><%- name %></h3>
         <a id='reserve' tripid=<%- id %> href='#'>Reserve</a>
         <h5><%- weeks %> week<%- plural %></h5>
-        <h5><%- cost %></h5>
+        <h5>$<%- cost.toFixed(2) %></h5>
         <p class='scrollable'><%- about %></p>
       </script>
     </section>

From 9ebb6e01c7866a26cdc6b3f4247437906b188367 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 16:06:25 -0800
Subject: [PATCH 30/38] Make add trip a modal that shows errors appropriately

---
 dist/index.html   | 12 +++++++-----
 package-lock.json |  5 +++++
 package.json      |  1 +
 src/app.js        | 40 ++++++++++++++++++++++++++++------------
 src/css/style.css | 10 +++++++++-
 5 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 57bd510..72b1113 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -4,13 +4,14 @@
   <meta charset="utf-8">
   <title>My JavaScript App</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
 </head>
 <body>
   <header>
     <h1 class='columns small-6'>BackTREK</h1>
     <span id='buttons' class='float-right'>
       <a id='load-trips' class='button' href='#'>All Trips</a>
-      <a id='add-trip' class='button' href='#'>Add Trip</a>
+      <a id='add-trip' class='button' href="#add-trip-modal" rel="modal:open">Add Trip</a>
     </span>
   </header>
   <main class='row clear'>
@@ -63,15 +64,16 @@ <h5>$<%- cost.toFixed(2) %></h5>
       </script>
     </section>
     <section>
-      <h1 id='reserve-header' class='content right-half'></h1>
+      <h2 id='reserve-header' class='content right-half'></h2>
       <form id='reserve-trip-form' class='content right-half'>
       </form>
     </section>
-    <section>
-      <form id='add-trip-form' class='content right-half'>
+    <section class='modal' id='add-trip-modal'>
+      <h2 id='add-trip-header' class='content'></h2>
+      <form id='add-trip-form' class='content'>
         <script type="text/template" id="form-template">
           <section>
-            <label><%- field %></label>
+            <label><%- field %><span id=<%- `label-${field}` %>></span></label>
             <input type='text' id=<%- field %> name=<%- field %> />
           </section>
         </script>
diff --git a/package-lock.json b/package-lock.json
index f830985..74b17bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5017,6 +5017,11 @@
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
       "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
     },
+    "jquery-modal": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/jquery-modal/-/jquery-modal-0.9.1.tgz",
+      "integrity": "sha512-04C0nhhFBDkFt3VUQaZDOXWPifpJHm8JjhgydePV1drI9ZvOTkIRLVOzCy2mo5/bcWqPU8UhLq4L6Pdex//lvw=="
+    },
     "js-base64": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.3.2.tgz",
diff --git a/package.json b/package.json
index 5860ddc..9035c63 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
   "dependencies": {
     "backbone": "^1.3.3",
     "jquery": "^3.2.1",
+    "jquery-modal": "^0.9.1",
     "underscore": "^1.8.3"
   }
 }
diff --git a/src/app.js b/src/app.js
index 734d266..53a3b44 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,6 +1,7 @@
 // Vendor Modules
 import $ from 'jquery';
 import _ from 'underscore';
+import 'jquery-modal';
 
 // CSS
 import './css/foundation.css';
@@ -139,11 +140,11 @@ const clearMessages = function clearMessages() {
 
 const addTripForm = function addTripForm() {
   clearContent();
-  splitScreen();
+  $('#add-trip-header').append('Add Trip');
   addTripFields.forEach((item) => {
-    $('#add-trip-form').append(formTemplate({field: item, lowercaseField: item}));
+    $('#add-trip-form').append(formTemplate({field: item}));
   });
-  $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
+  $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section>');
 }
 
 const saveTrip = function saveTrip(event) {
@@ -156,19 +157,22 @@ const saveTrip = function saveTrip(event) {
   if (trip.isValid()) {
     trip.save({}, {
       success: successfulTripSave,
-      error: failedSave,
+      error: failedTripSave,
     })
   } else {
-    $('#status-messages ul').empty();
-      for (let error in trip.validationError) {
-        trip.validationError[error].forEach((message) => $('#status-messages ul').append(`<li>${message}</li>`));
-      }
-      $('#status-messages').show();
+    $('#add-trip-form input').removeClass('input-error');
+    $('#add-trip-form label span').empty();
+    for (let error in trip.validationError) {
+      trip.validationError[error].forEach((message) => {
+        $(`#add-trip-form label span#label-${error}`).append(`: ${message}`);
+      });
+      $(`#add-trip-form input#${error}`).addClass('input-error');
+    }
   }
 }
 
 const successfulTripSave = function successfulTripSave(trip) {
-  unSplitScreen();
+  $.modal.close();
   tripList.add(trip);
   referenceList.add(trip);
   addTripFields.forEach((field) => {
@@ -179,7 +183,7 @@ const successfulTripSave = function successfulTripSave(trip) {
   $('#status-messages').show();
 }
 
-const failedSave = function failedSave(model, response) {
+const failedTripSave = function failedTripSave(model, response) {
   model.destroy
   $('#status-messages ul').empty();
   const errors = response.responseJSON.errors;
@@ -215,7 +219,7 @@ const saveReservation = function saveReservation(event) {
   if (reservation.isValid()) {
     reservation.save({}, {
       success: successfulReservationSave,
-      error: failedSave,
+      error: failedReservationSave,
     })
   } else {
     $('#status-messages ul').empty();
@@ -237,6 +241,18 @@ const successfulReservationSave = function successfulReservationSave(reservation
   showTrip(fakeEvent);
 }
 
+const failedReservationSave = function failedReservationSave(model, response) {
+  model.destroy
+  $('#status-messages ul').empty();
+  const errors = response.responseJSON.errors;
+  for (let key in errors) {
+    errors[key].forEach((issue) => {
+      $('#status-messages ul').append(`<li>${key}: ${issue}</li>`);
+    })
+  }
+  $('#status-messages').show();
+}
+
 const sortTrips = function sortTrips() {
   const classes = $(this).attr('class').split(/\s+/);
   let sortClass;
diff --git a/src/css/style.css b/src/css/style.css
index fd176b6..63c5211 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -27,7 +27,7 @@ thead {
 
 tbody {
   display: block;
-  height: 75vh;
+  height: 76vh;
   overflow: auto;
 }
 
@@ -55,6 +55,14 @@ td, th {
   padding: .8rem;
 }
 
+.input-error {
+  background-color: #ffbbb7;
+}
+
+.input-error:focus {
+  background-color: #ffbbb7;
+}
+
 /* filter form styling */
 .width35 {
   display: inline-block;

From 5da855fec6af61f3d991ae41c4ecfeb61f37f86c Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 16:17:50 -0800
Subject: [PATCH 31/38] Change width from 5 columns to 6 for split screen
 elements

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

diff --git a/src/app.js b/src/app.js
index 53a3b44..babaa2e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -96,12 +96,12 @@ const filterTrips = function filterTrips(event) {
 };
 
 const splitScreen = function splitScreen() {
-  $('.left-half').addClass('columns small-5 float-left');
-  $('.right-half').addClass('columns small-5 float-right');
+  $('.left-half').addClass('columns small-6 float-left');
+  $('.right-half').addClass('columns small-6 float-right');
 };
 
 const unSplitScreen = function unSplitScreen() {
-  $('.left-half, .right-half').removeClass('columns small-5 float-left');
+  $('.left-half, .right-half').removeClass('columns small-6 float-left');
   $('#filter-input').val('');
 }
 

From 1da9f100217569c1f9dbc55c5d30d89f65676fe4 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Fri, 1 Dec 2017 16:24:09 -0800
Subject: [PATCH 32/38] Change table cell overflow

---
 src/css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/style.css b/src/css/style.css
index 63c5211..dba3c95 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -39,7 +39,7 @@ tr {
 }
 
 td, th {
-  overflow-x: scroll;
+  overflow-x: hidden;
 }
 
 .scrollable {

From 3a3995616e01430144b4296777c5537217e4c028 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Sun, 3 Dec 2017 20:17:37 -0800
Subject: [PATCH 33/38] Refactor form error display

---
 src/app.js | 44 +++++++++++++++-----------------------------
 1 file changed, 15 insertions(+), 29 deletions(-)

diff --git a/src/app.js b/src/app.js
index babaa2e..19782cb 100644
--- a/src/app.js
+++ b/src/app.js
@@ -160,14 +160,18 @@ const saveTrip = function saveTrip(event) {
       error: failedTripSave,
     })
   } else {
-    $('#add-trip-form input').removeClass('input-error');
-    $('#add-trip-form label span').empty();
-    for (let error in trip.validationError) {
-      trip.validationError[error].forEach((message) => {
-        $(`#add-trip-form label span#label-${error}`).append(`: ${message}`);
-      });
-      $(`#add-trip-form input#${error}`).addClass('input-error');
-    }
+    displayFormErrors('add-trip-form', trip.validationError)
+  }
+}
+
+const displayFormErrors = function displayFormErrors(formId, errors) {
+  $(`#${formId} input`).removeClass('input-error');
+  $(`#${formId} label span`).empty();
+  for (let error in errors) {
+    errors[error].forEach((message) => {
+      $(`#${formId} label span#label-${error}`).append(`: ${message}`);
+    });
+    $(`#${formId} input#${error}`).addClass('input-error');
   }
 }
 
@@ -185,14 +189,7 @@ const successfulTripSave = function successfulTripSave(trip) {
 
 const failedTripSave = function failedTripSave(model, response) {
   model.destroy
-  $('#status-messages ul').empty();
-  const errors = response.responseJSON.errors;
-  for (let key in errors) {
-    errors[key].forEach((issue) => {
-      $('#status-messages ul').append(`<li>${key}: ${issue}</li>`);
-    })
-  }
-  $('#status-messages').show();
+  displayFormErrors('add-trip-form', response.responseJSON.errors);
 }
 
 const reserveForm = function reserveForm(event) {
@@ -222,11 +219,7 @@ const saveReservation = function saveReservation(event) {
       error: failedReservationSave,
     })
   } else {
-    $('#status-messages ul').empty();
-      for (let error in reservation.validationError) {
-        reservation.validationError[error].forEach((message) => $('#status-messages ul').append(`<li>${message}</li>`));
-      }
-      $('#status-messages').show();
+    displayFormErrors('reserve-trip-form', reservation.validationError);
   }
 }
 
@@ -243,14 +236,7 @@ const successfulReservationSave = function successfulReservationSave(reservation
 
 const failedReservationSave = function failedReservationSave(model, response) {
   model.destroy
-  $('#status-messages ul').empty();
-  const errors = response.responseJSON.errors;
-  for (let key in errors) {
-    errors[key].forEach((issue) => {
-      $('#status-messages ul').append(`<li>${key}: ${issue}</li>`);
-    })
-  }
-  $('#status-messages').show();
+  displayFormErrors('reserve-trip-form', response.responseJSON.errors);
 }
 
 const sortTrips = function sortTrips() {

From ae3dd73abe146c9f611932db44dd625d3d7a8e33 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Sun, 3 Dec 2017 20:26:24 -0800
Subject: [PATCH 34/38] Refactor display of status messages

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

diff --git a/src/app.js b/src/app.js
index 19782cb..38f2bc8 100644
--- a/src/app.js
+++ b/src/app.js
@@ -62,7 +62,7 @@ const loadFilters = function loadFilters() {
   $('#filter-select').prop('selectedIndex', -1);
 };
 
-const setfilterCategory = function setfilterCategory() {
+const setFilterCategory = function setFilterCategory() {
   const capital = $('#filter-select').find(':selected').text();
   filterCategory = capital.charAt(0).toLowerCase() + capital.slice(1);
 };
@@ -175,6 +175,12 @@ const displayFormErrors = function displayFormErrors(formId, errors) {
   }
 }
 
+const displayStatusMessages = function displayStatusMessages(model) {
+  $('#status-messages ul').empty();
+  $('#status-messages ul').append(`<li>${model.get('name')} added!</li>`);
+  $('#status-messages').show();
+};
+
 const successfulTripSave = function successfulTripSave(trip) {
   $.modal.close();
   tripList.add(trip);
@@ -182,9 +188,7 @@ const successfulTripSave = function successfulTripSave(trip) {
   addTripFields.forEach((field) => {
     $(`#add-trip-form input[name=${field}]`).val('');
   });
-  $('#status-messages ul').empty();
-  $('#status-messages ul').append(`<li>${trip.get('name')} added!</li>`);
-  $('#status-messages').show();
+  displayStatusMessages(trip);
 }
 
 const failedTripSave = function failedTripSave(model, response) {
@@ -227,9 +231,7 @@ const successfulReservationSave = function successfulReservationSave(reservation
   reservationFields.forEach((field) => {
     $(`#reserve-trip-form input[name=${field}]`).val('');
   });
-  $('#status-messages ul').empty();
-  $('#status-messages ul').append(`<li>A space reserved for ${reservation.get('name')}!</li>`);
-  $('#status-messages').show();
+  displayStatusMessages(reservation);
   const fakeEvent = {currentTarget: {id: response.trip_id}};
   showTrip(fakeEvent);
 }
@@ -274,7 +276,7 @@ $(document).ready( () => {
   $('#load-trips').on('click', loadTripsTable, referenceList);
   tripList.on('update', syncReferenceList);
   referenceList.on('update', loadTripsTable, referenceList);
-  $('#filter-select').on('change', setfilterCategory);
+  $('#filter-select').on('change', setFilterCategory);
   $('#filter-input').on('input', filterTrips);
   $('#all-trips').on('click', '.trip', showTrip);
   $('thead').on('click', '.sort', sortTrips);

From 9c5896b46eaa6eb74d34730cc25a69b33fcb7767 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Sun, 3 Dec 2017 20:38:41 -0800
Subject: [PATCH 35/38] Group handlers for click event on #load-trips

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

diff --git a/src/app.js b/src/app.js
index 38f2bc8..19e0140 100644
--- a/src/app.js
+++ b/src/app.js
@@ -271,9 +271,14 @@ $(document).ready( () => {
   showTripTemplate = _.template($('#show-trip-template').html());
   formTemplate = _.template($('#form-template').html());
   filterTemplate = _.template($('#filter-trips-template').html());
-  $('#load-trips').on('click', unSplitScreen);
-  $('#load-trips').on('click', fetchTrips);
-  $('#load-trips').on('click', loadTripsTable, referenceList);
+  $('#load-trips').on('click', function() {
+    unSplitScreen();
+    fetchTrips();
+    loadTripsTable(referenceList);
+  });
+  // $('#load-trips').on('click', unSplitScreen);
+  // $('#load-trips').on('click', fetchTrips);
+  // $('#load-trips').on('click', loadTripsTable, referenceList);
   tripList.on('update', syncReferenceList);
   referenceList.on('update', loadTripsTable, referenceList);
   $('#filter-select').on('change', setFilterCategory);

From 3507b04e1cac896c150442dae404a44df31b232a Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Sun, 3 Dec 2017 21:56:55 -0800
Subject: [PATCH 36/38] Refactored functions to increase readability, added url
 to reservation initialize

---
 dist/index.html               |  2 +-
 src/app.js                    | 89 +++++++++++------------------------
 src/app/models/reservation.js |  6 +--
 3 files changed, 32 insertions(+), 65 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 72b1113..4c8e988 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -64,7 +64,7 @@ <h5>$<%- cost.toFixed(2) %></h5>
       </script>
     </section>
     <section>
-      <h2 id='reserve-header' class='content right-half'></h2>
+      <h2 id='reserve-trip-header' class='content right-half'></h2>
       <form id='reserve-trip-form' class='content right-half'>
       </form>
     </section>
diff --git a/src/app.js b/src/app.js
index 19e0140..59b8ca7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -37,17 +37,13 @@ const syncReferenceList = function syncReferenceList() {
 
 const renderTrips = function renderTrips(list) {
   $('#all-trips').empty();
-  list.forEach((trip) => {
-    $('#all-trips').append(allTripsTemplate(trip.attributes));
-  });
+  list.forEach((trip) => $('#all-trips').append(allTripsTemplate(trip.attributes)));
 };
 
 const loadTripsTable = function loadTripsTable(list) {
   $('#trip-headers').html('');
   clearContent();
-  tableFields.forEach((field) => {
-    $('#trip-headers').append(tripHeadersTemplate({header: field}))
-  });
+  tableFields.forEach((field) => $('#trip-headers').append(tripHeadersTemplate({header: field})));
   renderTrips(list);
   loadFilters();
 };
@@ -75,18 +71,14 @@ const filterTrips = function filterTrips(event) {
     case 'category':
     case 'continent':
       filterInput = filterInput.toLowerCase();
-      filteredTrips = tripList.models.filter(function(trip) {
-        return trip.attributes[filterCategory].toLowerCase().includes(filterInput);
-      });
+      filteredTrips = tripList.models.filter(trip => trip.attributes[filterCategory].toLowerCase().includes(filterInput));
       referenceList.reset(filteredTrips);
       renderTrips(referenceList);
       break;
     case 'weeks':
     case 'cost':
       filterInput = parseFloat(filterInput);
-      filteredTrips = tripList.models.filter(function(trip) {
-        return trip.attributes[filterCategory] <= filterInput;
-      });
+      filteredTrips = tripList.models.filter(trip => trip.attributes[filterCategory] <= filterInput);
       referenceList.reset(filteredTrips);
       renderTrips(referenceList);
       break;
@@ -120,11 +112,7 @@ const showTrip = function showTrip(event) {
   const tripId = event.currentTarget.id;
   const tripUrl = `${url}/${tripId}`;
   $.get(tripUrl, (response) => {
-    if (response.weeks === 1) {
-      response.plural = ''
-    } else {
-      response.plural = 's'
-    }
+    response.plural = (response.weeks === 1) ? '' : 's';
     $('#show-trip').append(showTripTemplate(response));
   })
 };
@@ -138,22 +126,24 @@ const clearMessages = function clearMessages() {
   $('#status-messages').hide();
 };
 
-const addTripForm = function addTripForm() {
+const loadFormFields = function loadFormFields(formId, formFieldsArray) {
   clearContent();
-  $('#add-trip-header').append('Add Trip');
-  addTripFields.forEach((item) => {
-    $('#add-trip-form').append(formTemplate({field: item}));
+  formFieldsArray.forEach((item) => {
+    $(`#${formId}`).append(formTemplate({field: item}));
   });
-  $('#add-trip-form').append('<section><button type="submit" class="button">Submit</button></section>');
+  $(`#${formId}`).append('<section><button type="submit" class="button">Submit</button></section>');
+}
+
+const addTripForm = function addTripForm() {
+  loadFormFields('add-trip-form', addTripFields);
+  $('#add-trip-header').append('Add Trip');
 }
 
 const saveTrip = function saveTrip(event) {
   event.preventDefault();
-  const tripData = {};
-  addTripFields.forEach((field) => {
-    tripData[field] = $(`#add-trip-form input[name=${field}]`).val();
-  });
-  const trip = new Trip(tripData);
+  const data = {};
+  addTripFields.forEach((field) => data[field] = $(`#add-trip-form input[name=${field}]`).val());
+  const trip = new Trip(data);
   if (trip.isValid()) {
     trip.save({}, {
       success: successfulTripSave,
@@ -197,26 +187,17 @@ const failedTripSave = function failedTripSave(model, response) {
 }
 
 const reserveForm = function reserveForm(event) {
-  clearContent();
-  $('#reserve-header').append('Reserve');
-  const tripId = $(event.currentTarget.attributes.tripid).val();
-  $('#reserve-trip-form').attr('tripid', tripId);
-  reservationFields.forEach((item) => {
-    $('#reserve-trip-form').append(formTemplate({field: item, lowercaseField: item}));
-  });
-  $('#reserve-trip-form').append('<section><button type="submit" class="button">Submit</button></section></form>');
+  loadFormFields('reserve-trip-form', reservationFields);
+  $('#reserve-trip-header').append('Reserve');
+  $('#reserve-trip-form').attr('tripid', $(event.currentTarget.attributes.tripid).val());
 };
 
 const saveReservation = function saveReservation(event) {
   event.preventDefault();
-  const baseUrl = 'https://ada-backtrek-api.herokuapp.com/trips';
   const tripId = $(event.currentTarget.attributes.tripid).val();
-  const finalUrl = `${baseUrl}/${tripId}/reservations`
-  const reservationData = {};
-  reservationFields.forEach((field) => {
-    reservationData[field] = $(`#reserve-trip-form input[name=${field}]`).val();
-  });
-  const reservation = new Reservation(reservationData, {url: finalUrl});
+  const data = {};
+  reservationFields.forEach((field) => data[field] = $(`#reserve-trip-form input[name=${field}]`).val());
+  const reservation = new Reservation(data, {trip: tripId});
   if (reservation.isValid()) {
     reservation.save({}, {
       success: successfulReservationSave,
@@ -228,9 +209,7 @@ const saveReservation = function saveReservation(event) {
 }
 
 const successfulReservationSave = function successfulReservationSave(reservation, response) {
-  reservationFields.forEach((field) => {
-    $(`#reserve-trip-form input[name=${field}]`).val('');
-  });
+  reservationFields.forEach((field) => $(`#reserve-trip-form input[name=${field}]`).val(''));
   displayStatusMessages(reservation);
   const fakeEvent = {currentTarget: {id: response.trip_id}};
   showTrip(fakeEvent);
@@ -243,25 +222,16 @@ const failedReservationSave = function failedReservationSave(model, response) {
 
 const sortTrips = function sortTrips() {
   const classes = $(this).attr('class').split(/\s+/);
-  let sortClass;
-  for (let i = 0; i < classes.length && sortClass === undefined; i += 1) {
-    if (tableFields.includes(classes[i])) {
-      sortClass = classes[i];
-    }
-  }
-  referenceList.comparator = sortClass;
+  referenceList.comparator = classes.find(thisClass => tableFields.includes(thisClass));
   $('.sortorder').empty();
   if (classes.includes('desc')) {
-    const descModels = referenceList.models.reverse();
-    renderTrips(descModels);
+    renderTrips(referenceList.models.reverse());
     $(this).removeClass('desc');
-    $(`.${sortClass} .sortorder`).html('&#x25B2');
   } else {
-    referenceList.sort();
+    renderTrips(referenceList.sort());
     $(this).addClass('desc').siblings().removeClass('desc');
-    renderTrips(referenceList);
-    $(`.${sortClass} .sortorder`).html('&#x25BC');
   }
+  $(`.${referenceList.comparator} .sortorder`).html($(this).hasClass('desc') ? '&#x25BC': '&#x25B2');
   $(this).addClass('current-sort-field').siblings().removeClass('current-sort-field');
 }
 
@@ -276,9 +246,6 @@ $(document).ready( () => {
     fetchTrips();
     loadTripsTable(referenceList);
   });
-  // $('#load-trips').on('click', unSplitScreen);
-  // $('#load-trips').on('click', fetchTrips);
-  // $('#load-trips').on('click', loadTripsTable, referenceList);
   tripList.on('update', syncReferenceList);
   referenceList.on('update', loadTripsTable, referenceList);
   $('#filter-select').on('change', setFilterCategory);
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
index e0e4615..f2058ff 100644
--- a/src/app/models/reservation.js
+++ b/src/app/models/reservation.js
@@ -1,11 +1,11 @@
 import Backbone from 'backbone';
 
-const Trip = Backbone.Model.extend({
+const Reservation = Backbone.Model.extend({
   url() {
     return this.url;
   },
   initialize(attributes, options) {
-    this.url = options.url;
+    this.url = `https://ada-backtrek-api.herokuapp.com/trips/${options.trip}/reservations`;
   },
   validate(attributes) {
     const errors = {};
@@ -26,4 +26,4 @@ const Trip = Backbone.Model.extend({
   },
 });
 
-export default Trip;
+export default Reservation;

From af702eb055d6a196620ec4f064097f61f9a62228 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Sun, 3 Dec 2017 22:00:07 -0800
Subject: [PATCH 37/38] Remove extraneous line

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

diff --git a/src/app.js b/src/app.js
index 59b8ca7..166cc93 100644
--- a/src/app.js
+++ b/src/app.js
@@ -109,8 +109,7 @@ const showTrip = function showTrip(event) {
   highlightCurrentTrip(event);
   clearContent();
   splitScreen();
-  const tripId = event.currentTarget.id;
-  const tripUrl = `${url}/${tripId}`;
+  const tripUrl = `${url}/${event.currentTarget.id}`;
   $.get(tripUrl, (response) => {
     response.plural = (response.weeks === 1) ? '' : 's';
     $('#show-trip').append(showTripTemplate(response));

From 298a87b5d2df77ddd192104ba7db9bd17f6cef42 Mon Sep 17 00:00:00 2001
From: Victoria Sawchuk <vtsawchuk@gmail.com>
Date: Sun, 3 Dec 2017 22:02:49 -0800
Subject: [PATCH 38/38] Chain adding and removing classes

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

diff --git a/src/app.js b/src/app.js
index 166cc93..a17622e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -104,8 +104,7 @@ const highlightCurrentTrip = function highlightCurrentTrip(event) {
 };
 
 const showTrip = function showTrip(event) {
-  $('#show-trip').addClass('show-right');
-  $('#show-trip').siblings().removeClass('show-right');
+  $('#show-trip').addClass('show-right').siblings().removeClass('show-right');
   highlightCurrentTrip(event);
   clearContent();
   splitScreen();
