diff --git a/index.html b/index.html
new file mode 100644
index 00000000..1fedbfd3
--- /dev/null
+++ b/index.html
@@ -0,0 +1,32 @@
+
+
+
+
+ TREK
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..06e6c0c5
--- /dev/null
+++ b/index.js
@@ -0,0 +1,103 @@
+const FORM_FIELDS = ['name', 'email'];
+
+const INFO_FIELD = ['about','continent', 'category', 'weeks', 'cost'];
+
+const URL = 'https://trektravel.herokuapp.com/trips';
+const getTripURL = (tripId) => { return `${URL}/${tripId}` };
+const getReservationURL = (tripId) => { return `${getTripURL(tripId)}/reservations` };
+
+const getInfo = (info) => {
+ let requestedInfo = `${info['name']}
`;
+ INFO_FIELD.forEach((infoField) => {
+ requestedInfo +=
+ `${infoField}: ${info[`${infoField}`]}
`;
+ });
+ requestedInfo += ``;
+ return requestedInfo;
+};
+
+const getFieldName = (field) => {
+ return ``;
+};
+
+const inputField = name => $(`#reservation-form input[name='${name}']`);
+const getInput = name => { return inputField(name).val() || undefined };
+
+const reservationFormData = () => {
+ const formData = {};
+ FORM_FIELDS.forEach((field) => { formData[field] = getInput(field) });
+ return formData;
+};
+
+const loadForm = () => {
+ let formData = ``;
+ return formData;
+};
+
+const clearForm = () => { FORM_FIELDS.forEach((field) => { inputField(field).val(''); }) };
+
+const reportStatus = (message) => { $('#status-message').html(message); };
+
+const loadTrips = () => {
+ const tripsList = $('#trips-list');
+ tripsList.empty();
+
+ axios.get(URL)
+ .then((response) => {
+ response.data.forEach((trip) => {
+ tripsList.append(`${trip.name}`)
+ });
+ })
+ .catch((error) => {
+ console.log(error);
+ reportStatus(`Error: ${error.message}`);
+ });
+};
+
+const getTrip = (tripID) => {
+ const tripInfo = $('#right-side-info');
+ tripInfo.empty();
+ axios.get(getTripURL(tripID))
+ .then((response) => {
+ tripInfo.append(getInfo(response.data))
+ .append(loadForm());
+ $('#reservation-form').submit(function(event) { createReservation(event, tripID); });
+ })
+ .catch((error) => {
+ console.log(error);
+ reportStatus(`Error: ${error.message}`);
+ });
+};
+
+const createReservation = (event, tripID) => {
+ event.preventDefault();
+ axios.post(getReservationURL(tripID), reservationFormData())
+ .then((response) => {
+ reportStatus(`Successfully added a reservation with ID ${response.data.trip_id}!`);
+ })
+ .catch((error) => {
+ console.log(error.response);
+ reportStatus(`Encountered an error while creating a reservation: ${error.message}`);
+ });
+ clearForm();
+};
+
+$(document).ready(() => {
+ $('.hidden-at-start').hide();
+
+ $('#load-trips-button').on('click', function() {
+ $('#list').slideDown('slow');
+ loadTrips(null);
+ });
+
+ $('#trips-list').on('click', function(event) {
+ $('.side-info').slideUp('slow')
+ .promise().done(function() {
+ getTrip(event.target.classList[1]);
+ $('.side-info').slideDown('slow');
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..3cd02ab7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,90 @@
+ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+html {
+ background: url("https://images.unsplash.com/photo-1537522306408-8435f315b2e3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=7524eb105d6f756457a2747a3a49a501&auto=format&fit=crop&w=1950&q=80") no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+body::after {
+ filter: blur(13px);
+}
+
+body {
+ margin-left: 15%;
+ margin-right: 15%;
+ background: none;
+}
+
+.container {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-areas:
+ "nav nav"
+ "list right-side-info";
+}
+
+#whole-right-subside {
+ height: 100%;
+ border-bottom-right-radius: 15px;
+ border-bottom: 6px solid red;
+}
+
+.nav {
+ height: 75px;
+ background-color: white;
+ grid-area: nav;
+}
+
+#list {
+ height: 45rem;
+ border-bottom-left-radius: 15px;
+ grid-area: list;
+ border-bottom: 6px solid red;
+ }
+
+#right-side-info {
+ height: 50rem;
+ grid-area: right-side-info;
+ border-bottom-right-radius: 15px;
+ display: grid;
+ grid-template-rows: 30rem 15rem;
+ grid-template-areas:
+ "trip-info"
+ "book";
+}
+
+#trip-info {
+ overflow: scroll;
+ grid-area: trip-info;
+}
+
+#book {
+ height: 100%;
+ grid-area: book;
+ border-bottom-right-radius: 15px;
+ border-bottom: 6px solid red;
+}
+
+#trips-list {
+ overflow: scroll;
+ max-height: 38rem;
+}
+
+#book, #trip-info, #list, #trips-list, #whole-right-subside {
+ background-color: white;
+ padding: 5px;
+}
+
+.info-field {
+ text-align: justify;
+}
+
+.green {
+ background-color: green;
+}