From e203aaf428d7deb56301d31cef5526ae97e4bf32 Mon Sep 17 00:00:00 2001
From: Mariana <lmarianarp@gmail.com>
Date: Wed, 29 Nov 2017 00:00:57 -0800
Subject: [PATCH 1/4] can see the list of trips

---
 dist/index.html                  | 46 ++++++++++++++++++++++++++++++++
 src/app.js                       | 43 ++++++++++++++++++++++++++---
 src/app/collections/trip_list.js | 10 +++++++
 src/app/models/details.js        |  7 +++++
 src/app/models/trip.js           |  7 +++++
 5 files changed, 110 insertions(+), 3 deletions(-)
 create mode 100644 src/app/collections/trip_list.js
 create mode 100644 src/app/models/details.js
 create mode 100644 src/app/models/trip.js

diff --git a/dist/index.html b/dist/index.html
index b873b1e..d0d6ec3 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -11,6 +11,52 @@
   </header>
   <main>
 
+    <section class="columns large-8 small-12">
+      <h2>Trip Options!</h2>
+
+      <table>
+        <thead>
+          <th class="sort name">Name</th>
+          <th class="sort continent">Continent</th>
+          <th class="sort category">Category</th>
+          <th class="sort weeks">Weeks</th>
+          <th class="sort cost">Cost</th>
+        </thead>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
+
+    <script type="text/template" id="trip-template">
+  <tr class="trip">
+    <td>
+      <%- name %>
+    </td>
+    <td>
+      <%- continent %>
+    </td>
+    <td>
+      <%- category %>
+    </td>
+    <td>
+      <%- weeks %>
+    </td>
+    <td>
+      <%- cost %>
+    </td>
+  </tr>
+</script>
+
+
+<script type="text/template" id="details-template">
+<h2>
+  <%- name %>
+</h2>
+<p>
+  <%- about %>
+</p>
+</script>
+
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index e7af594..965bdee 100644
--- a/src/app.js
+++ b/src/app.js
@@ -8,6 +8,43 @@ import './css/style.css';
 
 console.log('it loaded!');
 
-$(document).ready( () => {
-  $('main').html('<h1>Hello World!</h1>');
-});
+import TripList from './app/collections/trip_list';
+
+import Trip from './app/models/trip';
+
+const tripList = new TripList();
+const tripDetails = new Trip();
+
+const render = function render(tripList) {
+  // iterate through the bookList, generate HTML
+  // for each model and attatch it to the DOM
+  const tripTableElement = $('#trip-list');
+  tripTableElement.html('');
+
+  tripList.forEach((trip) => {
+    const generatedHTML = tripTemplate(trip.attributes);
+    tripTableElement.append(generatedHTML);
+  })};
+
+  const renderDetails = function renderDetails(oneTrip){
+    const detailsElemet = $('#details-template');
+    detailsElemet.html('');
+
+    const generatedHTML = detailsTemplate(tripDetails.attributes);
+    detailsElemet.append(generatedHTML);
+  };
+
+
+  let tripTemplate;
+  let detailsTemplate;
+
+  $(document).ready( () => {
+    // When fetch gets back from the API call, it will add books
+    // to the list and then trigger an 'update' event
+    tripTemplate = _.template($('#trip-template').html());
+    console.log(`About to fetch data from ${ tripDetails.url }`);
+
+    // detailsTemplate = _.template($('#details-template').html());
+    tripList.on('update', render);
+    tripList.fetch();
+  });
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
new file mode 100644
index 0000000..d28b26b
--- /dev/null
+++ b/src/app/collections/trip_list.js
@@ -0,0 +1,10 @@
+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/details.js b/src/app/models/details.js
new file mode 100644
index 0000000..56bee2b
--- /dev/null
+++ b/src/app/models/details.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Details = Backbone.Model.extend({
+  url: `https://ada-backtrek-api.herokuapp.com/trips/1`
+});
+
+export default Details;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
new file mode 100644
index 0000000..6085bea
--- /dev/null
+++ b/src/app/models/trip.js
@@ -0,0 +1,7 @@
+import Backbone from 'backbone';
+
+const Trip = Backbone.Model.extend({
+  url: `https://ada-backtrek-api.herokuapp.com/trips/1`
+});
+
+export default Trip;

