Ada-C6 · jchung722 · Nov 22, 2016 · Nov 22, 2016 · Nov 29, 2016 · Dec 2, 2016
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Trek It</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Oswald:700|PT+Sans+Narrow" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <h1>TREK IT</h1>
+    </header>
+    <button id="load">TREK IT</button>
+    <div id="modal">
+      <div id="tripdesc">
+        <h3 id="name"></h3>
+        <p id="continent"></p>
+        <p id="about"></p>
+        <p id="category"></p>
+        <p id="weeks"></p>
+        <p id="cost"></p>
+        <form method="POST">
+          <label>Name</label>
+          <input type="text" name="name"></input>
+          <label>Email</label>
+          <input type="text" name="email"></input>
+          <button id="reserve" type="submit"> Reserve </button>
+        </form>
+      </div>
+    </div>
+    <div id="trips"></div>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript" src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,86 @@
+$(document).ready(function(){
+
+////---------transitioning background javascript
+  var backgrounds = new Array(
+    'url("http://ngm.nationalgeographic.com/wallpaper/img/2011/11/25-birchbark-canoe-allagash-river-maine_1600.jpg")',
+    'url("http://cdn.wallpapersafari.com/45/42/TlG3au.jpg")',
+    'url("http://images.nationalgeographic.com/wpf/media-live/photos/000/037/custom/3731_1600x1200-wallpaper-cb1317995374.jpg")',
+    'url("http://images.nationalgeographic.com/wpf/media-live/photos/000/210/custom/21080_1600x1200-wallpaper-cb1318527290.jpg")',
+    'url("http://www.thedesignwork.com/wp-content/uploads/2011/03/rock-fort-india-national-geographic-wallpaper.jpg")'
+  );
+
+  var current = 0;
+
+  function nextBackground() {
+      current++;
+      current = current % backgrounds.length;
+      $('body').css('background-image', backgrounds[current]);
+  }
+  var refresh = setInterval(nextBackground, 3000);
+
+  $('body').css('background-image', 'url("http://travel.nationalgeographic.com/u/TvyamNb-BivtNwcoxtkc5xGBuGkIMh_nj4UJHQKuoXB25eFqvC5sMPA8Smg-kciXS6bf2CttAwnmjFAJIDTiGP6jLFqn-w/")');
+
+  $('header').hide(); //keep header hidden before button is pressed
+
+
+///----------method to call list of trips from API--------///
+  var url = 'https://trektravel.herokuapp.com/trips';
+
+  var successCallback = function(response) {
+    for (var i=0; i < response.length; i++) {
+      $('#trips').append("<a href=" + url + "/" + response[i].id + "><div class='trip'>" + response[i].name + "</div></a>");
+    }
+  };
+
+////----------button function to show list of trips-----------////
+  $('#load').click( function() {
+    $('#trips').empty();
+    $('#load').hide(); //hide trip load button
+    $('header').show(); //show header
+    $.get(url, successCallback);
+    clearInterval(refresh); //backgrounds stop transitioning when button is pressed
+  });
+
+
+/////------------button function to show modal of trip description-----------////
+  $('#trips').on('click', 'a', function(e) {
+    e.preventDefault();
+    $('#modal').show();
+    $('body').css('background-image', 'url("http://travel.nationalgeographic.com/u/TvyamNb-BivtNwcoxtkc5xGBuGkIMh_nj4UJHQKuoXB25eFqvC5sMPA8Smg-kciXS6bf2CttAwnmjFAJIDTiGP6jLFqn-w/")');
+    var tripUrl = $(this).attr('href');
+    var reserveUrl = $(this).attr('href') + '/reserve';
+
+    $.get(tripUrl, function(trip){
+      $('#name').text(trip.name);
+      $('#continent').text('Continent: ' + trip.continent);
+      $('#about').text(trip.about);
+      $('#category').text('Category: ' + trip.category);
+      $('#weeks').text('Weeks: ' + trip.weeks);
+      $('#cost').text('Cost: $' + trip.cost);
+    }).fail(function(){
+      alert("failed");
+    });
+
+    var callback = function(){
+      console.log("Success!"); ///just a function to know submission below worked
+    };
+
+///////-----------make reservation-------------//////////
+    $('form').submit(function(e){
+      e.preventDefault();
+      var data = $(this).serialize();
+      $.post(reserveUrl, data, callback);
+      $('input').val('');
+    });
+
+  });
+
+/////----------method to clear modal when clicked outside the div --------/////////
+  var modal = document.getElementById('modal');
+  window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = "none";
+    }
+  };
+
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,74 @@
+#load {
+  font-family: 'Oswald', sans-serif;
+  font-size: 7em;
+  color: white;
+  background-color: transparent;
+  display: block;
+  margin: 0 auto;
+  border: 15px solid white;
+  margin-top: 20%;
+}
+
+#load:hover{
+  color: black;
+  border: 15px solid black;
+}
+
+body{
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  transition: background 1s linear;
+}
+
+h1{
+  font-family: 'Oswald', sans-serif;
+  font-size: 3em;
+  margin: 0 auto;
+  text-align: center;
+  border: 10px solid white;
+  width: 190px;
+  color: white;
+  margin-top: 2%;
+  margin-bottom: 3%;
+}
+
+.trip{
+  font-family: 'PT Sans Narrow', sans-serif;
+  font-size: 1.5em;
+  color: black;
+  background-color: rgba(255, 255, 255, 0.5);
+  width: 29%;
+  margin: .75% 1.5% .75% 1.5%;
+  padding: 3% 0 3% 0;
+  text-align: center;
+  display: inline-block;
+  border: 5px solid black;
+}
+
+.trip:hover{
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+#modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    padding-top: 100px; /* Location of the box */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+#tripdesc {
+    font-family: 'PT Sans Narrow', sans-serif;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+}