Ada-C7 · ashtn · May 23, 2017 · May 24, 2017 · May 24, 2017 · May 24, 2017
diff --git a/index.css b/index.css
@@ -0,0 +1,90 @@
+
+/**************************** General ***************************/
+
+main {
+  padding: 80px 0 24em 0;
+  background-image: url("https://cdn.pixabay.com/photo/2016/03/17/23/00/world-1264062_1280.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center;
+}
+
+
+a { color: #3B4463; }
+a:hover { color: #f7e7d7; }
+
+.button { background-color: #3B4463; }
+.button:hover { background-color: #3C6F47; }
+
+
+
+/**************************** nav ***************************/
+
+.top-bar, li {
+  background-color: white;
+  color: #0a0a0a;;
+  position: fixed;
+  width: 100%;
+}
+
+
+
+/**************************** footer ***************************/
+
+footer {
+  background-color: #070201;
+  padding: 2.5% 0;
+  bottom: 0;
+  left:0;
+  height:12em;
+  width:100%;
+}
+
+footer a, h4 {
+  color: #dbd9de;
+}
+footer h4 {
+  margin: 0;
+}
+
+footer a {
+display: block;
+position: relative;
+}
+
+
+/********************** Index ********************/
+
+.trip-block {
+  text-align: center;
+  background-color: rgba(255,255,255, 0.75);
+  padding: 2.25rem;
+  margin: 1em 0;
+  width: auto;
+  height: inherit;
+  border-radius: 2em;
+}
+
+.trip-block h3, h4 {
+    display: inline-block;
+    margin: 0 1rem;
+}
+
+.trip-block h3 { color: #3C6F47; }
+
+.trip-block h4 { color: #30271d; }
+
+/****************** Show Details *****************/
+
+#trip-index { color: #30271d; }
+
+.show {
+  background-color: white;
+  padding: 1em;
+  border: 1px solid #cacaca;
+}
+
+.show, form {
+  margin: 0 1em;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
+  <link rel="stylesheet" href="index.css">
+  <title>Tripsea</title>
+</head>
+<body>
+  <nav class='top-bar'>
+    <div class='top-bar-left'>
+      <h1> Tripsea </h1>
+    </div>
+    <div class='top-bar-right'>
+      <!-- Filtered Options Here -->
+    </div>
+  </nav>
+  <main>
+    <button id='explore' class='button'>  Explore All Trips </button>
+    <section id='errors'></section>
+    <div class="row">
+      <section id='trip-index'> </section>
+    </div>
+      <!-- <section id='trip-show'> </section> -->
+
+
+      <!-- Trip List Template  -->
+      <script id='trip-index-template' type='text/template'>
+        <div class="small-12 medium-6 large-4 columns">
+          <div class='trip-block'>
+            <a href="#" id="trip-link" >
+              <h2 id=<%- trip.id %>><%- trip.name %></h2>
+            </a>
+            <hr />
+            <h4><%- trip.weeks %> week(s)</h4>
+            <h3><%- trip.continent %></h3>
+          </div>
+        </div>
+      </script>
+
+      <!-- Trip Show Template  -->
+
+      <script id='trip-show-template' type='text/template'>
+        <div class="row">
+          <div class="small-12 large-6 columns">
+            <div class='show'>
+
+              <h1> <%- trip.name  %></h1>
+              <p>Location: <%- trip.continent %></p>
+              <p>Cost: $<%- trip.cost %></p>
+              <p>Duration: <%- trip.weeks %> week(s)</p>
+              <h3>About</h3>
+              <p><%- trip.about %></p>
+              <p>Trip id: <%- trip.id %></p>
+              <p>Category: <%- trip.category %></p>
+            </div>
+          </div>
+
+          <div class="small-12 large-6 columns">
+            <div id="message"></div>
+            <form action=<%- url %> 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 class="button">
+                <button type="submit">Request Reservation</button>
+              </section>
+            </form>
+          </div>
+        </div>
+      </script>
+    </main>
+      <footer>
+        <div class="wrap row small-up-1 medium-up-3">
+          <div class="column"><h4>Powered By</h4>
+            <!-- <hr /> -->
+          </div>
+          <div class="column"><h4>Social Media</h4>
+            <!-- <hr /> -->
+            <a href="#">Facebook</a>
+            <a href="#">Twitter</a>
+            <a href="#">Instagram</a>
+          </div>
+          <div class="column"><h4>Site Map</h4>
+            <!-- <hr /> -->
+            <a href="#">About Us</a>
+            <a href="#">Services</a>
+            <a href="#">Contact US</a>
+          </div>
+        </div>
+      </footer>
+
+      <!-- JavaScript, Jquery & Underscore -->
+      <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" type="text/javascript"></script>
+      <script src="index.js" type="text/javascript"></script>
+      <script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
+    </body>
+    </html>
+
diff --git a/index.js b/index.js
@@ -0,0 +1,90 @@
+$(document).ready(function(){
+  $('#explore').click(indexClickHandler);
+});
+
+
+// ####################### Trip Index/List ####################### //
+
+var indexClickHandler = function(){
+  url = 'https://trektravel.herokuapp.com/trips';
+  $.get(url, indexSuccessCallback).fail(failureCallback);
+
+};
+
+
+var indexSuccessCallback = function(response){
+
+  $('#trip-index').empty();
+
+
+  var tripIndexTemplate = _.template($('#trip-index-template').html());
+
+  for(var i=0;i<response.length;i++){
+    // validate data
+    if(response[i] && response[i].name && response[i].continent){
+      // validate data
+      if(response[i].name.length > 5 && response[i].weeks > 0 && response[i].continent.length > 3){
+
+      var generatedHtml = tripIndexTemplate({
+        trip: response[i],
+      });
+    }
+  }
+    $('#trip-index').append(generatedHtml);
+  }
+  $('#trip-index').on('click', '#trip-link', showClickHandler);
+};
+
+
+var failureCallback = function(){
+  $('#errors').html("<h1>Oops Something Went Wrong</h1>");
+};
+
+
+// ####################### Trip Show/Details ####################### //
+
+var showClickHandler = function(event){
+
+  var tripId = $(event.target)[0].getAttribute('id');
+
+  url = 'https://trektravel.herokuapp.com/trips/' + tripId;
+
+  $.get(url, showSuccessCallback).fail(failureCallback);
+};
+
+var showSuccessCallback = function(response){
+
+  var tripShowTemplate = _.template($('#trip-show-template').html());
+
+  var url = 'https://trektravel.herokuapp.com/trips/'+response.id+'/reserve';
+
+  var generatedHtml = tripShowTemplate({
+    trip: response,
+    url: url
+  });
+
+  // TODO what is the difference between .append and .html
+  $('#trip-index').html($(generatedHtml));
+  // $('#trip-show').append($(generatedHtml));
+
+};
+
+// ####################### Reservation ####################### //
+
+
+
+
+$('#trip-index').on('click', 'button', function(e) {
+
+  e.preventDefault();
+
+  var url = $('form').attr("action");
+  var formData = $('form').serialize();
+
+  $.post(url, formData, function(response){
+
+    alert("Your reservation has been requested!");
+    $('form').empty();
+  })
+  .fail(failureCallback);
+});