Ada-C11 · AngelaOh · May 30, 2019 · May 31, 2019 · May 31, 2019 · May 31, 2019
diff --git a/background.jpg b/background.jpg
diff --git a/headerImage.jpg b/headerImage.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,120 @@
+@import url('https://fonts.googleapis.com/css?family=Mandali&display=swap');
+
+body {
+    color: white;
+    font-family: 'Mandali', sans-serif;
+    background-image: url("./headerImage.jpg");
+    background-size: cover;
+    background-position: center;
+
+}
+main {
+    display: grid;
+    grid-template: auto 1fr 1fr / 40% 60%;
+}
+header {
+    grid-row: 1;
+    grid-column: 1 / span 2;
+    text-align: center;
+    margin-bottom: 50px;
+}
+header h1 {
+    font-size: 50px;
+}
+header h1 strong {
+    font-size: 70px;
+}
+#load {
+    border-radius: 10px;
+    height: 85px;
+    width: 200px;
+    color: white;
+    font-size: 35px;
+    background: navy;
+    background-image: linear-gradient(black, navy);
+}
+#status-message {
+    font-style: italic;
+}
+
+/* ALL TRIPS STYLING */
+ul#trip-list {
+    margin-top: 0;
+}
+.all-trips h1 {
+    text-decoration: underline;
+    font-size: 50px;
+}
+.all-trips {
+    grid-column: 1;
+    grid-row: 2 / span 2;
+    margin-left: 20px;
+    text-align: center;
+}
+.all-trips h1 {
+    text-align: center;
+}
+.all-trips ul {
+    padding-left: 0;
+}
+.all-trips li {
+    list-style: none;
+    text-align: center;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+/* ONE TRIP DETAILS STYLING */
+section.trip-details {
+    grid-column: 2;
+    grid-row: 2;
+    margin-left: 50px;
+    margin-right: 20px;
+    height: auto; 
+    padding: 15px;
+    text-align: center;
+}
+.trip-details h1 {
+    text-decoration: underline;
+    font-size: 50px;
+}
+.trip-details h3 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+.trip-details p {
+    font-size: 11px;
+}
+
+/* RESERVATION STYLING */
+#reserve-trip {
+    grid-column: 2;
+    grid-row: 3;
+    margin-left: 50px;
+    margin-right: 20px;
+    margin-top: 15px;
+
+    text-align: center;
+    min-height: auto;
+    height: 300px;
+}
+#reserve-trip h1 {
+    text-decoration: underline;
+    font-size: 50px;
+}
+.hide-form {
+    display: none;
+}
+
+.border {
+    border: 3px solid white;
+}
+.background {
+    background: lightpink;
+}
+
+button {
+    background: bisque;
+    color: navy;
+    padding: 5px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!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>
+  <header>
+    <section id="status-message"></section>
+    <h1>- <strong>TREK |</strong> Travel the World - </h1>
+    <button id="load">Get Trips!</button>
+  </header>
+
+  <main>
+    <section class="all-trips">
+      <ul id="trip-list"></ul>
+    </section>
+
+    <section class="trip-details">
+    </section>
+
+    <section class='hide-form' id="reserve-trip">
+        <h1>Book This Trip!</h1>
+        <form id="reserve-form">
+            <div>
+                <label for="name">Name</label>
+                <input type="text" name="name" />
+            </div>
+
+            <div>
+                <label for="email">Email</label>
+                <input type="text" name="email" />
+            </div>
+
+            <input type="submit" name="add-pet" value="Reserve Trip!" />
+        </form>
+    </section>
+
+  </main>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,64 @@
+const TRIPSURL = 'https://trektravel.herokuapp.com/trips'
+// const RESERVEURL = 'https://trektravel.herokuapp.com/trips/1/reservations'
+
+
+const reportStatus = (message) => {
+    const statusContainer = $('#status-message');
+    statusContainer.empty();
+    statusContainer.append(`<p>${message}</p>`);
+  };
+
+const loadTrips = () => {
+    const tripsList = $('#trip-list')
+    tripsList.empty();
+    tripsList.append('<h1>~ Your Next Trips ~</h1>');
+    tripsList.addClass('border')
+    // $('main').addClass('background')
+
+
+    axios.get(TRIPSURL)
+        .then((response) => {
+            reportStatus(`Successfully loaded ${response.data.length} trips!`);
+            response.data.forEach((trip) => {
+                tripsList.append(`<li><button class='${trip.id}'>${trip.name}</button></li>`)
+                // $('li').addClass('border')
+            })
+        })
+        .catch((error) => {
+            reportStatus(`Encountered an error while loading trips: ${error.message}`);
+            console.log(error)
+        });
+}
+
+const loadDetails = (id) => {
+    const tripDetail = $('.trip-details');
+    tripDetail.empty();
+    tripDetail.append('<h1>Trip Details</h1>')
+    tripDetail.addClass('border')
+    $('#reserve-trip').addClass('border')
+
+    axios.get(TRIPSURL + `/${id}`)
+        .then((response) => {
+            let tripInfo = response.data
+            reportStatus(`Successfully loaded ${tripInfo.name} trips!`);
+            tripDetail.append(`<h3>Name: ${tripInfo.name}</h3>`)
+            tripDetail.append(`<h3>Continent: ${tripInfo.continent}</h3>`)
+            tripDetail.append(`<h3>Category: ${tripInfo.category}</h3>`)
+            tripDetail.append(`<h3>Weeks: ${tripInfo.week}</h3>`)
+            tripDetail.append(`<h3>Cost: $${tripInfo.cost}</h3>`)
+            tripDetail.append(`<h3>About:</h3> <p>${tripInfo.about}</p>`)
+        })
+        .catch((error) => {
+            reportStatus(`Encountered an error while loading trips: ${error.message}`);
+            console.log(error)
+        })
+}
+
+  $(document).ready(() => {
+    $('#load').on('click', loadTrips);
+    $('ul#trip-list').on('click', 'button', function() {
+        const tripId = this.className
+        loadDetails(tripId)
+        $('#reserve-trip').show();
+    });
+  });