diff --git a/assets/fire2.jpg b/assets/fire2.jpg
new file mode 100644
index 00000000..56f53762
Binary files /dev/null and b/assets/fire2.jpg differ
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..a20bd59d
--- /dev/null
+++ b/index.css
@@ -0,0 +1,95 @@
+.container {
+ display: grid;
+ grid-gap: 25px;
+ grid-template-areas:
+ "header header"
+ "content details"
+ "content details"
+ "content book"
+ "content book"
+ "content book";
+}
+
+header {
+ background-color: grey;
+ background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+ background: rgba(204, 204, 204, 0.5);
+ grid-area: header;
+ padding-bottom: 2%;
+ color: white;
+ border-radius: 5px;
+}
+
+.book {
+ background-color: white;
+ background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+ background: rgba(204, 204, 204, 0.5);
+ grid-area: book;
+ color: white;
+ border-radius: 5px;
+}
+
+.content {
+ background-color: white;
+ background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+ background: rgba(204, 204, 204, 0.5);
+ grid-area: content;
+ color: white;
+ border-radius: 5px;
+}
+
+.details {
+ background-color: white;
+ background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
+ background: rgba(204, 204, 204, 0.5);
+ grid-area: details;
+ color: white;
+ border-radius: 5px;
+}
+
+ul {
+ list-style: none;
+}
+
+#escape-list {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 8%;
+}
+
+body {
+ background: url(./assets/fire2.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
+ margin: 4%;
+ padding-top: 2%;
+}
+
+header h1 {
+ padding: 2%;
+ padding-left: 5%;
+ font-size: 80px !important;
+ font-family: 'Black Ops One', cursive !important;
+ padding-bottom: 0%;
+}
+
+.form-info {
+ padding:4%;
+}
+
+#load {
+ margin: 5%;
+ background-color:#cc3300;
+ font-size: 2em;
+}
+
+input[name="book-escape"] {
+ background-color:#cc3300;
+ float: right;
+}
+
+.detail-list {
+ padding: 5%;
+ margin-right: 5%;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..c16ea0e0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+
+
+
+
+ Trek Project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..3091d1f2
--- /dev/null
+++ b/index.js
@@ -0,0 +1,124 @@
+$(document).ready( function() {
+
+// error handling
+const printError = (error) => {
+ if (error.response.data && error.response.data.errors) {
+ // User our new helper method
+ reportError(
+ `Encountered an error: ${error.message}`,
+ error.response.data.errors
+ );
+ } else {
+ reportStatus(`Encountered an error: ${error.message}`);
+ }
+}
+
+const reportError = (message, errors) => {
+ let content = `${message}
`
+ content += "";
+ for (const field in errors) {
+ for (const problem of errors[field]) {
+ content += `- ${field}: ${problem}
`;
+ }
+ }
+ content += "
";
+ reportStatus(content);
+};
+
+const reportStatus = (message) => {
+ $('#status-message').html(message);
+};
+
+
+// load index of all trips/escapes
+const loadEscapes = () => {
+
+ const getUrl = "https://trektravel.herokuapp.com/trips"
+ const escapeList = $('#escape-list');
+
+ axios.get(getUrl)
+ .then((response) => {
+ escapeList.prepend(`Quick! Get out of here!
`);
+ response.data.forEach((escape) => {
+ const $tripItem = $(`${escape.name}`);
+
+ // creating an event related to each trip after adding it to our index list
+ $tripItem.click(() => {
+ axios.get(getUrl + '/' + escape.id)
+ .then((response) => {
+ showDetailLink(response)
+ })
+ .catch((error) => {
+ printError(error)
+ });
+ })
+
+ escapeList.append($tripItem);
+ })
+ $( "#load" ).remove();
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+}
+
+const showDetailLink = (response) => {
+ let escape = response.data
+ $('.detail-list').empty()
+ $('.detail-list').prepend(`${escape.name}
`)
+
+ $('.detail-list').append(`Continent: ${escape.continent}
+ Category: ${escape.category}
+ Weeks: ${escape.weeks}
+ Cost: ${escape.cost}
+ About: ${escape.about}`)
+ // console.log($('input[name="escape"]'))
+ $('input[name="escape"]').val(`${escape.name}`)
+ $('input[name="id"]').val(`${escape.id}`)
+ $('.hidden').removeClass("hidden")
+}
+
+
+// happens when form submit is executed, creates object literal from form fields
+const readFormData = () => {
+ const formData = {};
+ const name = $(`input[name="name"]`).val();
+ formData['name'] = name ? name : undefined;
+ const email = $(`input[name="email"]`).val();
+ formData['email'] = email ? email : undefined;
+ const escape = $(`input[name="escape"]`).val();
+ formData['escape'] = escape ? escape : undefined;
+ const id = $(`input[name="id"]`).val();
+ formData['id'] = id ? id : undefined;
+ return formData;
+};
+
+
+const bookEscape = () => {
+ //keeps page from refreshing on the submit (default behavior reloads page)
+ event.preventDefault();
+
+ const bookingInfo = readFormData()
+ //clears out form data
+ $( '#escape-form' ).each(function(){
+ this.reset();
+ });
+
+ // build url needed to execute post request
+ const postUrl = `https://trektravel.herokuapp.com/trips/${bookingInfo.id}/reservations`
+ axios.post(postUrl, bookingInfo)
+ .then((response) => {
+ reportStatus('Successfully booked!');
+ })
+ .catch((error) => {
+ printError(error)
+ });
+}
+
+ // event to load all escapes
+ $('#load').click(loadEscapes);
+
+ // creates submit event for the escape booking form
+ $('input[name="book-escape"]').click(bookEscape)
+
+});