Ada-C9 · brittanyrjones · May 22, 2018 · May 23, 2018 · May 29, 2018 · CheezItMan
diff --git a/foundation.css b/foundation.css
diff --git a/index.css b/index.css
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Ada Trek</title>
+    <!-- <link rel="stylesheet" href="foundation.css"> -->
+    <!-- <link rel="stylesheet" href="index.css"> -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
+  </head>
+
+<body>
+    <section id="fail"></section>
+    <button id="all-trips" class="button">View All Trips</button>
+
+<!-- All Trips -->
+    <section id="trips" class="all-trip-list">
+  <ul><h4></h4></ul>
+</section>
+
+<!-- Single Trip view -->
+<article id="trip" class="trip-info-list">
+  <h1 id="trip-name"></h1>
+  <ul id="trip-summary"></ul>
+</article>
+
+
+<!-- Reserve a trip -->
+
+<div id="reserve-trip" class="reserve-trip-form">
+  <form action="#" method="post" id="reservation-form">
+    <section>
+      <label>Name: </label>
+      <input type="text" id="name" name="name"></input>
+    </section>
+    <section>
+      <label>Age: </label>
+      <input type="number" id="age" name="age"></input>
+    </section>
+    <section>
+      <label>Email: </label>
+      <input type="text" id="email" name="email"></input>
+    </section>
+
+      <button id="submit-reservation" type="submit" class="button">Make Reservation</button>
+  </form>
+</div>
+
+
+<!-- Script tags -->
+        <script
+      src="https://code.jquery.com/jquery-3.2.1.min.js">
+    </script>
+    <script type="text/javascript" src="index.js"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,99 @@
+
+$(document).ready(()=>{
+
+
+
+
+
+  // get the trips list from api, turn it into a list
+  let viewTripsList = function viewTripsList() {
+    $.get('https://ada-backtrek-api.herokuapp.com/trips',
+    (response) => {
+      response.forEach(function(trip) {
+        let tripInfo =
+        `<li data-id=${trip.id}><a>${trip.name}</a></li>`
+        $('#trips ul').append(tripInfo);
+        console.log('Trips list: success');
+      });
+    })
+    // If unable to load trips, give html response.
+    .fail(function(response){
+      $('fail').html('<p>Trips List: unsuccessful</p>')
+      console.log(response);
+    });
+  };
+
+
+
+  // Get trip information from API, and show info
+  let viewTrip = function viewTrip(id){
+    $.get(`https://ada-backtrek-api.herokuapp.com/trips/${id}`,
+      (response) => {
+        let tripName =
+        `Trip ${response.id}: ${response.name}`;
+        let tripSummary = `<li>Continent: ${response.continent}</li>
+        <li>Category: ${response.category}</li>
+        <li>Weeks: ${response.weeks}</li>
+        <li>Trip Cost: $${response.cost}</li>
+        <li>About: ${response.about}</li>`;
+        let showReserveBtn = `<button class="button secondary hollow">Reserve Trip</button>`;
+        $('#trip-name').html(tripName);
+        $('#trip-summary').html(tripSummary);
+        $('#show-reserve-btn').html(showReserveBtn);
+        $('#reservation-form').attr('action', 'https://ada-backtrek-api.herokuapp.com/trips/' + response.id + '/reservations/');
+
+        console.log('single trip: success');
+
+        $("#show-reserve-btn").click(function(){
+        $("#reserve-trip").slideDown();
+      });
+
+      })
+
+      .fail(function(response){
+        $('fail').html('<p>Single trip: error</p>')
+
+        /// console.log(); ///
+        console.log(response);
+        console.log('single trip: error');
+      });
+    };
+
+
+    // When all trips button is clicked, get the list of trips
+    $('#all-trips').on('click', function(){
+      viewTripsList();
+    });
+
+    // click event for single trip
+    $('#trips ul').on('click', 'li', function(){
+      let tripID = $(this).attr('data-id');
+      viewTrip(tripID);
+    });
+
+
+
+    $('form').submit(function(e) {
+      e.preventDefault();
+
+      const url = $(this).attr('action');
+      const formData = $(this).serialize();
+
+      $.post(url, formData, (response) => {
+        $('#confirmation-msg').html('<p>Made Reservation: ' + $('#trip-name').html() + '!</p>');
+
+        /// console.log(); ///
+        console.log(url);
+        console.log(formData);
+        console.log('reservation: success!');
+      })
+      .fail(function(response){
+        $('#fail').html('<p>Something went wrong!</p>')
+
+        /// console.log(); ///
+        console.log(response);
+        console.log('reservation: error!');
+      });
+    });
+
+  });