Ada-C7 · EricaJCasePhD · May 24, 2017 · May 24, 2017 · May 26, 2017 · May 30, 2017
diff --git a/README.md b/README.md
@@ -1,9 +1,11 @@
+
 # TREK
 
-TREK is a web application that displays deals on travel packages.
+TREK is a web application that displays deals on travel packages.  It was completed as an individual project at Ada Developers Academy.  It was not deployed.
 
 This is a [stage 2](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/rule-of-three.md) individual project.
 
+
 ## Learning Goals
 
 - Reading data from an API using AJAX

diff --git a/index.html b/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>World Treks</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+
+
+<body>
+  <header>
+    <h1>World Treks</h1>
+    <h2>explore our planet one step at a time</h2>
+  </header>
+
+  <main class = "row">
+    <div id = "vacations" class = "large-block-grid-1 ">
+    </main>
+
+
+    <!--text.template makes the browser ignore it -->
+    <script id = "trek-item-template" type = "text/template">
+      <table>
+        <tr>
+          <th><%- data.continent %></th>
+          <th>
+            <button class = "load button" data-trip-id = "<%- data.id %>"> <%- data.name%> </button></th>
+            <th><%- data.weeks %></th>
+          </tr>
+        </script>
+      </table>
+    </script>
+
+    <script id = "detailed-trip-template" type = "text/template">
+
+      <article>
+        <nav>
+          <h2> Trip <%- data.id %>:  <%- data.name %> </h2>
+          <ul>
+            <li id = 'index'> <button class = "button" >Return to All Trips</button></li>
+            <li id = 'buy'><button class = 'button'> Buy | $ <%- data.cost %></button></li>
+          </ul>
+        </nav>
+
+        <section> <%- data.about %> </section>
+      </article>
+    </script>
+
+
+    <script id="reserve-trek-template" type="text/template">
+      <form id="reserve-trek" action=<%-tripId%> method="post">
+        <section>
+          <label for="name"> Name: </label>
+          <input type="text" name="name">
+        </section>
+        <section>
+          <label for="age"> Age: </label>
+          <input type="text" name="age">
+        </section>
+        <section>
+          <label for="email"> Email: </label>
+          <input type="text" name="email">
+        </section>
+
+        <section>
+          <button type="submit" class="button"> Reserve! </button>
+        </section>
+
+      </form>
+    </script>
+
+    <script
+    src="https://code.jquery.com/jquery-3.2.1.min.js"
+    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
+    crossorigin="anonymous"></script>
+
+    <script
+    src="trek.js"
+    type = "text/javascript"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"
+    type = "text/javascript"></script>
+
+    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+
+  </body>
+  </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,112 @@
+@import url(
+  'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1-rc1/css/foundation.css');
+
+  @import url(
+    "https://fonts.googleapis.com/css?family=Oswald");
+
+
+    body {
+      position: relative;
+      display: inline-block;
+      background-image:    url('http://geology.com/world/world-map-of-cities-at-night.jpg');
+      width: 100%;
+      height: 30em;
+      z-index: -1;
+      top: 5.5em;
+      padding: 30px;
+    }
+
+    table{
+      table-layout: fixed;
+      width: 100%;
+      border-collapse: collapse;
+      border: 10px solid   #323087;
+      margin-bottom: 3rem;
+      vertical-align: middle;
+      opacity: 0.8;
+    }
+
+
+    tr {
+      vertical-align: middle;
+      color: #323087;
+    }
+
+    #vacations{
+      padding: 100px;
+      margin: auto;
+      magin-top: 8%;
+    }
+
+    .button, article section,li{
+      color: #323087;
+      font-weight: bold;
+      font-size: 20px;
+      margin: 0;
+      background-color: #fbefb8;
+    }
+
+    .button, li{
+      background-color: #fbefb8;
+    }
+
+    .button{
+      border: 1px solid blue;
+    }
+
+
+    header {
+      top: 0px;
+      z-index: 1;
+      position: fixed;
+      width: 100%;
+      justify-content: space-around;
+      position: fixed;
+    }
+    header, article h2{
+      display: flex;
+      align-content: center;
+      justify-content: space-around;
+      text-shadow: -1px 0 blue, 0 1px blue, 1px 0 blue, 0 -1px blue;
+      background-color: #323087;
+      color: #fbefb8;
+      font-family: impact;
+      margin-bottom: 0px;
+      border: 10px solid   #323087;
+    }
+    article{
+      margin-top: 8%;
+      display: block;
+      width: 100%;
+      border: 10px solid   #323087;
+
+    }
+    article nav{
+      display: block;
+      width: 100%;
+      background-color: #fbefb8;
+      border: 10px solid   #323087;
+    }
+
+    article ul{
+      display: flex;
+      justify-content: space-around;
+      margin: 0px;
+    padding: 10px;   }
+
+      article li {
+        display: inline-block;
+        list-style: none;
+        margin-top: 0px;
+      }
+
+      article section{
+        margin-top: 0px;
+        border: 10px solid   #323087;
+        font-size: 16px;
+        background: white;
+      }
+
+      h1{
+        font-family: impact;
+      }
diff --git a/trek.js b/trek.js
@@ -0,0 +1,57 @@
+var url = 'https://trektravel.herokuapp.com/trips/';
+
+var failureCallback = function () {
+  $("#errors").html("<h1> AJAX request failed! </h1>");
+};
+
+
+$(document).ready(function() {
+  var index = function (trekData)
+  {
+    var treksTemplate = _.template($('#trek-item-template').html());
+
+
+    for (var i = 0; i < (trekData.length/2); i++) {
+
+      var generatedHtml = treksTemplate({
+        data: trekData[i],
+      });
+      $('#vacations').append($(generatedHtml));
+    }
+
+    $('.load').click(function(event){
+      id =  this.attributes["data-trip-id"].value;
+      show = url + id;
+      $.get(show,singleCallback);
+    });
+  };
+
+  var singleCallback = function (trekData){
+    var trekTemplate = _.template($('#detailed-trip-template').html());
+
+    generatedHtml = trekTemplate({  data: trekData});
+
+    $('#vacations').empty();
+    $('#vacations').show();
+    $('#vacations').append($(generatedHtml));
+  };
+
+  $('#vacations').on("click", "#index",function() {
+    $('#vacations').empty();
+    $('#vacations').show();
+    $.get(url, index);
+  });
+
+  $('#vacations').on('click', '#buy', function(event){
+    var reserveTripTemplate = _.template($('#reserve-trek-template').html());
+    event.preventDefault();
+    var tripId = $(this).attr('data-trip-id');
+    var reservationForm = reserveTripTemplate({
+      tripId: tripId
+    });
+
+    $('vacations').append($(reservationForm));
+  });
+
+  $.get(url, index);
+});