diff --git a/halftone-yellow.png b/halftone-yellow.png
new file mode 100644
index 00000000..fddbd56e
Binary files /dev/null and b/halftone-yellow.png differ
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..c85d967a
--- /dev/null
+++ b/index.css
@@ -0,0 +1,91 @@
+* {
+ font-family: 'Montserrat', sans-serif;
+}
+
+h1 {
+font-size: 7em;
+letter-spacing: 10px;
+}
+
+#header {
+ background-image: url('./halftone-yellow.png');
+ text-align: center;
+ height: 300px;
+ grid-column: 1 / 3;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ justify-content: center;
+ padding-right: 6em;
+ padding-left: 6em;
+}
+
+#status-message {
+ background-color: #eeeeee;
+ grid-column: 1 / 3;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#trip-information {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
+
+#all-trips {
+ padding: 3em;
+ grid-column: 1 / 2;
+}
+
+#tripDetails {
+ padding: 3em;
+ grid-column: 2 / 3;
+}
+
+#trip-list {
+ display: flex;
+ flex-flow: wrap;
+ justify-content: flex-start;
+}
+
+#trip-list div:nth-child(4n+1) {
+ background-color: #96ceb4;
+}
+
+#trip-list div:nth-child(4n+2) {
+ background-color: #ffeead;
+}
+
+#trip-list div:nth-child(4n+3) {
+ background-color: #ff6f69;
+}
+
+#trip-list div:nth-child(4n+4) {
+ background-color: #ffcc5c;
+}
+
+.card-body {
+ border-radius: 20px;
+ width: 25%;
+ margin: 1em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ text-align: center;
+}
+
+.button {
+ margin-top: 10px;
+}
+
+.btn-danger {
+ margin-top: 2em;
+}
+
+#reservation-form {
+ background-color: #eeeeee;
+ padding: 2em;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..7361a4b0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+ Trek
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..3b5da184
--- /dev/null
+++ b/index.js
@@ -0,0 +1,145 @@
+const URL = 'https://trektravel.herokuapp.com/trips';
+
+
+const reportStatus = (message) => {
+ $('#status-message').html(message);
+};
+
+
+const reportError = (message, errors) => {
+ let content = `${message}
`;
+ for (const field in errors) {
+ for (const problem of errors[field]) {
+ content += `- ${field}: ${problem}
`;
+ }
+ }
+ content += "
";
+ reportStatus(content);
+};
+
+
+const loadTrips = () => {
+ reportStatus('Loading trips...');
+ const tripList = $('#trip-list');
+
+ axios.get(URL)
+ .then((response) => {
+ reportStatus(`Successfully loaded ${response.data.length} trips`);
+
+ response.data.forEach((trip) => {
+ tripList.append(`${trip.name}
`);
+ });
+ })
+
+ .catch((error) => {
+ reportStatus(`Encountered an error: ${error.message}`);
+ console.log(error);
+ });
+};
+
+
+const showTrip = (id) => {
+
+ const tripInfo = $('#tripTable');
+ tripInfo.empty();
+
+ const URL2 = `https://trektravel.herokuapp.com/trips/${id}`;
+
+ axios.get(URL2)
+ .then((response) => {
+ let tripId = response.data.id;
+ tripInfo.append(` |
`);
+ Object.keys(response.data).forEach((key) => {
+ tripInfo.append(`| ${key} | ${response.data[key]} |
|---|
`);
+ });
+ showReservationForm(tripId);
+
+ });
+};
+
+
+const showReservationForm = (tripId) => {
+
+ const reservationForm = $('#reservations');
+
+ reservationForm.append(`
+
+ `)
+};
+
+
+const readFormData = () => {
+ const parsedFormData = {};
+
+ const nameFromForm = $(`#reservation-form input[name="name"]`).val();
+ parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+ const emailFromForm = $(`#reservation-form input[name="email"]`).val();
+ parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+ return parsedFormData;
+}
+
+
+const clearForm = () => {
+ $(`#reservation-form input[name="name"]`).val('');
+ $(`#reservation-form input[name="email"]`).val('');
+}
+
+
+const createReservation = (tripId) => {
+
+ const reservationData = readFormData();
+ console.log(reservationData);
+ console.log(tripId);
+
+ const URL3 = `https://trektravel.herokuapp.com/trips/${tripId}/reservations`;
+ console.log(URL3);
+
+ reportStatus('Sending reservation data...');
+
+ axios.post(URL3, reservationData)
+ .then((response) => {
+ reportStatus(`Successfully created a new reservation for ${response.data.name}`);
+ clearForm();
+ })
+ .catch((error) => {
+ console.log(error.response);
+ if (error.response.data && error.response.data.errors) {
+ reportError( `Encountered an error: ${error.message}`, error.response.data.errors);
+ } else {
+ reportStatus(`Encountered an error: ${error.message}`);
+ }
+ });
+};
+
+
+$(document).ready(() => {
+ $('#trips').click(loadTrips);
+
+ $('#trip-list').on('click', '.button', function() {
+ $( 'h2' ).remove();
+ $( '#reservation-form' ).remove();
+ let newId = $(this).attr('id');
+ showTrip(newId);
+ });
+
+ $('#reservations').on('submit', 'form', function(event) {
+ let tripId = $(this).attr('class');
+ event.preventDefault();
+ createReservation(tripId);
+ });
+});