From ae940f07679f2c5d8312b648707bb5726aae0106 Mon Sep 17 00:00:00 2001
From: Mariana <lmarianarp@gmail.com>
Date: Wed, 29 Nov 2017 16:48:19 -0800
Subject: [PATCH 2/4] show details of a trip

---
 dist/index.html        |  7 +++--
 src/app.js             | 64 +++++++++++++++++++++++++++++-------------
 src/app/models/trip.js |  6 +++-
 3 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index d0d6ec3..0e4a812 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -10,7 +10,8 @@
 
   </header>
   <main>
-
+<section id="oneTrip">
+</section>
     <section class="columns large-8 small-12">
       <h2>Trip Options!</h2>
 
@@ -28,8 +29,8 @@ <h2>Trip Options!</h2>
     </section>
 
     <script type="text/template" id="trip-template">
-  <tr class="trip">
-    <td>
+  <tr class="trip" id="<%- `trip${id }`%>" >
+    <td >
       <%- name %>
     </td>
     <td>
diff --git a/src/app.js b/src/app.js
index 965bdee..bf42805 100644
--- a/src/app.js
+++ b/src/app.js
@@ -13,7 +13,6 @@ import TripList from './app/collections/trip_list';
 import Trip from './app/models/trip';
 
 const tripList = new TripList();
-const tripDetails = new Trip();
 
 const render = function render(tripList) {
   // iterate through the bookList, generate HTML
@@ -24,27 +23,54 @@ const render = function render(tripList) {
   tripList.forEach((trip) => {
     const generatedHTML = tripTemplate(trip.attributes);
     tripTableElement.append(generatedHTML);
-  })};
+    $(`#trip${trip.attributes.id}`).on('click', (event) => {
+      let tripDetails = new Trip({id: `${trip.attributes.id}`});
+      console.log(tripDetails.url());
+      // tripDetails.on('update', renderDetails);
+      tripDetails.fetch({'success': renderDetails });
+      // console.log(tripDetails);
+      // renderDetails(tripDetails);
+    });
 
-  const renderDetails = function renderDetails(oneTrip){
-    const detailsElemet = $('#details-template');
-    detailsElemet.html('');
+  });
+};
 
-    const generatedHTML = detailsTemplate(tripDetails.attributes);
-    detailsElemet.append(generatedHTML);
-  };
+const renderDetails = function renderDetails(tripDetails){
+  // tripDetails= new Trip();
+  console.log('inside render deteails');
+  console.log(tripDetails.attributes)
 
 
-  let tripTemplate;
-  let detailsTemplate;
+  const detailsElement = $('#oneTrip');
+  console.log('found detailsElement?', detailsElement)
+  detailsElement.html('');
 
-  $(document).ready( () => {
-    // When fetch gets back from the API call, it will add books
-    // to the list and then trigger an 'update' event
-    tripTemplate = _.template($('#trip-template').html());
-    console.log(`About to fetch data from ${ tripDetails.url }`);
+  // const generatedHTML = $(detailsTemplate(tripDetails.attributes));
+  const generatedHTML = detailsTemplate(tripDetails.attributes);
+  console.log(generatedHTML);
+  // console.log(tripDetails.attributes);
+  detailsElement.append(generatedHTML);
+};
 
-    // detailsTemplate = _.template($('#details-template').html());
-    tripList.on('update', render);
-    tripList.fetch();
-  });
+
+let tripTemplate;
+let detailsTemplate;
+
+$(document).ready( () => {
+  // When fetch gets back from the API call, it will add books
+  // to the list and then trigger an 'update' event
+  tripTemplate = _.template($('#trip-template').html());
+  detailsTemplate = _.template($('#details-template').html());
+  // console.log(`About to fetch data from ${ tripDetails.url() }`);
+
+  // detailsTemplate = _.template($('#details-template').html());
+  tripList.on('update', render);
+  tripList.fetch();
+
+
+
+
+
+  // tripDetails.fetch();
+  // tripDetails.on()
+});
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 6085bea..4314e8f 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -1,7 +1,11 @@
 import Backbone from 'backbone';
 
 const Trip = Backbone.Model.extend({
-  url: `https://ada-backtrek-api.herokuapp.com/trips/1`
+  url: function() {
+    return `https://ada-backtrek-api.herokuapp.com/trips/${this.id}`
+  }
+  // url: `https://ada-backtrek-api.herokuapp.com/trips/${id}`
+  // url: `https://ada-backtrek-api.herokuapp.com/trips/`
 });
 
 export default Trip;

