From bb293ff1a07b106bf223725bc0c1def7e69dca7c Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Wed, 29 May 2019 22:18:34 -0700
Subject: [PATCH 01/11] setup pages, list trips

---
 index.css  | 24 ++++++++++++++++++++++++
 index.html | 24 ++++++++++++++++++++++++
 index.js   | 29 +++++++++++++++++++++++++++++
 3 files changed, 77 insertions(+)
 create mode 100644 index.css
 create mode 100644 index.html
 create mode 100644 index.js
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..55f6632d
--- /dev/null
+++ b/index.css
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>7 Wonders</title>
+  <script
+  src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+	<section id="status-message"></section>
+  
+  <article> 
+    <h1> Welcome to the Greatest wonders of the World</h1>
+    <button class='btn btn-success'> List the 7 Wonders</button>
+    <section id='wonderList'></section>
+
+  </article>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..4a7fb6e8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+	  <meta charset="utf-8">
+	  <title>Trekking Trips</title>
+	  <script
+	  src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+	  <script type="text/javascript" src="index.js"></script>
+	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+	  <link rel="stylesheet" href="index.css">
+	</head>
+	<body>
+		<section id="status-message"></section>
+	  
+	  <article> 
+	    <h1>Trek</h1>
+	    <button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
+	    <section id='trekList'></section>
+
+	  </article>
+	</body>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..227526ea
--- /dev/null
+++ b/index.js
@@ -0,0 +1,29 @@
+const onClick = function(action, listener) {
+  listener.click(() => {
+    action();
+    console.log('click');
+  });
+};
+
+const getTrips = () => {
+  $(`#trekList`).append(`<ul id="tripList">`);
+  const allTrips = $('#tripList');
+  allTrips.append(`<h2>All Trips</h2>`);
+  axios
+    .get('https://trektravel.herokuapp.com/trips')
+    .then(response => {
+      response.data.forEach(trip => {
+        allTrips.append(`<li id="${trip.id}">${trip.name}</li>`);
+      });
+    })
+    .catch(error => {});
+};
+
+// const getTrip(trip)
+$(document).ready(() => {
+  onClick(getTrips, $('#tripBtn'));
+  console.log($('li'));
+  $('li').click(function(event) {
+    console.log(event, 'asdfasdfasdfasdfasdf');
+  });
+});

From 36ec9d34557d7666c226eb7d191c156387bee8a6 Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Wed, 29 May 2019 23:34:43 -0700
Subject: [PATCH 02/11] set up get trip

---
 index.html |  5 +++--
 index.js   | 50 +++++++++++++++++++++++++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 4a7fb6e8..c2704f73 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,8 @@
 	    <h1>Trek</h1>
 	    <button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
 	    <section id='trekList'></section>
-
+			<section id='trekInfo'></section>
+			<section id='trekReservation'></section>
 	  </article>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
