diff --git a/index.html b/index.html
new file mode 100644
index 00000000..34b3d186
--- /dev/null
+++ b/index.html
@@ -0,0 +1,64 @@
+
+
+
+ Trek
+
+
+
+
+
+
+
+
+
+ WanderLust
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/trek.css b/trek.css
new file mode 100644
index 00000000..118b4d49
--- /dev/null
+++ b/trek.css
@@ -0,0 +1,31 @@
+@import url('https://fonts.googleapis.com/css?family=Barrio');
+
+
+* {
+ font-family: 'Barrio', cursive;
+}
+
+h1 {
+ text-align: center;
+ font-family: 'Barrio', cursive;
+}
+
+button #load {
+ margin: auto;
+}
+
+button {
+ font-family: 'Barrio', cursive;
+}
+
+.thumbnail {
+ text-align: center;
+ background-color: gray;
+ border-radius: 20px;
+}
+
+.tiles {
+ margin: 10%;
+ height: 350px;
+ padding: 10%;
+}
diff --git a/trek.js b/trek.js
new file mode 100644
index 00000000..725a4c79
--- /dev/null
+++ b/trek.js
@@ -0,0 +1,79 @@
+var url = 'https://trektravel.herokuapp.com/trips';
+
+var successCallback = function(response) {
+ console.log("success!");
+ console.log(response);
+
+ var tripTemplate = _.template($("#trip-list-template").html());
+ for (var i = 0; i < response.length; i++ ) {
+ var generatedHtml = tripTemplate({
+ trip: response[i]
+ });
+
+ $("#trip-list").append($(generatedHtml));
+ };
+};
+
+var successCallbackTrip = function(response) {
+ console.log("Success! for indiv trip");
+ console.log(response);
+ var indivTripTemplate = _.template($("#trip_template").html());
+ var generatedHtml = indivTripTemplate({
+ trip: response
+
+ })
+
+ $("#trip-info-indv").html($(generatedHtml));
+
+ $("#trip-info-indv").show();
+};
+
+var failureCallback = function() {
+ console.log("Didn't work");
+ $("#errors").html("API request failed!
");
+};
+
+var clickHandler = function() {
+ $.get(url, successCallback).fail(failureCallback);
+};
+
+var clickHandlerTrip = function(event){
+ var id = $(this).attr("data-tripid");
+ var tripUrl = url + "/" + id;
+ $.get(tripUrl, successCallbackTrip).fail(failureCallback);
+};
+
+var clickHandlerCloseModal = function(event) {
+ $("#trip-info-indv").hide();
+};
+
+var makeReservation = function(event){
+ event.preventDefault();
+
+ var url = $(this).attr("action");
+ var formData = $(this).serialize();
+
+ console.log(formData); //gives us back a string
+
+ $.post(url, formData, function(response){
+ $("#message").html("Reservation Confirmed!
");
+
+ console.log(response);
+ }).fail(function(){
+ $("#message").html("Reservation Did Not Go Through
");
+ });
+};
+
+$(document).ready(function() {
+
+//associate the click handler
+$("#load").click(clickHandler);
+
+$("#trip-list").on("click", "button#seeTrip", clickHandlerTrip);
+
+$("#trip-info-indv").on("submit", "form", makeReservation);
+
+$("#trip-info-indv").on("click", ".close-button", clickHandlerCloseModal);
+
+
+});