Ada-C9 · kcforsman · May 24, 2018 · May 24, 2018 · May 24, 2018 · May 25, 2018
diff --git a/header_img.JPG b/header_img.JPG
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Trekker</title>
+    <link href="https://fonts.googleapis.com/css?family=Molle:400i" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Serif:400,700" rel="stylesheet">
+    <link href="styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <header><h1>Trek</h1></header>
+    <main>
+      <button id="trips-button" class="button">See All Trips</button>
+    </main>
+    <aside>
+      <section id="details-container" class="hidden"></section>
+      <section id="reserve-container" class="hidden">
+        <h3>Reserve Trip</h3>
+        <form id='reserve-form'>
+          <div>
+            <label for="name" type="text">Your Name:</label>
+            <input id="name" placeholder="Some One"></input>
+          </div>
+          <div>
+            <label for="email" type="text">Your Email:</label>
+            <input id="email" placeholder="[email protected]"></input>
+          </div>
+          <div>
+            <label for="specific-trip">Trip:</label><span id="specific-trip"></span>
+          </div>
+          <input type="submit" value="Reserve Now" class="button"></input>
+        </form>
+      </section>
+    </aside>
+
+  </body>
+  <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>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,53 @@
+$(document).ready( () => {
+  const URL = "https://ada-backtrek-api.herokuapp.com/trips"
+  $('#trips-button').click(() => {
+    $('main').html($('#trips-button'))
+    $('main').append('<h3>All Trips</h3><ul id="trips-container"></ul>');
+    axios.get(URL)
+    .then((response) => {
+      response.data.forEach((trip) => {
+        $('#trips-container').append(`<li class="trip" id="${trip.id}">${trip.name}</li>`);
+      });
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  });
+  $('main').on('click', '.trip', function() {
+    const id = $( this ).attr('id');
+    axios.get(`${URL}/${id}`)
+    .then((response) => {
+        const trip = response.data;
+        $('#details-container').removeClass('hidden');
+        $('#reserve-container').removeClass('hidden');
+        $('#details-container').html('<h3>Trip Details</h3>');
+        $('#details-container').append(
+          `<p><strong>Name:</strong> ${trip.name}</p>
+          <p><strong>Continent:</strong> ${trip.continent}</p>
+          <p><strong>Category:</strong> ${trip.category}</p>
+          <p><strong>Weeks:</strong> ${trip.weeks}</p>
+          <p><strong>Cost:</strong> ${trip.cost}</p>
+          <p><strong>About:</strong></p><p>${trip.about}</p>`
+        );
+        $('span#specific-trip').html(` ${trip.name}`);
+        $('span#specific-trip').attr('class', `${trip.id}`);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  });
+  $('aside').on('submit', '#reserve-form', function(event) {
+    event.preventDefault();
+    const id = $('span#specific-trip').attr('class');
+    const name = $('input#name').val();
+    const email = $('input#email').val();
+    const reservationData = {name: name, email: email}
+    axios.post(`${URL}/${id}/reservations`, reservationData)
+    .then((response) => {
+      console.log(response);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+  });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,153 @@
+body {
+  background-color: #cc4400;
+  color: #331100;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 50px 1fr 1fr 50px;
+  font-family: 'IBM Plex Serif', serif;
+}
+
+header {
+  grid-column: 1 / span 4;
+  border-bottom: 2px solid #331100;
+  background-color: #ffddcc;
+  box-shadow: 2px 5px #331100;
+  margin: 0;
+  margin-bottom: 25px;
+  color: #ffddcc;
+  background-image: url("header_img.JPG");
+  background-size: cover;
+}
+
+h1, h2, h3, table tr th {
+  font-family: 'Molle', cursive;
+  font-size: 3em;
+}
+
+h1 {
+  font-size: 5em;
+  padding: 20px 0 5px 100px;
+  margin: 0;
+}
+
+main {
+  grid-column: 2 / span 1;
+  width: 85%;
+}
+
+aside {
+  grid-column: 3 / span 1;
+  min-width: 425px;
+}
+
+main, aside {
+  text-align: center;
+}
+
+main h3 {
+  margin: 15px 0 0;
+  padding: 15px 0 5px;
+}
+
+h3, ul, ul li, aside > section {
+  border: 2px solid #331100;
+  box-shadow: 2px 5px #331100;
+  background-color: #ffddcc;
+}
+
+h3 {
+  padding-top: 10px;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  height: 615px;
+  overflow: scroll;
+}
+
+ul li {
+  font-size: 1.5em;
+  padding: 10px 0;
+}
+
+ul li:hover {
+  background-color: #331100;
+  color: #ffddcc;
+  border: 2px solid #ffddcc;
+}
+
+.hidden {
+  display: none;
+}
+
+.button {
+  background-color: #331100;
+  color: #ffddcc;
+  font-family: 'IBM Plex Serif', serif;
+  font-weight: bold;
+  font-size: 1.25em;
+  padding: 10px;
+  margin-top: 5px 0 0;
+  border-radius: 10px;
+  width: 65%;
+}
+
+.button:hover {
+  background-color: white;
+  color: #331100;
+}
+
+aside h3 {
+  margin: 15px 0;
+}
+
+aside p {
+  font-size: 1.25em;
+  margin: 0;
+  text-align: left;
+  padding-bottom: 5px;
+}
+
+aside p:first-of-type {
+  font-size: 1.5em;
+}
+
+aside p:last-of-type {
+  height: 150px;
+  overflow: scroll;
+}
+
+aside section:first-child {
+  margin-bottom: 25px;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+label {
+  font-weight: bold;
+  font-size: 1.25em;
+}
+
+div > input {
+  width: 65%;
+  height: 2em;
+}
+
+div {
+  padding-bottom: 15px;
+}
+span#specific-trip {
+  padding-left: 5px;
+  font-size: 1.4em;
+}
+
+aside > section {
+  padding: 0 15px 15px;
+  background-color: #ffddcc;
+}