index 227526ea..5c5f8606 100644
--- a/index.js
+++ b/index.js
@@ -1,10 +1,49 @@
+const reservationForm = `<form id="reservationForm">
+														<div class="form-group">
+															<label for="name">Name</label>
+															<input type="name" class="form-control" id="name" placeholder="Your name here">
+														</div>
+														<div class="form-group">
+															<label for="email">Email</label>
+															<input type="email" class="form-control" id="email" placeholder="you@example.com">
+														</div>
+												<form>`;
+
 const onClick = function(action, listener) {
-  listener.click(() => {
-    action();
-    console.log('click');
+  listener.click(event => {
+    action(event);
+    console.log();
   });
 };
 
+const postReservation = trip => {
+  $(`#trekReservation`).append(`<article id="tripReservation">`);
+  const reservation = $('#tripReservation');
+  reservation.empty();
+  reservation.append(`<h2>Reserve a Spot on ${trip.name}</h2>`);
+  reservation.append(reservationForm);
+};
+
+const getTrip = event => {
+  $(`#trekInfo`).append(`<article id="tripInfo">`);
+  const info = $('#tripInfo');
+  info.empty();
+  info.append(`<h2>Trip Details</h2>`);
+  axios
+    .get(`https://trektravel.herokuapp.com/trips/${event.currentTarget.id}`)
+    .then(response => {
+      const trip = response.data;
+      info.append(`<h3>Name:</h3><p>${trip.name}</p>`);
+      info.append(`<h4>Continent:</h4><p>${trip.continent}</p>`);
+      info.append(`<h4>Category:</h4><p>${trip.category}</p>`);
+      info.append(`<h4>Weeks:</h4><p>${trip.weeks}</p>`);
+      info.append(`<h4>Cost:</h4><p>${trip.cost}</p>`);
+      info.append(`<h4>About:</h4><p>${trip.about}</p>`);
+      postReservation(trip);
+    })
+    .catch(() => {});
+};
+
 const getTrips = () => {
   $(`#trekList`).append(`<ul id="tripList">`);
   const allTrips = $('#tripList');
@@ -14,6 +53,7 @@ const getTrips = () => {
     .then(response => {
       response.data.forEach(trip => {
         allTrips.append(`<li id="${trip.id}">${trip.name}</li>`);
+        onClick(getTrip, $(`#${trip.id}`));
       });
     })
     .catch(error => {});
@@ -22,8 +62,4 @@ const getTrips = () => {
 // const getTrip(trip)
 $(document).ready(() => {
   onClick(getTrips, $('#tripBtn'));
-  console.log($('li'));
-  $('li').click(function(event) {
-    console.log(event, 'asdfasdfasdfasdfasdf');
-  });
 });

From 337cd643701793ea396e45f9bee7a87f98502945 Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Wed, 29 May 2019 23:51:44 -0700
Subject: [PATCH 03/11] set up form for reservation, submit not working yet'

---
 index.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/index.js b/index.js
index 5c5f8606..444dc1f3 100644
--- a/index.js
+++ b/index.js
@@ -7,6 +7,7 @@ const reservationForm = `<form id="reservationForm">
 															<label for="email">Email</label>
 															<input type="email" class="form-control" id="email" placeholder="you@example.com">
 														</div>
+														<button type="submit" class="btn btn-primary">Reserve</button>
 												<form>`;
 
 const onClick = function(action, listener) {
@@ -22,6 +23,13 @@ const postReservation = trip => {
   reservation.empty();
   reservation.append(`<h2>Reserve a Spot on ${trip.name}</h2>`);
   reservation.append(reservationForm);
+  console.log($('form').serializeArray());
+  $('form').submit(function(event) {
+    // for (let i = 0; i < 1000000000000; i += 1) {
+    console.log(event);
+    // console.log($(this).serializeArray());
+    // }
+  });
 };
 
 const getTrip = event => {

From 2d92d389fa12a9ad5d8d502a39236e99f6d6fb7f Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Sun, 9 Jun 2019 23:02:27 -0700
Subject: [PATCH 04/11] added error messages

---
 index.html |   3 +-
 index.js   | 140 +++++++++++++++++++++++++++++++++++++----------------
 2 files changed, 99 insertions(+), 44 deletions(-)

diff --git a/index.html b/index.html
index c2704f73..1997d1a0 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,8 @@
 	  
 	  <article> 
 	    <h1>Trek</h1>
-	    <button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
+			<button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
+			<section id='statusMessage'></section>
 	    <section id='trekList'></section>
 			<section id='trekInfo'></section>
 			<section id='trekReservation'></section>
diff --git a/index.js b/index.js
index 444dc1f3..094beea4 100644
--- a/index.js
+++ b/index.js
@@ -1,72 +1,126 @@
-const reservationForm = `<form id="reservationForm">
-														<div class="form-group">
-															<label for="name">Name</label>
-															<input type="name" class="form-control" id="name" placeholder="Your name here">
-														</div>
-														<div class="form-group">
-															<label for="email">Email</label>
-															<input type="email" class="form-control" id="email" placeholder="you@example.com">
-														</div>
-														<button type="submit" class="btn btn-primary">Reserve</button>
-												<form>`;
+const URL = 'https://trektravel.herokuapp.com/trips/';
 
-const onClick = function(action, listener) {
-  listener.click(event => {
-    action(event);
-    console.log();
+const reservationForm = trip => {
+  return `<h2>Reserve a Spot on ${trip.name}</h2>
+          <form id="reservationForm">
+          	<div class="form-group">
+          		<label for="name">Name</label>
+          		<input type="name" class="form-control" id="name" placeholder="Your name here" required>
+          	</div>
+          	<div class="form-group">
+          		<label for="email">Email</label>
+          		<input type="email" class="form-control" id="email" placeholder="you@example.com" required>
+          	</div>
+          	<button type="submit" class="btn btn-primary">Reserve</button>
+          <form>`;
+};
+
+const tripSummary = trip => {
+  return `<h2>Trip Details</h2>
+          <h3>Name:</h3><p>${trip.name}</p>
+          <h4>Continent:</h4><p>${trip.continent}</p>
+          <h4>Category:</h4><p>${trip.category}</p>
+          <h4>Weeks:</h4><p>${trip.weeks}</p>
+          <h4>Cost:</h4><p>${trip.cost}</p>
+          <h4>About:</h4><p>${trip.about}</p>`;
+};
+
+String.prototype.capitalize = function() {
+  return this[0].toUpperCase() + this.slice(1, this.length);
+};
+
+const confirmation = (tripConfirmation, tripName) => {
+  return `<h2>${tripConfirmation.name.capitalize()}, your trip has been booked!</h2>
+  <p>Confirmation ID: ${tripConfirmation.id} for Trek to ${tripName}</p>`;
+};
+
+const readDataForm = (email, name) => {
+  return { email: email, name: name };
+};
+
+const reportStatus = message => {
+  $('#statusMessage').html(message);
+};
+
+const reportApiError = error => {
+  let errorHtml = `<p>${error.message}</p><ul>`;
+  const fieldProblems = error.response.data.errors;
+  Object.keys(fieldProblems).forEach(field => {
+    const problems = fieldProblems[field];
+    problems.forEach(problem => {
+      errorHtml += `<li><strong>${field}:</strong> ${problem}</li>`;
+    });
   });
+  errorHtml += '</ul>';
+  reportStatus(errorHtml);
+};
+
+const onClick = function(action, listener) {
+  listener.click(action);
 };
 
 const postReservation = trip => {
   $(`#trekReservation`).append(`<article id="tripReservation">`);
   const reservation = $('#tripReservation');
   reservation.empty();
-  reservation.append(`<h2>Reserve a Spot on ${trip.name}</h2>`);
   reservation.append(reservationForm);
-  console.log($('form').serializeArray());
-  $('form').submit(function(event) {
-    // for (let i = 0; i < 1000000000000; i += 1) {
-    console.log(event);
-    // console.log($(this).serializeArray());
-    // }
-  });
+  handleReservation(trip);
 };
 
-const getTrip = event => {
-  $(`#trekInfo`).append(`<article id="tripInfo">`);
-  const info = $('#tripInfo');
-  info.empty();
-  info.append(`<h2>Trip Details</h2>`);
-  axios
-    .get(`https://trektravel.herokuapp.com/trips/${event.currentTarget.id}`)
-    .then(response => {
-      const trip = response.data;
-      info.append(`<h3>Name:</h3><p>${trip.name}</p>`);
-      info.append(`<h4>Continent:</h4><p>${trip.continent}</p>`);
-      info.append(`<h4>Category:</h4><p>${trip.category}</p>`);
-      info.append(`<h4>Weeks:</h4><p>${trip.weeks}</p>`);
-      info.append(`<h4>Cost:</h4><p>${trip.cost}</p>`);
-      info.append(`<h4>About:</h4><p>${trip.about}</p>`);
-      postReservation(trip);
-    })
-    .catch(() => {});
+const handleReservation = trip => {
+  const reservation = $('#trekReservation');
+  $('form').submit(function(event) {
+    event.preventDefault();
+    const reservationData = readDataForm(
+      event.target[1].value,
+      event.target[0].value
+    );
+    axios
+      .post(`${URL + trip.id}/reservations`, reservationData)
+      .then(response => {
+        reservation.empty();
+        reservation.append(confirmation(response.data, trip.name));
+      })
+      .catch(error => {
+        reportApiError(error);
+      });
+  });
 };
 
 const getTrips = () => {
+  reportStatus('Loading trips...');
   $(`#trekList`).append(`<ul id="tripList">`);
   const allTrips = $('#tripList');
   allTrips.append(`<h2>All Trips</h2>`);
   axios
-    .get('https://trektravel.herokuapp.com/trips')
+    .get(`${URL}`)
     .then(response => {
+      reportStatus(`Successfully loaded ${response.data.length} trips`);
       response.data.forEach(trip => {
         allTrips.append(`<li id="${trip.id}">${trip.name}</li>`);
         onClick(getTrip, $(`#${trip.id}`));
       });
     })
-    .catch(error => {});
+    .catch(error => {
+      reportStatus(
+        `Encountered an error while loading trips: ${error.message}`
+      );
+    });
 };
 
+const getTrip = event => {
+  $(`#trekInfo`).append(`<article id="tripInfo">`);
+  const info = $('#tripInfo');
+  info.empty();
+  axios
+    .get(`${URL + event.currentTarget.id}`)
+    .then(response => {
+      const trip = response.data;
+      info.append(tripSummary(trip));
+      postReservation(trip);
+    })
+    .catch(() => {});
+};
 // const getTrip(trip)
 $(document).ready(() => {
   onClick(getTrips, $('#tripBtn'));

From 664aab2d01cb6135b54fa7a043d4e4a0459d8b6e Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Sun, 9 Jun 2019 23:02:47 -0700
Subject: [PATCH 05/11] added error messages

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 094beea4..140f5f4b 100644
--- a/index.js
+++ b/index.js
@@ -121,7 +121,7 @@ const getTrip = event => {
     })
     .catch(() => {});
 };
-// const getTrip(trip)
+
 $(document).ready(() => {
   onClick(getTrips, $('#tripBtn'));
 });

From 3c203f978bc1531c8571ebf069584d5c28f312ab Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Sun, 9 Jun 2019 23:03:57 -0700
Subject: [PATCH 06/11] added error messages to api get request for trip

---
 index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 140f5f4b..7d463b4e 100644
--- a/index.js
+++ b/index.js
@@ -119,7 +119,9 @@ const getTrip = event => {
       info.append(tripSummary(trip));
       postReservation(trip);
     })
-    .catch(() => {});
+    .catch(() => {
+      reportStatus(`Encountered an error while loading trip: ${error.message}`);
+    });
 };
 
 $(document).ready(() => {

From cbf3cccd318ed9a63320e3e0ae30686b362f8679 Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Sun, 9 Jun 2019 23:04:34 -0700
Subject: [PATCH 07/11] fixed missing param passed for error on trip

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 7d463b4e..bc46cff5 100644
--- a/index.js
+++ b/index.js
@@ -119,7 +119,7 @@ const getTrip = event => {
       info.append(tripSummary(trip));
       postReservation(trip);
     })
-    .catch(() => {
+    .catch(error => {
       reportStatus(`Encountered an error while loading trip: ${error.message}`);
     });
 };

From 61b3027e911904ca6636fb754ad18ae610f341cc Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Sun, 9 Jun 2019 23:08:53 -0700
Subject: [PATCH 08/11] added contributions

---
 index.css | 24 ------------------------
 index.js  |  4 ++++
 2 files changed, 4 insertions(+), 24 deletions(-)

diff --git a/index.css b/index.css
index 55f6632d..e69de29b 100644
--- a/index.css
+++ b/index.css
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
-  <meta charset="utf-8">
-  <title>7 Wonders</title>
-  <script
-  src="https://code.jquery.com/jquery-3.3.1.js"></script>
-  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-  <script type="text/javascript" src="index.js"></script>
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="index.css">
-</head>
-<body>
-	<section id="status-message"></section>
-  
-  <article> 
-    <h1> Welcome to the Greatest wonders of the World</h1>
-    <button class='btn btn-success'> List the 7 Wonders</button>
-    <section id='wonderList'></section>
-
-  </article>
-</body>
-</html>
\ No newline at end of file
diff --git a/index.js b/index.js
index bc46cff5..22f1c60e 100644
--- a/index.js
+++ b/index.js
@@ -25,6 +25,7 @@ const tripSummary = trip => {
           <h4>About:</h4><p>${trip.about}</p>`;
 };
 
+// adapted/learned from https://flaviocopes.com/how-to-uppercase-first-letter-javascript/
 String.prototype.capitalize = function() {
   return this[0].toUpperCase() + this.slice(1, this.length);
 };
@@ -34,14 +35,17 @@ const confirmation = (tripConfirmation, tripName) => {
   <p>Confirmation ID: ${tripConfirmation.id} for Trek to ${tripName}</p>`;
 };
 
+// adapted from class live code
 const readDataForm = (email, name) => {
   return { email: email, name: name };
 };
 
+// adapted from class live code
 const reportStatus = message => {
   $('#statusMessage').html(message);
 };
 
+// adapted from class live code
 const reportApiError = error => {
   let errorHtml = `<p>${error.message}</p><ul>`;
   const fieldProblems = error.response.data.errors;

From 193dc27531ab03fdffc3c036a565206cf19daf1a Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Mon, 10 Jun 2019 00:16:48 -0700
Subject: [PATCH 09/11] updated html in js to remove elements

---
 index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 22f1c60e..f100d3f0 100644
--- a/index.js
+++ b/index.js
@@ -64,6 +64,7 @@ const onClick = function(action, listener) {
 };
 
 const postReservation = trip => {
+  $('#tripReservation').remove();
   $(`#trekReservation`).append(`<article id="tripReservation">`);
   const reservation = $('#tripReservation');
   reservation.empty();
@@ -72,7 +73,7 @@ const postReservation = trip => {
 };
 
 const handleReservation = trip => {
-  const reservation = $('#trekReservation');
+  const reservation = $('#tripReservation');
   $('form').submit(function(event) {
     event.preventDefault();
     const reservationData = readDataForm(
@@ -113,6 +114,7 @@ const getTrips = () => {
 };
 
 const getTrip = event => {
+  $('#tripInfo').remove();
   $(`#trekInfo`).append(`<article id="tripInfo">`);
   const info = $('#tripInfo');
   info.empty();

From d08de3a5c84af9efd10c90fa11dd8125af6c0bdb Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Mon, 10 Jun 2019 00:59:48 -0700
Subject: [PATCH 10/11] added some styling

---
 index.css  | 11 +++++++++++
 index.html | 12 ++++++++----
 index.js   |  4 +++-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/index.css b/index.css
index e69de29b..576b5261 100644
--- a/index.css
+++ b/index.css
@@ -0,0 +1,11 @@
+#Trek {
+	display: flex;
+}
+
+#trekInfo{
+	width: 300px;
+}
+
+ul {
+	list-style: none;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 1997d1a0..061b0ff5 100644
--- a/index.html
+++ b/index.html
@@ -14,10 +14,14 @@
 	<body>
 		<section id="status-message"></section>
 	  
-	  <article> 
-	    <h1>Trek</h1>
-			<button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
-			<section id='statusMessage'></section>
+	  <article id='Trek'> 
+			<header>
+				<h1>Trek</h1>
+				<nav>
+					<button class='btn btn-success' id = 'tripBtn'> See All Trips</button>
+				</nav>
+				<section id='statusMessage'></section>
+			</header>
 	    <section id='trekList'></section>
 			<section id='trekInfo'></section>
 			<section id='trekReservation'></section>
diff --git a/index.js b/index.js
index f100d3f0..af4f55dc 100644
--- a/index.js
+++ b/index.js
@@ -94,7 +94,9 @@ const handleReservation = trip => {
 
 const getTrips = () => {
   reportStatus('Loading trips...');
-  $(`#trekList`).append(`<ul id="tripList">`);
+  const list = $(`#trekList`);
+  list.empty();
+  list.append(`<ul id="tripList">`);
   const allTrips = $('#tripList');
   allTrips.append(`<h2>All Trips</h2>`);
   axios

From 5f46a11edb49f5b80187a6edd81c2c06db293937 Mon Sep 17 00:00:00 2001
From: qqdipps <sdipp007@gmail.com>
Date: Mon, 10 Jun 2019 01:50:42 -0700
Subject: [PATCH 11/11] adjusted layout, added some boot strap.

---
 index.css | 23 +++++++++++++++++++++++
 index.js  | 10 +++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/index.css b/index.css
index 576b5261..ce8ac487 100644
--- a/index.css
+++ b/index.css
@@ -6,6 +6,29 @@
 	width: 300px;
 }
 
+#trekReservation {
+	max-width: 400px;
+	margin-left: 1em;
+}
+
+#trekList{
+	width: 350px;
+	margin-right: 1em;
+	margin-left: -20px;
+}
+
+body{
+	margin: 3em;
+}
+
 ul {
 	list-style: none;
+}
+
+li {
+	font-size: 1.5em;
+}
+
+.text-white:hover {
+	color: rgb(163, 255, 132)!important;
 }
\ No newline at end of file
diff --git a/index.js b/index.js
index af4f55dc..63505e93 100644
--- a/index.js
+++ b/index.js
@@ -11,7 +11,7 @@ const reservationForm = trip => {
           		<label for="email">Email</label>
           		<input type="email" class="form-control" id="email" placeholder="you@example.com" required>
           	</div>
-          	<button type="submit" class="btn btn-primary">Reserve</button>
+          	<button type="submit" class="btn btn-success">Reserve</button>
           <form>`;
 };
 
@@ -68,7 +68,7 @@ const postReservation = trip => {
   $(`#trekReservation`).append(`<article id="tripReservation">`);
   const reservation = $('#tripReservation');
   reservation.empty();
-  reservation.append(reservationForm);
+  reservation.append(reservationForm(trip));
   handleReservation(trip);
 };
 
@@ -104,7 +104,11 @@ const getTrips = () => {
     .then(response => {
       reportStatus(`Successfully loaded ${response.data.length} trips`);
       response.data.forEach(trip => {
-        allTrips.append(`<li id="${trip.id}">${trip.name}</li>`);
+        allTrips.append(
+          `<li class="card text-white bg-secondary mb-3" id="${trip.id}">${
+            trip.name
+          }</li>`
+        );
         onClick(getTrip, $(`#${trip.id}`));
       });
     })