From a186f59e97a20f7a5c326b4bbcabb6c2232eac47 Mon Sep 17 00:00:00 2001
From: Mariana <lmarianarp@gmail.com>
Date: Fri, 1 Dec 2017 16:05:13 -0800
Subject: [PATCH 3/4] make reservation

---
 dist/index.html                  |  64 +++++++++++-
 src/app.js                       | 174 ++++++++++++++++++++++++++++---
 src/app/collections/trip_list.js |   3 +-
 src/app/models/reservation.js    |  11 ++
 src/app/models/trip.js           |   2 +-
 5 files changed, 238 insertions(+), 16 deletions(-)
 create mode 100644 src/app/models/reservation.js

diff --git a/dist/index.html b/dist/index.html
index 0e4a812..efe74f4 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -7,9 +7,41 @@
 </head>
 <body>
   <header>
-
+    <!-- <button class="button" id="createTrip"> Create trip! </button> -->
   </header>
   <main>
+    <section id="status-messages">
+        <!-- <button class="clear float-right">
+          <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
+        </button> -->
+
+        <ul>
+        </ul>
+      </section>
+    <aside class="columns large-4 small-12">
+  <h2>Add a Trip</h2>
+  <form id="add-trip-form">
+    <label for="name">Name</label>
+    <input type="text" name="name"></input>
+
+    <label for="continent">Continent</label>
+    <input type="text" name="continent"></input>
+
+    <label for="about">About</label>
+    <input type="text" name="about"></input>
+
+    <label for="category">Category</label>
+    <input type="text" name="category"></input>
+
+    <label for="weeks">Weeks</label>
+    <input type="number" name="weeks"></input>
+
+    <label for="cost">Cost</label>
+    <input type="number" name="cost"></input>
+
+    <input type="submit" value="Add it!" class="button"></input>
+  </form>
+</aside>
 <section id="oneTrip">
 </section>
     <section class="columns large-8 small-12">
@@ -49,15 +81,43 @@ <h2>Trip Options!</h2>
 </script>
 
 
-<script type="text/template" id="details-template">
+<script type="text/template" id="details-template" class="columns large-4 small-8">
+
 <h2>
   <%- name %>
 </h2>
+
+<!-- <p class = 'tripId' id= `${<% id %>}`> -->
 <p>
   <%- about %>
 </p>
+<button class="button" id="goReservationForm">
+  Reserve this trip!
+</button>
+
+<div id="spaceReservationForm">
+</div>
+
+</script>
+
+
+
+<script type="text/template" id="reservationFormTemplate" class="columns large-4 small-8">
+<form id="reservation-form">
+<label for="name">Name:</label>
+<input type="text" name="name" required></input>
+<input type="hidden" name="trip_id" value = "<%- tripId %>"  >
+</input>
+<label for="email">Email:</label>
+<input type="email" name="email" required></input>
+<input id="submitForm" type="submit" class="button" value="Reserve Trip"></input>
+
+
 </script>
 
+
+
+
   </main>
   <footer>
 
diff --git a/src/app.js b/src/app.js
index bf42805..4df3ffe 100644
--- a/src/app.js
+++ b/src/app.js
@@ -11,9 +11,14 @@ console.log('it loaded!');
 import TripList from './app/collections/trip_list';
 
 import Trip from './app/models/trip';
+import Reservation from './app/models/reservation';
 
 const tripList = new TripList();
 
