Ada-C6 · olenellina · Nov 22, 2016 · Nov 22, 2016 · Nov 22, 2016 · Nov 22, 2016
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+    <link rel="stylesheet" href="trek.css">
+  </head>
+  <body>
+    <header>
+    </header>
+    <div id="main">
+      <h1> Choose Your Adventure! </h1>
+      <button id="load" class="main-button"> Show Trips </button>
+    </div>
+
+    <div id="details">
+      <h3 id="name"> </h3>
+      <h4 id="id"> </h4>
+      <h4 id="continent"> </h4>
+      <h4 id="weeks"> </h4>
+      <h4 id="cost"> </h4>
+      <h4 id="about"> </h4>
+      <h4 id="category"> </h4>
+      <h2 id="message"></h2>
+
+      <div id="reserve-form">
+        <form action="https://trektravel.herokuapp.com/trips/" method="POST">
+
+          <section>
+            <label> Name </lable>
+            <input type="text" id="name" name="name"></input>
+          </section>
+          <section>
+            <label> Age </lable>
+            <input type="text" id="age" name="age"></input>
+          </section>
+          <section>
+            <label> Email </lable>
+            <input type="text" id="email" name="email"></input>
+          </section>
+
+          <section class="button">
+            <button type="submit" class="main-button"> Reserve Your Trip </button>
+          </section>
+
+        </form>
+    </div>
+
+    </div>
+
+    <div id="trips" style="overflow-y: auto; height:450px;"></div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+    <script type="text/javascript" src="trek.js"></script>
+  </body>
+</html>
diff --git a/resort.jpg b/resort.jpg
diff --git a/trek.css b/trek.css
@@ -0,0 +1,64 @@
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+#main {
+  text-align: center;
+}
+
+.record {
+  padding: 2%;
+  border-bottom: 2px solid black;
+}
+
+.record:first-child {
+  border-top: 2px solid black;
+}
+
+.main-button {
+  width: 120px;
+  height: 40px;
+  font-size: 1em;
+}
+
+#load:hover {
+  background-color: aliceblue;
+}
+
+#trips {
+  float:left;
+  display: inline-block;
+}
+
+#details {
+  width: 40%;
+  display: inline-block;
+  margin-left: 5%;
+  margin-top: 2%;
+}
+
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+}
+
+header {
+  background-image: url("resort.jpg");
+  height: 100px;
+}
+
+#reserve-form {
+  margin-top: 2%;
+  border: 1px solid black;
+  padding: 2%;
+}
+
+#reserve-form button {
+  margin-top: 2%;
+  font-size: .75em;
+}
diff --git a/trek.js b/trek.js
@@ -0,0 +1,74 @@
+// AJAX Notes:
+// AJAX is a design pattern that you can implement in jQuery (but also plain JS)
+// Requires server communication - async communication with server using JS.
+// Entails composing request objects, sending to server and async waiting for the response.
+// Previously, when you made a JS request to server it was a blocking request,
+// nothing else could happen until that response came through.
+// Nothing below is AJAX code per se, but rather how I'm using jQuery.
+
+$(document).ready(function(){
+  // Hide the reseveration form until a trip is selected
+  $('#reserve-form').hide();
+
+  $( "#load" ).click(function() {
+      var url = "https://trektravel.herokuapp.com/trips"
+      $.get(url,
+        function(response){
+          $('#trips').append("<h3> Select a trip for more information: </h3>")
+          for (var i = 0; i < response.length; i++){
+            console.log(response[i]);
+            $('#trips').append("<div class='record'><a href=" + url + "/" + response[i].id + ">" + response[i].name + "</a></div>");
+          }
+        });
+    });
+
+  $('#trips').on('click', 'a', function(e){
+    e.preventDefault();
+
+    // Resetting forms and fields
+    $('#message').text("");
+    $('form').trigger("reset");
+
+    $('#details').show();
+
+    // Hiding the load button, as hitting it again would just append the results back onto the list
+    $('#load').hide();
+
+    // Show the reservation form, in addition to the trip details
+    $('#reserve-form').show();
+
+    var tripUrl = $(this).attr('href');
+    console.log(tripUrl);
+
+    $.get(tripUrl, function(trip){
+      // Reminder: this is the syntax to use to properly display an object
+      // (otherwise, will try to convert the object to string)
+      console.log("I am a trip object", trip);
+      var tripId = trip.id;
+      $('#name').text("Trip Name: " + trip.name);
+      $('#id').text("ID: " + trip.id);
+      $('#continent').text("Continent: " + trip.continent);
+      $('#weeks').text("Weeks: " + trip.weeks);
+      $('#cost').text("Cost: $" + trip.cost.toFixed(2));
+      $('#about').text("About: " + trip.about);
+      $('#category').text("Category: " + trip.category);
+
+      // Reservation Form:
+      $('form').submit(function(e) {
+          e.preventDefault();
+          var addTripUrl = $(this).attr("action") + tripId + "/reserve"; // Retrieve the action from the form
+          var formData = $(this).serialize();
+
+          $.post(addTripUrl, formData, function(response){
+            console.log(response);
+          })
+          $('#reserve-form').hide();
+          $('#message').text("Your trip has been successfully booked.");
+        });
+
+    }).fail(function(){
+      alert("Failed to find this trip's details. Please try again.");
+    })
+  });
+
+}); // ending $(document).ready