diff --git a/close.png b/close.png
new file mode 100644
index 00000000..9678cd30
Binary files /dev/null and b/close.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..c746bd17
--- /dev/null
+++ b/index.html
@@ -0,0 +1,93 @@
+
+
+
+
+ Trek Travel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..6495026b
--- /dev/null
+++ b/index.js
@@ -0,0 +1,49 @@
+var successTripsCallback = function(response) {
+ var tripTemplate = _.template($('#trips-template').html());
+ for (var i = 0; i < response.length; i++) {
+ var generatedHtml = tripTemplate({
+ data: response[i]
+ });
+ $('#trip-list').append($(generatedHtml));
+ }
+ $(".trip-link").click(individualTripClickHandler);
+};
+
+var successIndividualTripCallback = function(response) {
+ var tripDetailsTemplate = _.template($('#individual-trip-template').html());
+ var generatedHtml = tripDetailsTemplate({
+ data: response
+ });
+ $("#individual-trip").html($(generatedHtml));
+};
+
+var failureCallback = function() {
+ $("#errors").html("Sorry something went wrong with your request!");
+};
+
+//click handlers
+var allTripsClickHandler = function(event) {
+ var tripUrl = "https://trektravel.herokuapp.com/trips/";
+ $.get(tripUrl, successTripsCallback).fail(failureCallback);
+};
+
+var individualTripClickHandler = function(event){
+ var tripId = $(this).attr("data-trip-id");
+ var tripUrl = "https://trektravel.herokuapp.com/trips/";
+ var individualTripURL = tripUrl + tripId;
+ $.get(individualTripURL, successIndividualTripCallback).fail(failureCallback);
+};
+
+var reserveTrip = function(event){
+ event.preventDefault();
+ var tripUrl = $(this).attr("action");
+ var formData = $(this).serialize();
+ $.post(tripUrl, formData, function(response){
+ $("#message").html("Reservation Confirmed
");
+ });
+};
+
+$(document).ready(function() {
+ $('#load-trips').click(allTripsClickHandler);
+ $("#individual-trip").on("submit", "form", reserveTrip);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..ca60bb02
--- /dev/null
+++ b/style.css
@@ -0,0 +1,9 @@
+.title-boxes {
+ border: solid;
+ height: 90px;
+}
+
+h1, .trip-link {
+ text-align: center;
+ padding-top: 30px;
+}