diff --git a/index.html b/index.html
new file mode 100644
index 00000000..3b8fc690
--- /dev/null
+++ b/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+ TREK
+
+
+
+
+
+
+ Find your Dream vacation!
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scripts/index.js b/scripts/index.js
new file mode 100644
index 00000000..a49bea79
--- /dev/null
+++ b/scripts/index.js
@@ -0,0 +1,84 @@
+
+$(document).ready(function() {
+ var url = "https://trektravel.herokuapp.com/trips";
+ $('#reservation-form').hide();
+
+ var successCallback = function(response) {
+ console.log("yay trips!");
+ console.log(response);
+
+ $.each(response, function(index, trip){
+ console.log(trip);
+ var row = $('|
');
+ var name = $(' | ');
+ var continent = $('' + trip.continent + ' | ');
+ var weeks = $('' + trip.weeks + ' week(s) | ');
+
+ row.append(name, continent, weeks);
+ $('.trips-body').append(row);
+
+ });
+ $('#trip-load-button').hide();
+ };
+
+ var tripCallback = function(trip) {
+ console.log('this should be a single trip');
+ console.log(trip);
+ $('.trip-display').empty();
+ $('#reservation-form').show();
+ var name = $('' + trip.name + '
');
+ var duration = $('Duration: ' + trip.weeks + ' week(s)
');
+ var cost = $('Cost: $' + trip.cost + '
');
+ var id = $('ID: ' + trip.id + "
");
+ var continent = $('Continent: ' + trip.continent + '
');
+ var category = $('Category: ' + trip.category + '
');
+ var description = $('Description:
' + trip.about + '
');
+ $('.trip-display').append(name, duration, cost, id, continent, category, description);
+ };
+
+ $('.trips-body').on('click', 'a', function(e){
+
+ e.preventDefault();
+ var id = $(this).attr('id');
+ var tripUrl = url + "/" + id;
+
+ $.get(tripUrl, tripCallback);
+ $("body").animate({ scrollTop: 0 }, "slow");
+ });
+
+ var failCallback = function(xhr) { //uses 'xhr' - 'XML header' - to denote all kinds of responses, including failures
+ console.log("failure");
+ console.log(xhr);
+ $('body').append("Sorry invalid URL!
");
+
+ };
+
+ var alwaysCallback = function() {
+ console.log("this always happens");
+ };
+
+ $('#trip-load-button').click(function() {
+ $.get(url, successCallback)
+ .fail(failCallback)
+ .always(alwaysCallback);
+ });
+
+
+ //POST
+
+ var postCallback = function(){
+ alert("Trip reserved! yay!");
+ console.log("did this work");
+ };
+
+ $('#reservation-form').submit(function(event){
+ var tripId =$("#trip-id").html();
+ var reservationUrl = url+ "/" + tripId + "/" + "reserve";
+ event.preventDefault();
+ var reservationData = $(this).serialize();
+ $.post(reservationUrl, reservationData, postCallback);
+
+ });
+
+
+});
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 00000000..7ebbb6d2
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,17 @@
+span {
+ font-weight: bold;
+}
+h1, #trip-load-button {
+ margin-left: 3%;
+}
+
+.button {
+ border: 2px solid darkgreen;
+ border-radius: 15px;
+ /*padding-left: 10px;*/
+ /*padding-top: 10px;*/
+ /*margin-bottom: 20px;*/
+ background-color: lightgreen;
+ color: black;
+
+}