Ada-C7 · avalliere · May 23, 2017 · May 24, 2017 · May 24, 2017 · May 24, 2017
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>TREK</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js" integrity="sha256-SzKOQsVYGX1bmddyfPzGC6yXY/rWYGUSMOi6+T9gZ+0=" crossorigin="anonymous"></script>
+
+  <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
+
+  <script src="index.js" type="text/javascript"></script>
+
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" integrity="sha256-itWEYdFWzZPBG78bJOOiQIn06QCgN/F0wMDcC4nOhxY=" crossorigin="anonymous" />
+
+  <link rel="stylesheet" href="trek.css"/>
+</head>
+
+<body>
+  <h1 class="title">TREK</h1>
+
+  <section id="errors"></section>
+
+  <button id="load" class="button large">Where to?</button>
+
+  <div id="trips" class="columns medium-6 small-12">
+    <script id="trips-item-template" type="text/template">
+      <ul class="vacation">
+        <li><a class="trip-detail" id="<%- trip.id %>"><%- trip['name'] %></a></li>
+        <li><%- trip['continent'] %></li>
+        <li><%- trip['weeks'] + " weeks" %></li>
+      </ul>
+    </script>
+  </div>
+
+  <div class="vacationDetails columns medium-6 small-12">
+    <script id="trips-detail-template" type="text/template">
+      <h3><%- trip['name'] %></h3>
+      <h4><%- trip['continent'] %></h4>
+      <p><%- trip['about'] %></p>
+      <ul class="deets">
+        <li><%- trip['weeks'] %> weeks</li>
+        <li><%- "#" + trip['category'] %></li>
+        <li>$<%- trip['cost'] %></li>
+      </ul>
+      <button id="hideTrip" class="button secondary" onclick="hideTripDetails()">Hide Trip Details</button>
+      <button id="reserve" class="button" onclick="reserve()">Reserve</button>
+
+      <form class="reserveForm" action="https://trektravel.herokuapp.com/trips/<%- trip.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>
+          <button type="submit" class="button">Reserve</button>
+        </section>
+      </form>
+      <div id="message"></div>
+    </div>
+  </script>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,86 @@
+var url = "https://trektravel.herokuapp.com/trips";
+
+var successCallback = function(response) {
+  console.log("Success");
+  console.log(response);
+
+  tripsTemplate = _.template($('#trips-item-template').html());
+  for (var i = 0; i < response.length; i ++) {
+    var generatedHtml = tripsTemplate({trip: response[i]});
+    $("#trips").append($(generatedHtml));
+  }
+
+  $('#load').hide();
+};
+
+var failureCallback = function() {
+  console.log("Request failed");
+  $("#errors").html("<h1>AJAX request failed!</h1>");
+};
+
+var tripDetailCallback = function(response) {
+  console.log("Success");
+  console.log(response);
+  var generatedHtml = tripsDetailTemplate({trip: response});
+  $('.vacationDetails').empty().show().append($(generatedHtml));
+
+// reservation functionality below
+
+  $(".reserveForm").hide();
+
+  $('.reserveForm').submit(function(e) {
+    e.preventDefault();
+
+    var postUrl = $(this).attr("action");
+    var formData = $(this).serialize();
+    console.log(postUrl, formData);
+
+    $.post(postUrl, formData, function(response) {
+      $('#message').html('<p>We saved you a spot!</p>');
+      console.log(response);
+      console.log("reservation");
+    })
+    .fail(function(){
+      $('#message').html('<p>Reservation failed</p>');
+    });
+  });
+
+};
+
+
+
+var clickHandler = function(event) {
+  $.get(url, successCallback).fail(failureCallback);
+};
+
+var clickHandlerDetails = function(event) {
+  $.get(url + '/' + this.id, tripDetailCallback).fail(failureCallback)
+  $('body').animate({ scrollTop: 0}, "slow");
+
+};
+
+
+
+function hideTripDetails() {
+  $(".vacationDetails").hide();
+}
+
+function reserve() {
+  $(".reserveForm").show();
+}
+
+
+
+// to get around scope
+var tripsTemplate;
+var tripsdetailTemplate;
+
+$(document).ready(function() {
+  tripsTemplate = _.template($('#trips-item-template').html());
+  tripsDetailTemplate = _.template($('#trips-detail-template').html());
+
+  $('#load').click(clickHandler);
+
+  $("body").on('click', ".trip-detail", clickHandlerDetails);
+
+});
diff --git a/trek.css b/trek.css
@@ -0,0 +1,80 @@
+@import url('https://fonts.googleapis.com/css?family=Monoton|Oxygen');
+
+
+
+body {
+  background-image: url("https://wallpapersite.com/images/pages/pic_w/6500.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+
+li, h1, h3, h4 {
+  font-family:  'Oxygen', sans-serif;
+}
+.title {
+  color: rgba(250, 250, 250, 0.5);
+  font-family: 'Monoton', cursive;
+  font-size: 12em;
+  position: fixed;
+  bottom: 0;
+  margin: 70px;
+  z-index: -100;
+}
+
+#load {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin: 0 170px 180px 0;
+}
+
+ul.vacation, .vacationDetails, .trip-detail, label {
+  color: white;
+}
+
+ul.vacation {
+  background-color: rgba(0, 0, 0, 0.75);
+  list-style: none;
+  font-size: 1.5em;
+  padding: 25px;
+}
+
+ul.vacation li:first-child {
+  font-stretch: expanded;
+}
+
+ul.vacation li:nth-child(n+2) {
+  font-size: 0.75em;
+  display: inline-block;
+  margin-right: 20px;
+  color: #42f4e2;
+}
+
+.vacationDetails {
+  background-color: rgba(0, 0, 0, 0.75);
+}
+
+.trip-detail:hover {
+  color: #ff6d81;
+}
+
+.button, .button:visited {
+  background-color: #ff324e;
+}
+
+.button:hover {
+  background-color: #ff6d81;
+}
+
+
+ul.deets li {
+  color: #42f4e2;
+  display: inline-block;
+  margin-right: 90px;
+}
+
+ul.deets li:nth-child(3) {
+  color: #ff6d81;
+  font-weight: bold;
+}