Ada-C7 · Allison-Northrop · May 23, 2017 · May 23, 2017 · May 24, 2017 · May 24, 2017
diff --git a/close.png b/close.png
diff --git a/index.html b/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+     <link rel="stylesheet" type="text/css" href="styles.css">
+       <link rel="stylesheet" href="css/foundation.css">
+       <script src="/js/foundation.min.js"></script>
+     <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
+     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+     <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="trek.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" integrity="sha256-SzKOQsVYGX1bmddyfPzGC6yXY/rWYGUSMOi6+T9gZ+0=" crossorigin="anonymous"></script>
+
+  </head>
+  <body>
+    <section> <!--Would love to figure out how to hide this section after it's clicked -->
+      <h1>Travel Treks</h1>
+    <button id="load"> Let's Trek! </button>
+    </section>
+
+    <section id="errors"></section>
+
+    <div id="trips-list">
+      <script id="trips-template" type="text/template">
+        <section class="trip" id=<%- "trip-" + data.id %> >
+        <h2 class="flip" data-id=<%- data.id %> >
+          <%- data.name %>
+        </h2>
+
+        <ul>
+          <li><strong>Continent:</strong>
+          <%- data.continent %></li>
+          <li><strong>Duration:</strong>
+            <%- data.weeks %> weeks</li>
+        </ul>
+      </script>
+    </div>
+
+
+
+
+
+    <script id="trip-dets" type="text/template">
+      <div id=<%= "trip-" + data.id %>>
+        <ul>
+        <li><strong>Category: </strong><%- data.category %></li>
+        <li><strong>Cost: $</strong><%- data.cost %></li>
+        </ul>
+        <p><strong>Details: </strong> <%- data.about %></p>
+      </div>
+
+      <div>
+        <p><strong>Sign up for your next adventure!</strong></p>
+      </div>
+
+      <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>Age</label>
+          <input type="text" id='age' age="age"></input>
+        </section>
+        <section>
+          <label>Email</label>
+          <input type="text" id="email" email="email"></input>
+        </section>
+        <section class="button">
+          <button type="submit">Reserve Trip</button>
+        </section>
+      </form>
+    </script>
+
+
+  </body>
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,28 @@
+.info, .flip {
+    padding: 5px;
+    text-align: center;
+    background-color: #e5eecc;
+    /*border: solid 1px #c3c3c3;*/
+}
+
+.info {
+    padding: 50px;
+    display: none;
+}
+
+h1 {
+  font-family: 'Permanent Marker', cursive;
+  font-size: 80px;
+  color: #595D7F;
+}
+
+h2 {
+  font-family: 'Permanent Marker', cursive;
+  color: #137F7E;
+}
+
+p, ul, form {
+  font-family: 'Open Sans', sans-serif;
+  color: #595D7F;
+
+}
diff --git a/trek.js b/trek.js
@@ -0,0 +1,106 @@
+$(document).ready(function() {
+  var tripUrl = 'https://trektravel.herokuapp.com/trips/';
+
+  var allTrips = function(response) { // callback function
+    console.log("Success! in the allTrips function")
+    console.log(response); //showing what the response from the api is in the console
+
+    var tripTemplate = _.template($('#trips-template').html()); // the template is connected/generates html in the first trips template
+    for (var i = 0; i < response.length; i++) { //going through the response
+      var generatedHtml = tripTemplate ({
+        data: response[i] //so data is each trip info
+      });
+
+      $("#trips-list").append(generatedHtml); //generate the html in the trips-template script and pin it to the trips-list div
+      $("#test").hide();
+    }
+
+
+  };
+
+  var trip = function(response) { //another callback function
+    console.log("Success in the trip function! (indvidual trip info)");
+    console.log(response); // shows the api response
+    var tripTemplate = _.template($('#trip-dets').html());
+    //here you don't need to iterate because now the response is just one object
+    var generatedHtml = tripTemplate ({
+      data: response
+    });
+    console.log("obj id: " + "#trip-" + response.id);
+
+    $("#trip-" + response.id).append(generatedHtml); //need to make a specific trip append to the specific name
+    $(".flip").click(function() {
+      $(".info").slideToggle("slow");
+    });
+
+  };
+
+
+  $("form").submit(function(event) {
+    event.preventDefault();
+
+    var url = $(this).attr("action");
+    var formData = $(this).serialize();
+    console.log(formData)
+
+    $.post(url, formData, function(response){
+      console.log(response);
+    });
+  });
+
+  var clickHandler = function() {
+    $.get(tripUrl, allTrips) //passing a function around as a variable (to be invoked later.) when the request comes in, that is when it willb e called.
+  };
+
+  $('#trips-list').on('click', '.trip', function(event){
+    console.log("success");
+    console.log(event);
+    console.log(this);
+
+    var indvTrips = tripUrl + event.target.dataset.id //this is similar to going into a nested hash or array
+    //go into event, then to target, then to dataset, then get the id.
+
+    $.get(indvTrips, trip) //event is just a nasty large object
+  });
+
+
+  var failureCallback = function() {
+    console.log("Didn't work, in the failure callback");
+    $("#errors").html("<h1>AJAX request failed!</h1>");
+  }
+
+  $('#load').click(clickHandler);
+});
+
+
+
+
+
+//////////////////////////////////////////////////////
+// var successCallback = function(response) {
+//   console.log("Success!")
+//   console.log(response);
+//
+//   var target = $('#trips');
+//   // var names = $('.trip_name')
+//   // var trip_details = $('.trip_details')
+//   for (var i = 0; i < response.length; i++) {
+//     trip = response[i];
+//     target.append("<h2>" + trip['name'] + "</h2>" +
+//     "<ul>" + "<li>" + "Continent: " + trip['continent'] + "</li>" +
+//     "<li>" + "Duration: " + trip['weeks'] + " weeks" + "</li>" + "</ul>");
+//   }
+// }
+// //the trip name I need to link to by id
+// var failureCallback = function() {
+//   console.log("Didn't work");
+//   $("#errors").html("<h1>AJAX request failed!</h1>");
+// }
+//
+// var clickHandler = function() {
+//   $.get(trip_url, successCallback) //passing a function around as a variable (to be invoted later.) when the request comes in, that is when it willb e called.
+// };
+// //as soon as the document is ready, load the page
+// $(document).ready(function() {
+//   $('#load').click(clickHandler);
+// });