Ada-C7 · Spatterjaaay · May 24, 2017 · May 24, 2017 · May 24, 2017 · May 24, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/app.css b/css/app.css
diff --git a/css/foundation.css b/css/foundation.css
diff --git a/css/foundation.min.css b/css/foundation.min.css
diff --git a/css/ste_michelle_sunset.jpg b/css/ste_michelle_sunset.jpg
diff --git a/css/trek.css b/css/trek.css
@@ -0,0 +1,78 @@
+@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Great+Vibes|Josefin+Sans|Open+Sans|Poiret+One');
+
+body, label, .button {
+  font-family: 'Poiret One', cursive;
+  color: white;
+}
+
+h1 {
+  color: white;
+  font-family: 'Great Vibes', cursive;
+  font-size: 5em;
+}
+
+h3, a, h2 {
+  color: white;
+  font-family: 'Dancing Script', cursive;
+}
+
+#background-image {
+    /*padding: 5%;*/
+    /*background: url(ste_michelle_sunset.jpg);*/
+    /*background-size: contain;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 700px;*/
+    /*max-height: auto;*/
+    background:
+      linear-gradient(
+        to right,
+        rgba(50, 50, 100, .90),
+        rgba(255, 255, 255, 0)
+      ),
+      url(ste_michelle_sunset.jpg);
+      padding: 4.6%;
+      background-size: cover;
+      background-repeat: no-repeat;
+      position: absolute;
+      top: 0px; /* Header Height */
+      bottom: 0px; /* Footer Height */
+      width: 100%;
+  }
+
+#trips {
+  height: 470px;
+  overflow: scroll;
+}
+
+#trip-details {
+  height: 450px;
+  overflow: scroll;
+}
+
+.button {
+  border-radius: 500px;
+  font-size: 1rem;
+  color: white;
+  font-weight: bold;
+  border-color: white;
+  background-color: transparent;
+}
+
+.button:hover {
+  background-color: pink;
+}
+
+.button:focus {
+  outline: none;
+  background-color: transparent;
+}
+
+#load {
+  margin-top: 20%;
+}
+
+#list {
+  max-width: 50%;
+  border-bottom: dashed white 1px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="css/foundation.css" />
+    <link href="css/trek.css" media="screen" rel="stylesheet" type="text/css">
+    <title></title>
+  </head>
+  <body>
+    <section id="background-image">
+      <div class="row">
+        <h1 class="small-10 large-9 columns">Globe Trotters</h1>
+        <section class="small-2 large-2 columns">
+          <button class="button" id="load">Get All Trips!</button>
+        </section>
+      </div>
+      <div class="errors"></div>
+      <div id="trips"></div>
+    </section>
+
+    <script id="list-template" type="text/template">
+      <section id="list">
+        <h3>
+          <a href="#" id="<%- data.id %>"><%- data.name %></a>
+        </h3>
+        <p>
+          <strong>Continent:</strong>
+          <%- data.continent %>,
+          <strong> Length:</strong>
+          <% var week = (data.weeks == 1) ? " week" : " weeks" %>
+          <%- data.weeks + week %>
+        </p>
+      </section>
+    </script>
+
+    <script id="details-template" type="text/template">
+      <section class="small-12 large-4 columns">
+        <h3>Make a reservation!</h3>
+        <div id="message"></div>
+          <form id="reservation-form" action="https://trektravel.herokuapp.com/trips/<%- data.id %>/reserve" method="post">
+            <section>
+              <label>Name</label>
+              <input type="text" id="name" name="name"></input>
+            </section>
+            <section>
+              <label>Email</label>
+              <input type="text" id="email" name="email"></input>
+            </section>
+            <section>
+              <label>Age</label>
+              <input type="text" id="age" name="age"></input>
+            </section>
+              <button class="button" type="submit">Reserve</button>
+          </form>
+      </section>
+
+      <section class="small-12 large-8 columns" id="trip-details">
+        <h2><%- data.name %></h2>
+        <p><strong>ID:</strong> <%- data.id %></p>
+        <p><strong>Continent:</strong> <%- data.continent %></p>
+        <p><strong>Category:</strong> <%- data.category %></p>
+        <p><strong>About:</strong> <%- data.about %></p>
+      </section>
+    </script>
+
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
+    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+    crossorigin="anonymous">
+    </script>
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
+    <script src="js/trek.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/js/.DS_Store b/js/.DS_Store
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1 @@
+$(document).foundation()
diff --git a/js/trek.js b/js/trek.js
@@ -0,0 +1,66 @@
+
+var url = 'https://trektravel.herokuapp.com/trips';
+
+var successCallback = function(response) {
+  var listTemplate = _.template($('#list-template').html());
+  var target = $('#trips');
+
+  for (var i = 0; i < response.length; i++) {
+    var generatedHtml = listTemplate({
+      data: response[i]
+    });
+    target.append($(generatedHtml));
+  }
+};
+
+var detailsSuccessCallback = function(response) {
+  var detailsTemplate = _.template($('#details-template').html());
+  var target = $('#trips');
+  var generatedHtml = detailsTemplate({
+    data: response
+  });
+
+  target.append($(generatedHtml));
+
+  $("#reservation-form").submit(reservationHandler);
+};
+
+var reservationHandler = function(e) {
+  e.preventDefault();
+  $("#reservation-form").empty();
+
+  var reserveUrl = $(this).attr("action");
+  var formData = $(this).serialize();
+  $.post(reserveUrl, formData, function(response){
+    $("#message").html('<p> Reservation made! </p>');
+  }).fail(reservationFailureCallback);
+};
+
+var failureCallback = function(response) {
+  $(".errors").html("<h3>Sorry, but your AJAX request for all trips failed!</h3>");
+};
+
+var detailsFailureCallback = function(response) {
+  $(".errors").html("<h3>Sorry, but your AJAX request for trip details failed!</h3>");
+};
+
+var reservationFailureCallback = function(response) {
+  $("#trips").empty();
+  $(".errors").html("<h3>Sorry, but your reservation failed!</h3>");
+};
+
+var clickHandler = function() {
+  $("#trips").empty();
+  $.get(url, successCallback).fail(failureCallback);
+};
+
+var detailsClickHandler = function() {
+  id = $(this).attr('id');
+  $("#trips").empty();
+  $.get(url + "/" + id, detailsSuccessCallback).fail(detailsFailureCallback);
+};
+
+$(document).ready( function() {
+  $("#load").click(clickHandler);
+  $("#trips").on("click", "a", detailsClickHandler);
+});