Ada-C9 · Jcornick21 · May 23, 2018 · May 23, 2018 · May 24, 2018 · May 27, 2018
diff --git a/html.css b/html.css
@@ -0,0 +1,81 @@
+
+
+body{
+  font-family:Signika, Helvetica, Times ;
+  font-size:1em ;
+  margin: 0;
+}
+
+ul{
+  list-style-type: none;
+}
+#hide{
+  display: none;
+}
+
+header {
+ grid-row-start: 1;
+ display: flex;
+ justify-content: center;
+ background-color: black;
+ color: white;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-rows: 10% 85% 5%;
+}
+main {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-row-start: 2;
+  background-color: grey;
+}
+
+#right-aside {
+  display: grid;
+  grid-template-rows: 25% 75%;
+  grid-column-start: 2;
+}
+
+#hide{
+  grid-column-row: 2;
+
+  /* border: .25px solid black; */
+}
+
+.list {
+  grid-column-start: 1;
+  display: flex;
+  justify-content: center;
+  border: 3px solid black;
+}
+
+
+.footer-center{
+  grid-row: 3;
+  display: flex;
+}
+
+.footer-center ul {
+  display: flex;
+}
+
+ .parallax {
+   grid-column-start: 1;
+
+
+  /* The image used */
+  background-image: url("https://picsum.photos/500/");
+
+  /* Set a specific height */
+  height: 50em;
+  overflow: scroll;
+
+  /* Create the parallax scrolling effect */
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Trekitup</title>
+  <link rel="stylesheet" href="html.css">
+</head>
+<body class="grid-container">
+
+  <header>
+    <h1>Get Trekkin!</h1>
+    <div id="status-message">
+
+    </div>
+
+  </header>
+
+  <main>
+    <section class="list parallax">
+      <h1 id="load">See all trips</h1>
+      <ul id="tripList">
+
+      </ul>
+    </section>
+
+    <aside id="right-aside">
+      <section id="hide">
+        <h3>Trip Details</h3>
+
+        <ul id="details">
+
+        </ul>
+
+        <form id="tripForm">
+          <div>
+            <label for="name">name</label>
+            <input type="text" name="name"/>
+          </div>
+          <div>
+            <label for="age">age</label>
+            <input id="age" type="text" name="age"/>
+          </div>
+          <div>
+            <label for="email">email</label>
+            <input type="integer" name="email"/>
+          </div>
+
+          <input type="submit" name="reserve" value="reserve">
+        </form>
+
+      </section>
+    </aside>
+
+  </main>
+
+  <footer class="footer-center">
+    <h5>&copy; Trekitup 2018</h5>
+    <ul>
+      <li><small><a href="about.html">contact me!</a></small></li>
+      <li><small><a href="about.html">Help</a></small></li>
+    </ul>
+  </footer>
+
+  <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,112 @@
+
+const allTripsURL = 'https://ada-backtrek-api.herokuapp.com/trips'
+
+const reportStatus = (message) => {
+  $('#status-message').html(message);
+};
+
+const reportError = (message, errors) => {
+  let content = `<p>${message}</p><ul>`;
+  for (const field in errors) {
+    for (const problem of errors[field]) {
+      content += `<li>${field}: ${problem}</li>`;
+    }
+  }
+  content += "</ul>";
+  reportStatus(content);
+};
+
+const listallTrips = () => {
+  reportStatus('Loading something...');
+  const tripsList = $('#tripList')
+  tripsList.empty();
+
+  axios.get(allTripsURL)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.length} trips`);
+    console.log(response);
+    const result = response.data
+    result.forEach((place) => {
+      tripsList.append(`<li id='${place.id}'>${place.name}</li>`);
+    })
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+
+}; //end of listallTrips
+
+const tripDetails = (trip) => {
+
+  const aboutTrip = $('#details')
+  const singleTripUrl = 'https://ada-backtrek-api.herokuapp.com/trips/'
+  reportStatus('Loading a single something...');
+  console.log(trip);
+
+  axios.get(singleTripUrl + trip.id)
+  .then((response) => {
+    reportStatus(`Successfully loaded ${response.data.name} trip`);
+    console.log(response);
+    const result = response.data
+    for (attr in result) {
+      aboutTrip.append(`<li>${result[attr]}</li>`);
+    }
+    $('#hide').show();
+
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+
+} //end of Trip details
+
+const createReservation = (reservation, trip) => {
+  // console.log(reservation);
+  // console.log(trip);
+
+  const reservationData = {
+    name: $('input[name="name"]').val(),
+    age: $('input[name="age"]').val(),
+    email: $('input[name="email"]').val()
+  }
+
+  const reservationURL = `https://ada-backtrek-api.herokuapp.com/trips/${trip.id}/reservations`
+
+  axios.post(reservationURL, reservationData  )
+  .then((response) => {
+    reportStatus(`Successfully created something`);
+    console.log(response);
+  })
+  .catch((error) => {
+    reportStatus(`Encountered an error while loading trips: ${error.message}`);
+    console.log(error);
+  });
+
+}; //end of createReservation
+
+
+
+$(document).ready(() => {
+  $('#load').click(listallTrips);
+
+  $('ul').on('click', 'li', function(){
+
+    const trip = this
+
+    tripDetails(trip);
+
+    $('form').submit( function(event) {
+      event.preventDefault();
+      const reservation = this
+      console.log(trip);
+
+      createReservation(reservation, trip);
+
+
+    });
+  });
+
+
+});