diff --git a/index.html b/index.html
new file mode 100644
index 00000000..8e80b03d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Shamira's 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="style.css">
+</head>
+<body>
+  <section id="status-message"></section>
+
+  <main>
+    <section class="current-trips">
+      <h1>List of Trips</h1>
+      <button id="load-trips">Get Trips!</button>
+      <ul id="trip-list"></ul>
+    </section>
+
+    <section id="details">
+
+    </section>
+
+    <section class="new-trip" id="reserve-trip">
+      <h1>Reserve Trip!</h1>
+      <form id="trip-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>
+
+        <button id="add-trip"> Reserve Trip </button>
+      </form>
+    </section>
+
+    
+
+    </section>
+  </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..05a88c4e
--- /dev/null
+++ b/index.js
@@ -0,0 +1,129 @@
+const TRIPSURL = 'https://trektravel.herokuapp.com/trips/'
+
+
+// error handling from panopto video
+
+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(info);
+// };
+
+// Gets All Trips - from Ada Pets  
+const loadTrips = () => {
+  reportStatus('Loading trips...');
+
+  const tripList = $('#trip-list');
+  tripList.empty();
+  
+  
+  axios.get(TRIPSURL)
+    .then((response) => {
+      let listOfTrips = response.data
+
+      reportStatus(`Successfully loaded ${listOfTrips.length} trips`);
+      console.log('Loading trips works!');
+      //loops through response to print the trip name
+      listOfTrips.forEach((trip) => {
+        let currentTrip = $(`<li>${trip.name}</li>`);
+        currentTrip.addClass(`${trip.id}`);
+        tripList.append(currentTrip);
+      })
+    })
+  .catch((error) => {
+    reportStatus(`Error while loading trips: ${error.message}`);
+    console.log(error);
+  })
+};
+// Trip Details 
+const detailsTrips = (event) => {
+  let tripID = event.target.className;
+  let tripDetailsURL = `https://trektravel.herokuapp.com/trips/${tripID}`;
+  reportStatus("Loading details...");
+
+   const tripDetails = $("#details");
+   tripDetails.empty();
+
+   axios.get(tripDetailsURL)
+    .then((response) => {
+      reportStatus(`Successfully loaded trip for ${response.data.name}`);
+      console.log('Succefully loaded trip!');
+
+      tripDetails.html(
+        `<h2>${response.data.name} in ${response.data.continent}</h2>
+        <h3>Cost: $${response.data.cost}</h3>
+        <h3>Category: ${response.data.category}</h3>
+        <h3>Weeks: ${response.data.weeks}</h3>
+        <h3>About:</h3><p>${response.data.about}</p>`
+      )
+    })
+
+    .catch((error) => {
+      reportStatus(
+        `Encountered an error while loading trips: ${tripID}: ${error.message}`
+      );
+      console.log(error);
+    });
+};
+
+// Make a reservation 
+ 
+const readFormData = () => {
+    let parsedData = {};
+
+    parsedData.name = $("input[name='name']").val();
+    parsedData.email = $("input[name='email']").val();
+
+    return parsedData;
+  };
+
+const clearForm = () => {
+  $('#trip-form input[name="name"]').val('');
+  $('#trip-form input[name="email"]').val('');
+}
+
+const reservation = (event) => {
+  
+  event.preventDefault();
+  console.log('this works')
+
+  
+  const tripID = event.target.className;
+  const createTripURL = `https://trektravel.herokuapp.com/trips/${tripID}/reservations`;
+  let tripData = readFormData();
+  reportStatus('Sending trip data...');
+  
+  console.log("About to post trip data", tripData)
+  // keep getting a 404 not found. The data isn't being read
+  axios.post(createTripURL, tripData)
+    .then((response) => {
+      console.log(response);
+      reportStatus(`Successfully added trip! ${response.data.id}`);
+      clearForm();
+    })
+    .catch((error) => {
+      console.log(error.response)
+      if(error.response.data && error.response.data.errors) {
+      reportStatus(`There was an error loading this trip: ${error.message}`, error.response.data.errors);
+    } else {
+      reportStatus(`There was an error loading this trip: ${error.message}`);
+    }
+   });
+};
+
+$(document).on('click', 'li', detailsTrips);
+$(document).on('submit', 'form', reservation);
+
+$(document).ready(() => {
+  $('#load-trips').click(loadTrips);
+  $('form').submit(readFormData);
+});
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..f4161127
--- /dev/null
+++ b/style.css
@@ -0,0 +1,23 @@
+body {
+  background-color: #FFC2AD;
+}
+
+main {
+  display: flex; 
+}
+
+h2 {
+  color: #CC6D4E;
+}
+
+h3 {
+  color: #FF8960;
+}
+
+li {
+  color: #CC6D4E 
+}
+
+ul {
+  list-style-type: none;
+}
\ No newline at end of file
