Ada-C11 · norrise120 · Jun 2, 2019 · Jun 2, 2019 · Jun 2, 2019 · Jun 3, 2019
diff --git a/index.css b/index.css
@@ -0,0 +1,8 @@
+#trek-list {
+    list-style-type: none;
+}
+
+main > * {
+    display: inline-block;
+    vertical-align: top;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trek</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>
+  <section id="status-message"></section>
+
+  <main>
+    <section class="current-treks">
+      <h1>Trek</h1>
+      <button id="load">Get treks</button>
+      <ul id="trek-list"></ul>
+    </section>  
+    <section class="single-trek">
+        <section class="trek-details">
+
+        </section>
+        <section id="trip-form">
+
+        </section>
+    </section>
+
+  </main>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,84 @@
+const TREK_API = "https://trektravel.herokuapp.com/trips";
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+const displayTreks = (trekInfo) => {
+
+  const trekList = $('#trek-list');
+  trekList.empty();
+
+  trekInfo.forEach((trek) => {
+    trekList.append(`<li class="trek" id=${trek.id}>${trek.name}</li>`);
+  });
+};
+
+const displayTrek = (trekInfo) => {
+  const trekDetails = $('.trek-details');
+  trekDetails.empty();
+
+  trekDetails.append(
+    `<h2 class="details">Name: ${trekInfo.name}</h2>`,
+    `<p class="details">Continent: ${trekInfo.continent}</p>`,
+    `<p class="details">Category: ${trekInfo.category}</p>`,
+    `<p class="details">Weeks: ${trekInfo.weeks}</p>`,
+    `<p class="details">Cost: $${trekInfo.cost}</p>`);
+  $("#trip-form").append(`<h2>Reserve a trip!</h2>`);
+  $("#trip-form").append(
+    `<form name=${trekInfo.id}>
+      <label for='name'>Name:</label> 
+      <input type='text' id='name' name='name'>
+      <label for='email'>Email address:</label> 
+      <input type='text' id='email' name='email'>
+      <button type='submit'>Submit!</button>
+    </form>`
+  )
+}
+
+const loadFromAPI = (url, displayFunction) => {
+  reportStatus('Calling Travel API...');
+
+  axios.get(url)
+    .then((response) => {
+      const trekInfo = response.data;
+      displayFunction(trekInfo)
+      reportStatus(`Information successfully loaded!`)
+    })
+    .catch((error) => {
+      reportStatus(`Encountered an error while loading treks: ${error.message}`);
+      console.log(error);
+    })
+}
+
+const submitReservation = (event) => {
+  event.preventDefault();
+
+  let reservationInfo = { 
+    name: $("input[name=name]").val(),
+    email: $("input[name=email]").val(),
+    };
+
+    axios.post(TREK_API + `/${$(event.target).attr("name")}` + `/reservations`, reservationInfo)
+    .then(() => {
+      reportStatus(`You've successfully submitted a reservation!`);
+    })
+    .catch((error) => {
+      reportStatus(`Reservation was unsuccessful: ${error.message}`);
+      console.log(error);
+    });
+}
+
+$(document).ready( function() {
+  $('#load').click( function() {
+    loadFromAPI(TREK_API, displayTreks);
+  })
+
+  $('#trek-list').on('click', 'li', function() {
+    const id = this.getAttribute("id")
+    loadFromAPI((TREK_API + '/' + id), displayTrek)
+  })
+
+  $(document).on("submit", "form", submitReservation);
+});
+