Ada-C10 · goeunpark · Nov 21, 2018 · Nov 21, 2018 · Nov 27, 2018 · Nov 27, 2018
diff --git a/index.css b/index.css
@@ -0,0 +1,75 @@
+*{
+  list-style: none;
+  font-family: 'Roboto Mono', monospace;
+}
+
+h1, h2, h4{
+  font-family: 'Roboto Slab', serif;
+}
+body{
+  background-color: rgb(240, 235, 237);
+  margin: 50px;
+}
+
+main{
+  display: grid;
+  grid-template-columns: 2fr 4fr 1fr;
+}
+
+#hidden{
+  visibility: hidden;
+}
+
+.current-trips > *{
+  margin: 20px;
+}
+
+.reservation{
+
+}
+
+#trip-detail{
+  grid-columns: 2 / 3;
+}
+
+.reservation{
+  grid-columns: 2 / 3;
+}
+
+.btn{
+  margin-top: 10px;
+}
+
+.detail-container{
+  background-color: rgba(191, 163, 176, 0.31);
+  margin-left: 20px;
+  margin-right: 30px;
+  padding: 30px;
+}
+
+#name{
+  font-size: 2.5rem;
+  padding-bottom: 5px;
+}
+
+#continent{
+  font-size: 2rem;
+  padding-bottom: 5px;
+}
+
+#about{
+  padding-bottom: 10px;
+}
+#weeks{
+  border-top: 1px solid rgba(167, 162, 168, 0.61);
+  padding-top: 10px;
+}
+
+#trip-list li{
+  padding: 3px;
+}
+
+#trip-list li:hover{
+  background-color: rgb(219, 193, 204);
+  font-style: italic;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>trek trek 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>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto+Slab" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <header>
+    <nav>
+      <h1>🚗 Trek outta here!</h1>
+    </nav>
+  </header>
+
+  <main>
+    <section class="current-trips">
+      <button type="button" class="btn btn-light" id="load">Where to?</button>
+      <ul id="trip-list"></ul>
+    </section>
+
+    <section id="trip-detail">
+    </section>
+
+    <section class="reservation" id="hidden">
+      <h4>Make a reservation for this trip</h4>
+      <form id="reservation-form">
+        <div>
+          <label for="name">Your name</label>
+          <input type="text" name="name" />
+        </div>
+
+        <div>
+          <label for="name">Email</label>
+          <input type="text" name="email" />
+        </div>
+
+        <div>
+          <label for="name">Trip ID</label>
+          <input type="number" name="trip_id" />
+        </div>
+
+        <input type="submit" name="add-trip" value="Add Trip" class="btn btn-light"/>
+      </form>
+    </section>
+  </main>
+
+  <script type="text/javascript" src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,95 @@
+const TRIPS = 'https://trektravel.herokuapp.com/trips';
+
+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 createReservation = (event => {
+  event.preventDefault();
+
+  const reservationData = {
+    name: $('input[name="name"]').val(),
+    email: $('input[name="email"]').val(),
+    trip_id: $('input[name="trip_id"]').val()
+  };
+  console.log(reservationData)
+
+  axios.post(`${TRIPS}/${reservationData.trip_id}/reservations`, reservationData)
+  .then((response) => {
+    reportStatus(`Successfully added a reservation with ID ${response.data.id}`)
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error: ${error.message}`);
+  })
+
+});
+
+const loadTrips = () => {
+  reportStatus("* ~ * loading trips ~ * ~")
+  const tripList = $('#trip-list');
+  tripList.empty();
+
+  axios.get(TRIPS)
+  .then((response) => {
+    reportStatus(`Successfully loaded trips!`)
+
+    response.data.forEach((trip) => {
+      tripList.append(`<li id="${trip.id}">${trip.name}</li>`);
+    });
+  })
+  .catch((error) => {
+    reportError(error);
+    console.log('something went wrong');
+  });
+};
+
+const loadTripDetails = (tripId) => {
+
+  const tripDetails = () => {
+    const detail = $('#trip-detail');
+    detail.empty();
+    axios.get(`${TRIPS}/${tripId}`)
+    .then((response) => {
+      reportStatus(`Successfully loaded detail of trip!`);
+
+      detail.append(`<div class='detail-container'>
+      <h2>Trip ${response.data.id} Details</h2>
+      <li id="name">${response.data.name}</li>
+      <li id="continent">${response.data.continent}</li>
+      <li id="about">${response.data.about}</li>
+      <li id="weeks"><b>Weeks:</b> ${response.data.weeks}</li>
+      <li id="cost"><b>Cost:</b> $${response.data.cost}</li>
+      </div>`);
+    })
+    .catch((error) => {
+      reportError(error);
+      console.log('something went wrong :c');
+    });
+  };
+  return tripDetails();
+};
+
+
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+
+  $('ul').on('click', 'li', function(){
+    const tripId = $(this).attr('id');
+    loadTripDetails(tripId);
+    $('#hidden').css('visibility', 'visible');
+  });
+
+  $('#reservation-form').submit(createReservation);
+});