Ada-C9 · aruna79 · May 23, 2018 · May 23, 2018 · May 28, 2018 · May 28, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trips</title>
+  <!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/foundation/6.2.3/foundation.min.css"> -->
+
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <header>
+    <div id="header">TREK</div>
+
+  </header>
+
+  <main class="tripcontainer">
+    <div class="buttoncontainer">
+      <section id="status-message"></section>
+    <section class="button">
+      <button id="load" class="button">Get trips!</button>
+    </section>
+  </div>
+    <div class="triplist">
+      <ul id="trip-list"></ul>
+
+    </div>
+    <div class="tripdetail">
+      <h4>Trip Details</h4>
+      <section id="trip"></section>
+    </div>
+    <div class="tripreservation">
+      <h4>Reserve Trip</h4>
+      <section id="reservation">
+
+
+    </div>
+  </main>
+
+  <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>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,100 @@
+const URL = 'https://ada-backtrek-api.herokuapp.com/trips/';
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+}
+
+const loadTrips = () => {
+
+  const tripList = $('#trip-list');
+  tripList.empty();
+
+  reportStatus('Loading Trips! Please Wait...');
+
+  axios.get(URL)
+  .then((response) => {
+    response.data.forEach((trip) => {
+      tripList.append(`<li id="${trip.id}">${trip.name}</li>`);
+    });
+    reportStatus('Trips Loaded!');
+  })
+  .catch((error) => {
+    reportStatus(`Error: ${error.message}`);
+  })
+}
+const loadTrip = (id) => {
+
+  const tripInfo = $('#trip');
+  tripInfo.empty();
+  const reservationInfo = $('#reservation');
+  reservationInfo.empty();
+
+  reportStatus('Loading Trip Details! Please Wait...')
+
+  axios.get(URL + `${id}`)
+  .then((response) => {
+
+    let data = response.data;
+    console.log(data.name);
+
+
+    tripInfo.append(`<li><strong>Name: </strong>${data.name}</li>`);
+    tripInfo.append(`<li>Continent: ${data.continent}</li>`);
+    tripInfo.append(`<li>Category:${data.category}</li>`);
+    tripInfo.append(`<li>Weeks: ${data.weeks}</li>`);
+    tripInfo.append(`<li>Cost: ${data.cost}</li>`);
+    tripInfo.append(`<li>About:${data.about}</li>`);
+    console.log(tripInfo);
+
+    reservationInfo.append(
+      `<label class="user"> Name:</label>
+      <input type="text" name="name" class="form"/><br>`
+
+    );
+    reservationInfo.append(
+      `<label class="user">Email:</label>
+      <input type="text" name="email" class="form"/><br>`
+    );
+    reservationInfo.append(`<label>Trip: ${data.name}</label><br>`);
+    reservationInfo.append(
+      `<input type="submit" name="reserve-trip" class="reserve" id="reserve${data.id}"/>`
+    );
+    reportStatus('Trip Details Loaded!');
+  })
+  .catch((error) => {
+    reportStatus(`Error: ${error.message}`);
+  })
+}
+const reservationData = (id) => {
+  let tripData = {name: $(`input[name="name"]`).val(),
+  email:$(`input[name="email"]`).val()
+}
+console.log(reservationData);
+
+reportStatus('Reserving a trip...');
+
+axios.post(URL + `${id}/reservations`, tripData)
+.then((response) => {
+  console.log('The post req was succesful')
+  reportStatus(`Successfully reserved this trip ${response.data.name}!`);
+
+})
+.catch((error) => {
+  console.log(error.response);
+
+  reportStatus(`Encountered an error: ${error.message}`);
+});
+
+};
+$(document).ready(() => {
+  $('#load').click(loadTrips);
+  $('#trip-list').on('click', 'li', function() {
+    let id = $(this).attr('id');
+    loadTrip(id);
+  });
+  $('#reservation').on('click', '.reserve', function(){
+    let id = $(this).attr('id').substr(7);
+    console.log(id);
+    reservationData(id);
+  });
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,50 @@
+
+body{
+
+/* background-color: lightblue; */
+  background-image: url("trips.jpeg");
+  height: 100%;
+  padding: 2rem;
+
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+
+
+header{
+
+
+}
+*{
+  list-style-type: none;
+}
+.tripcontainer{
+  display: grid;
+  grid-template-columns: auto auto;
+  align-content: space-around;
+  /* border: 1px solid black; */
+  font-size: 12px;
+
+
+}
+.buttoncontainer{
+  grid-column: 1/3;
+  border: 1px solid black;
+}
+.triplist{
+  grid-row: 2/5;
+  border: 1px solid black;
+  text-decoration: underline;
+
+}
+.tripdetail{
+  border: 1px solid black;
+  padding:5px;
+}
+.tripreservation{
+border: 1px solid black;
+padding:5px;
+}
diff --git a/travel.jpeg b/travel.jpeg
diff --git a/trek.jpeg b/trek.jpeg
diff --git a/trips.jpeg b/trips.jpeg