Ada-C9 · emilcecarlisa · May 22, 2018 · May 22, 2018 · May 22, 2018 · May 23, 2018
diff --git a/css/foundation.css b/css/foundation.css
diff --git a/index.css b/index.css
@@ -0,0 +1,53 @@
+
+#banner {
+  position: relative;
+  height: 300px;
+  width: auto;
+  object-fit: cover;
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  color: white;
+  background-image: url("train.jpg");
+  background-size: cover;
+}
+
+body {
+  font-family: sans-serif;
+  background-color: lavender;
+}
+
+main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+/* .trips {
+  grid-column: 1 / span 1;
+  grid-row: 1 / span 2;
+} */
+
+#aside {
+  display: grid;
+}
+
+#new-reserve {
+  grid-column: 2;
+  grid-row: 1;
+  display: none;
+}
+
+#details {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+table, th, td {
+    border: 1px solid black;
+    border-collapse: collapse;
+    padding: 15px;
+}
+
+tr:nth-child(even) {
+    background-color: #dddddd;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trek the World</title>
+  <script
+  src="https://code.jquery.com/jquery-3.3.1.js"></script>
+  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  <script type="text/javascript" src="index.js"></script>
+  <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+  <h1 id="banner">Trek the World</h1>
+
+  <main>
+    <section id="status-message"></section>
+
+    <section class="trips">
+      <button id="load">See all trips</button>
+      <table>
+        <tbody id="trip-list">
+        </tbody>
+      </table>
+    </section>
+
+    <section id="new-reserve">
+      <h1>Reserve a spot</h1>
+      <form id="trip-form" action="index.html" method="post">
+
+        <div>
+          <label for="name">Name</label>
+          <input type="text" name="name" />
+
+          <label for="email">Email</label>
+          <input type="text" name="email">
+
+          <p>Trip (goes here)</p>
+        </div>
+
+        <input type="submit" name="reserve-trip" value="Ready to travel" />
+      </form>
+    </section>
+
+    <div class="aside">
+      <section id="details">
+      </section>
+    </div>
+
+  </main>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,120 @@
+const allTripsUrl = " https://ada-backtrek-api.herokuapp.com/trips";
+
+const singleTripUrl = "https://ada-backtrek-api.herokuapp.com/trips/";
+
+const reserveUrl = "https://ada-backtrek-api.herokuapp.com/trips/1/reservations";
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+const reportError = (message, errors) => {
+  let content = `<p>${message}</p>`
+  content += "<ul>";
+  for (const field in errors) {
+    for (const problem of errors[field]) {
+      content += `<li>${field}: ${problem}</li>`;
+    }
+  }
+  content += "</ul>";
+  reportStatus(content);
+};
+
+const loadTrips = function loadTrips() {
+  let tripList = $('#trip-list');
+
+  axios.get(allTripsUrl)
+  .then((response) => {
+    response.data.forEach((trip) => {
+      console.log(trip);
+      tripList.append(`<tr><td><a class="trip" data-id="${trip.id}" href="#">${trip.name}</a></td></tr>`);
+    });
+    reportStatus('Trips Loaded!');
+  })
+  .catch((error) => {
+    console.log(error);
+    if (error.response.data && error.response.data.errors) {
+      // User our new helper method
+      reportError(
+        `Something's wrong: ${error.message}`,
+        error.response.data.errors
+      );
+    } else {
+      reportStatus(`Error: ${error.message }`);
+    }
+  });
+};
+
+const getTrip = function getTrip(event) {
+  event.preventDefault();
+
+  let display = $('#new-reserve');
+  display.show();
+
+
+  axios.get(singleTripUrl + $(this).data("id"))
+  .then((response) => {
+    $('#details').empty().append(`<h2>${response.data.name}</h2><h3>${response.data.continent}</h3><p>${response.data.about}</p><p>Category of trip: ${response.data.category}</p><p>Duration of trip (in weeks): ${response.data.weeks}</p><p>$${response.data.cost}</p>`);
+    reportStatus('Trips Loaded!');
+  });
+}
+
+const FORM_FIELDS = ['name', 'email'];
+const inputField = name => $(`#trip-form input[name="${name}"]`);
+
+const readFormData = () => {
+  const getInput = name => {
+    const input = inputField(name).val();
+    return input ? input : undefined;
+  };
+  const formData = {};
+  FORM_FIELDS.forEach((field) => {
+    formData[field] = getInput(field);
+  });
+
+  return formData;
+};
+
+const clearForm = () => {
+  FORM_FIELDS.forEach((field) => {
+    inputField(field).val('');
+  });
+}
+
+const reserveTrip = (event) => {
+  event.preventDefault();
+
+  const reserveData = readFormData()
+  console.log(reserveData);
+
+  axios.post(reserveUrl, reserveData)
+    .then((response) => {
+      console.log(`SUCCESS`);
+      reportStatus(`Successfully added a reservation with ID ${response.data.trip_id}!`);
+      clearForm();
+    })
+    .catch((error) => {
+        console.log(`FAIL`);
+          console.log(error.response);
+          if (error.response.data && error.response.data.errors) {
+            reportError(
+              `Encountered an error: ${error.message}`,
+              error.response.data.errors
+            );
+          } else {
+            reportStatus(`Something must be wrong: ${error.message}`);
+          }
+        });
+};
+
+// make method for getting the reservation object once it's clicked OR
+// event listener in the reservation section, listening for a click on a trip
+
+
+
+
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+  $('.trips').on('click', '.trip', getTrip);
+  $('#trip-form').submit(reserveTrip);
+});
diff --git a/train.jpg b/train.jpg