+const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];
+
+const RESERVATION_FIELDS = ['name', 'trip_id', 'email' ];
+
 const render = function render(tripList) {
   // iterate through the bookList, generate HTML
   // for each model and attatch it to the DOM
@@ -25,10 +30,14 @@ const render = function render(tripList) {
     tripTableElement.append(generatedHTML);
     $(`#trip${trip.attributes.id}`).on('click', (event) => {
       let tripDetails = new Trip({id: `${trip.attributes.id}`});
-      console.log(tripDetails.url());
+      // console.log(tripDetails.url());
       // tripDetails.on('update', renderDetails);
-      tripDetails.fetch({'success': renderDetails });
+      tripDetails.fetch({
+        success: renderDetails
+      });
       // console.log(tripDetails);
+
+
       // renderDetails(tripDetails);
     });
 
@@ -36,37 +45,178 @@ const render = function render(tripList) {
 };
 
 const renderDetails = function renderDetails(tripDetails){
-  // tripDetails= new Trip();
-  console.log('inside render deteails');
-  console.log(tripDetails.attributes)
-
-
-  const detailsElement = $('#oneTrip');
-  console.log('found detailsElement?', detailsElement)
-  detailsElement.html('');
+  // tripDetails= new Trip()
+  const $detailsElement = $('#oneTrip');
+  console.log('found detailsElement?', $detailsElement)
+  $detailsElement.html('');
 
   // const generatedHTML = $(detailsTemplate(tripDetails.attributes));
   const generatedHTML = detailsTemplate(tripDetails.attributes);
-  console.log(generatedHTML);
+  // console.log(generatedHTML);
+  // console.log(tripDetails.attributes);
+  $detailsElement.append(generatedHTML);
+
+  $('#goReservationForm').on('click', function(event) {
+    renderReservationForm(event, tripDetails);
+  });
+};
+
+const renderReservationForm = function renderReservationForm(event, tripDetails){
+  // console.log('In renderReservationForm');
   // console.log(tripDetails.attributes);
-  detailsElement.append(generatedHTML);
+  const tripId = tripDetails.attributes.id
+  const $spaceReservationForm = $('#spaceReservationForm');
+  $spaceReservationForm.html('');
+  const generatedHTML = reservationTemplate({tripId: tripId});
+  // console.log(generatedHTML);
+  $spaceReservationForm.append(generatedHTML);
+  // nuevas cosas
+  event.preventDefault();
+  $('#submitForm').on('click', reserveTripHandler);
+};
+
+
+const  reserveTripHandler = function reserveTripHandler(event){
+  event.preventDefault();
+  console.log('inside reserveTripHandler');
+  let reservationData = {};
+
+  RESERVATION_FIELDS.forEach((field) =>{
+    const inputElement = $(`#reservation-form input[name="${ field }"]`);
+    const value = inputElement.val();
+    reservationData[field] = value;
+    inputElement.val('');
+  });
+  const reservationEnterUser = new Reservation(reservationData);
+  console.log(`reservationEnterUser ${reservationEnterUser}`);
+  console.log(reservationEnterUser);
+  reservationEnterUser.save({}, { success: (model, response) => {
+    reportStatus('success', 'Make your bags. You reserve this trips Successfully!');
+    console.log("reservation went great");
+  }, error: (model, response) => {
+
+    const errors = response.responseJSON["errors"];
+    for (let field in errors) {
+      for (let problem of errors[field]) {
+        reportStatus('error', `${field}: ${problem}`);
+      }
+    }
+  }
+});
+};
+
+
+const addTripHandler = function(event) {
+  event.preventDefault();
+
+  const tripData = {};
+  TRIP_FIELDS.forEach((field) => {
+    // select the input corresponding to the field we want
+    const inputElement = $(`#add-trip-form input[name="${ field }"]`);
+    const value = inputElement.val();
+    tripData[field] = value;
+
+    inputElement.val('');
+  });
+
+
+  // const tripEnterUser = tripList.new(tripData);
+  const tripEnterUser =  new Trip(tripData);
+  // The first argument to .save is the attributes to save.
+  // If we leave it blank, it will save all the attributes!
+  // (Think of model.update in Rails, where it updates the
+  // model and saves to the DB in one step). We need the second
+  // argument for callbacks, so we pass in {} for the first.
+  tripEnterUser.save({}, {
+    success: (model, response) => {
+      console.log('Successfully saved trip!');
+      reportStatus('success', 'Successfully saved trip!');
+      // tripList.add(model);
+    },
+    error: (model, response) => {
+      const errors = response.responseJSON["errors"];
+      for (let field in errors) {
+        for (let problem of errors[field]) {
+          reportStatus('error', `${field}: ${problem}`);
+
+
+
+
+        }
+      }
+      // Since these errors come from a Rails server, the strucutre of our
+      // error handling looks very similar to what we did in Rails.
+      // const errors = response.responseJSON["errors"];
+      // for (let field in errors) {
+      //   for (let problem of errors[field]) {
+      //     reportStatus('error', `${field}: ${problem}`);
+      //   }
+      // }
+    },
+  });
 };
 
 
 let tripTemplate;
 let detailsTemplate;
+let reservationTemplate;
+
+// Clear status messages
+const clearStatus = function clearStatus() {
+  $('#status-messages ul').html('');
+  $('#status-messages').hide();
+};
+
+// Add a new status message
+const reportStatus = function reportStatus(status, message) {
+  console.log(`Reporting ${ status } status: ${ message }`);
+
+  // Should probably use an Underscore template here.
+  const statusHTML = `<li class="${ status }">${ message }</li>`;
+  // const close = `<button class="clear float-right">
+  //   close
+  // </button>`;
+  // note the symetry with clearStatus()
+  // $('#status-messages').append(close);
+  $('#status-messages ul').append(statusHTML);
+  $('#status-messages').show();
+};
 
 $(document).ready( () => {
   // When fetch gets back from the API call, it will add books
   // to the list and then trigger an 'update' event
   tripTemplate = _.template($('#trip-template').html());
   detailsTemplate = _.template($('#details-template').html());
+  reservationTemplate = _.template($('#reservationFormTemplate').html());
   // console.log(`About to fetch data from ${ tripDetails.url() }`);
 
   // detailsTemplate = _.template($('#details-template').html());
   tripList.on('update', render);
+
   tripList.fetch();
 
+  tripList.on('sort', render);
+
+  $('#add-trip-form').on('submit', addTripHandler);
+
+  TRIP_FIELDS.forEach((field) => {
+    const headerElement = $(`th.sort.${ field }`);
+    headerElement.on('click', (event) => {
+      console.log(`Sorting table by ${ field }`);
+      tripList.comparator = field;
+      tripList.sort();
+    });
+  });
+
+
+  $('#status-messages').on('click', clearStatus);
+
+
+
+
+
+
+
 
 
 
diff --git a/src/app/collections/trip_list.js b/src/app/collections/trip_list.js
index d28b26b..d77eb5f 100644
--- a/src/app/collections/trip_list.js
+++ b/src/app/collections/trip_list.js
@@ -3,7 +3,8 @@ import Trip from '../models/trip';
 
 const TripList = Backbone.Collection.extend({
   model: Trip,
-  url: 'https://ada-backtrek-api.herokuapp.com/trips'
+  url: 'https://ada-backtrek-api.herokuapp.com/trips/',
+  comparator: 'name',
 
 });
 
diff --git a/src/app/models/reservation.js b/src/app/models/reservation.js
new file mode 100644
index 0000000..356f933
--- /dev/null
+++ b/src/app/models/reservation.js
@@ -0,0 +1,11 @@
+import Backbone from 'backbone';
+
+const Reservation = Backbone.Model.extend({
+  url: function() {
+    console.log('https://ada-backtrek-api.herokuapp.com/trips/'+this.trip_id+'/reservations');
+    // return `https://ada-backtrek-api.herokuapp.com/trips/${this.trip_id}/reservations`;
+    return 'https://ada-backtrek-api.herokuapp.com/trips/'+this.get('trip_id')+'/reservations';
+  }
+});
+
+export default Reservation;
diff --git a/src/app/models/trip.js b/src/app/models/trip.js
index 4314e8f..3b73a64 100644
--- a/src/app/models/trip.js
+++ b/src/app/models/trip.js
@@ -2,7 +2,7 @@ import Backbone from 'backbone';
 
 const Trip = Backbone.Model.extend({
   url: function() {
-    return `https://ada-backtrek-api.herokuapp.com/trips/${this.id}`
+    return `https://ada-backtrek-api.herokuapp.com/trips/` + (this.id || '')
   }
   // url: `https://ada-backtrek-api.herokuapp.com/trips/${id}`
   // url: `https://ada-backtrek-api.herokuapp.com/trips/`

From 4e154f15e1f5ca59b168a0088ae358bd294baabc Mon Sep 17 00:00:00 2001
From: Mariana <lmarianarp@gmail.com>
Date: Mon, 4 Dec 2017 18:37:06 -0800
Subject: [PATCH 4/4] Add Style

---
 dist/index.html   | 10 +++----
 src/app.js        | 70 ++++++-----------------------------------------
 src/css/style.css | 38 ++++++++++++++++++++++++-
 3 files changed, 51 insertions(+), 67 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index efe74f4..7da6934 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,14 +6,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
-  <header>
+  <header class='hero-section'>
     <!-- <button class="button" id="createTrip"> Create trip! </button> -->
   </header>
   <main>
     <section id="status-messages">
-        <!-- <button class="clear float-right">
-          <img src="http://www.pvhc.net/img223/xeiwtpbbgpmyhtcnjvwt.png" alt="Clear">
-        </button> -->
+        <button class="button clear float-right">
+          Hide
+        </button>
 
         <ul>
         </ul>
@@ -42,7 +42,7 @@ <h2>Add a Trip</h2>
     <input type="submit" value="Add it!" class="button"></input>
   </form>
 </aside>
-<section id="oneTrip">
+<section id="oneTrip" class="columns large-8 small-12">
 </section>
     <section class="columns large-8 small-12">
       <h2>Trip Options!</h2>
diff --git a/src/app.js b/src/app.js
index 4df3ffe..d070e3e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -20,8 +20,7 @@ const TRIP_FIELDS = ['name', 'continent', 'about', 'category', 'weeks', 'cost'];
 const RESERVATION_FIELDS = ['name', 'trip_id', 'email' ];
 
 const render = function render(tripList) {
-  // iterate through the bookList, generate HTML
-  // for each model and attatch it to the DOM
+  $('.clear').hide();
   const tripTableElement = $('#trip-list');
   tripTableElement.html('');
 
@@ -30,30 +29,21 @@ const render = function render(tripList) {
     tripTableElement.append(generatedHTML);
     $(`#trip${trip.attributes.id}`).on('click', (event) => {
       let tripDetails = new Trip({id: `${trip.attributes.id}`});
-      // console.log(tripDetails.url());
-      // tripDetails.on('update', renderDetails);
       tripDetails.fetch({
         success: renderDetails
       });
-      // console.log(tripDetails);
-
-
-      // renderDetails(tripDetails);
     });
-
+    $('th.sort').removeClass('current-sort-field');
+    $(`th.sort.${ tripList.comparator }`).addClass('current-sort-field');
   });
 };
 
 const renderDetails = function renderDetails(tripDetails){
-  // tripDetails= new Trip()
   const $detailsElement = $('#oneTrip');
   console.log('found detailsElement?', $detailsElement)
   $detailsElement.html('');
 
-  // const generatedHTML = $(detailsTemplate(tripDetails.attributes));
   const generatedHTML = detailsTemplate(tripDetails.attributes);
-  // console.log(generatedHTML);
-  // console.log(tripDetails.attributes);
   $detailsElement.append(generatedHTML);
 
   $('#goReservationForm').on('click', function(event) {
@@ -62,8 +52,7 @@ const renderDetails = function renderDetails(tripDetails){
 };
 
 const renderReservationForm = function renderReservationForm(event, tripDetails){
-  // console.log('In renderReservationForm');
-  // console.log(tripDetails.attributes);
+  $('#goReservationForm').hide();
   const tripId = tripDetails.attributes.id
   const $spaceReservationForm = $('#spaceReservationForm');
   $spaceReservationForm.html('');
@@ -75,7 +64,6 @@ const renderReservationForm = function renderReservationForm(event, tripDetails)
   $('#submitForm').on('click', reserveTripHandler);
 };
 
-
 const  reserveTripHandler = function reserveTripHandler(event){
   event.preventDefault();
   console.log('inside reserveTripHandler');
@@ -105,7 +93,6 @@ const  reserveTripHandler = function reserveTripHandler(event){
 });
 };
 
-
 const addTripHandler = function(event) {
   event.preventDefault();
 
@@ -118,40 +105,20 @@ const addTripHandler = function(event) {
 
     inputElement.val('');
   });
-
-
-  // const tripEnterUser = tripList.new(tripData);
   const tripEnterUser =  new Trip(tripData);
-  // The first argument to .save is the attributes to save.
-  // If we leave it blank, it will save all the attributes!
-  // (Think of model.update in Rails, where it updates the
-  // model and saves to the DB in one step). We need the second
-  // argument for callbacks, so we pass in {} for the first.
+
   tripEnterUser.save({}, {
     success: (model, response) => {
       console.log('Successfully saved trip!');
       reportStatus('success', 'Successfully saved trip!');
-      // tripList.add(model);
     },
     error: (model, response) => {
       const errors = response.responseJSON["errors"];
       for (let field in errors) {
         for (let problem of errors[field]) {
           reportStatus('error', `${field}: ${problem}`);
-
-
-
-
         }
       }
-      // Since these errors come from a Rails server, the strucutre of our
-      // error handling looks very similar to what we did in Rails.
-      // const errors = response.responseJSON["errors"];
-      // for (let field in errors) {
-      //   for (let problem of errors[field]) {
-      //     reportStatus('error', `${field}: ${problem}`);
-      //   }
-      // }
     },
   });
 };
@@ -163,6 +130,7 @@ let reservationTemplate;
 
 // Clear status messages
 const clearStatus = function clearStatus() {
+  $('.clear').hide();
   $('#status-messages ul').html('');
   $('#status-messages').hide();
 };
@@ -170,27 +138,20 @@ const clearStatus = function clearStatus() {
 // Add a new status message
 const reportStatus = function reportStatus(status, message) {
   console.log(`Reporting ${ status } status: ${ message }`);
+  $('.clear').show();
 
-  // Should probably use an Underscore template here.
   const statusHTML = `<li class="${ status }">${ message }</li>`;
-  // const close = `<button class="clear float-right">
-  //   close
-  // </button>`;
-  // note the symetry with clearStatus()
-  // $('#status-messages').append(close);
+
   $('#status-messages ul').append(statusHTML);
   $('#status-messages').show();
 };
 
 $(document).ready( () => {
-  // When fetch gets back from the API call, it will add books
-  // to the list and then trigger an 'update' event
+
   tripTemplate = _.template($('#trip-template').html());
   detailsTemplate = _.template($('#details-template').html());
   reservationTemplate = _.template($('#reservationFormTemplate').html());
-  // console.log(`About to fetch data from ${ tripDetails.url() }`);
 
-  // detailsTemplate = _.template($('#details-template').html());
   tripList.on('update', render);
 
   tripList.fetch();
@@ -208,19 +169,6 @@ $(document).ready( () => {
     });
   });
 
-
   $('#status-messages').on('click', clearStatus);
 
-
-
-
-
-
-
-
-
-
-
-  // tripDetails.fetch();
-  // tripDetails.on()
 });
diff --git a/src/css/style.css b/src/css/style.css
index b7b2d44..b6c6a89 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,2 +1,38 @@
 
-/* Your styles go here! */
+.hero-section {
+  background: url('https://i.pinimg.com/originals/df/d0/00/dfd0000f193a9aa0864277462c6b063e.jpg') 50% no-repeat;
+  background-size: cover;
+  height: 300px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+th.sort {
+  cursor: pointer;
+}
+
+.current-sort-field {
+  background-color: darkgrey;
+  color: white;
+}
+
+.success {
+  background-color: #ade9ff;
+  font-size: 1.2em;
+}
+
+.error {
+  background-color: #fcc4d0;
+  font-size: 1.2em;
+}
+
+li {
+  list-style-type: none;
+  width: 100%;
+}
+
+#status-messages {
+  margin: 0%;
+}