diff --git a/index.css b/index.css
new file mode 100644
index 00000000..ddeb9795
--- /dev/null
+++ b/index.css
@@ -0,0 +1,91 @@
+body {
+ margin-top: 3rem;
+ margin-left: 3rem;
+ margin-right: 2rem;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-template-rows: 1fr auto 1fr;
+ grid-column-gap: 0px;
+ grid-row-gap: 0px;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ font-size: 20px;
+}
+
+li {
+ list-style: none;
+ padding: 5px;
+}
+
+img {
+ height: 200px;
+ width: 200px;
+ display: inline;
+}
+
+a {
+ text-decoration: none;
+ color: black;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+#header {
+ grid-row: 1;
+ grid-column: 1 / span 3;
+ display: flex;
+}
+
+#brand {
+ margin-left: 4rem;
+ font-family: 'SignPainter', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ font-size: 7rem;
+}
+
+#tagline {
+ font-size: 2rem;
+}
+
+#load {
+ font-size: 20px;
+ border-radius: 12px;
+ padding: 1rem;
+}
+
+.submit-button {
+ margin-top: 10px;
+ font-size: 15px;
+ border-radius: 12px;
+ padding: 10px;
+}
+
+.current-trips,
+#trip-list,
+#europe-list,
+#africa-list,
+#samerica-list,
+#namerica-list,
+#asia-list,
+#australasia-list {
+ grid-column: 1;
+ grid-row: 2;
+}
+
+#expand-details {
+ grid-column: 2;
+ grid-row: 2;
+}
+
+.new-trip {
+ grid-column: 3;
+ grid-row: 2;
+ visibility: hidden;
+}
+
+#confirmation {
+ display: grid;
+ grid-column: 3;
+ grid-row: 2;
+ margin-top: 10rem;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..3fd67fd2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+ TREK
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..1bca72bd
--- /dev/null
+++ b/index.js
@@ -0,0 +1,140 @@
+const tripsURL = 'https://trektravel.herokuapp.com/trips';
+//
+
+$( ".new-trip" ).hide();
+
+// Status Management
+//
+const reportStatus = (message) => {
+ $('#status-message').html(message).fadeOut(5000);;
+};
+
+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 showTrip = (trip) => {
+ const target = $('#trip-details');
+ target.empty();
+ target.append(
+ `Trip Details
+ ${trip.id}
+ Name: ${trip.name}
+ Category: ${trip.category}
+ Continent: ${trip.continent}
+ Cost: $${trip.cost}
+ Duration in weeks: ${trip.weeks}`
+ )
+
+ const showReservation = $('.new-trip');
+ showReservation.css("visibility", "visible");
+}
+
+const callTrip = (id) => {
+
+ const loadTrip = () => {
+ axios.get(tripsURL+`/${id}`)
+ .then((response) => {
+ showTrip(response.data);
+
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+ }
+ return loadTrip;
+};
+
+
+const loadTrips = () => {
+ const target = $(`#trip-list`);
+ target.empty();
+
+ reportStatus('Loading trips...');
+
+ axios.get(tripsURL)
+ .then((response) => {
+ const trips = response.data;
+
+ reportStatus(`Successfully loaded ${trips.length} trips`);
+
+ trips.forEach((trip) => {
+ target.append(`${trip.name}`);
+
+ const tripClickHandler = callTrip(trip.id);
+ // console.log(`${trip.id}`)
+ $(`.${trip.id}`).on('click', tripClickHandler);
+ })
+
+ })
+
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+};
+
+//
+// Reserving trips
+//
+const readFormData = () => {
+ const parsedFormData = {};
+
+ const nameFromForm = $(`#trip-form input[name="name"]`).val();
+ parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+ const emailFromForm = $(`#trip-form input[name="email"]`).val();
+ parsedFormData['email'] = emailFromForm ? emailFromForm : undefined;
+
+ return parsedFormData;
+};
+
+const clearForm = () => {
+ $(`#trip-form input[name="name"]`).val('');
+ $(`#trip-form input[name="email"]`).val('');
+}
+
+const reserveTrip = (event) => {
+ event.preventDefault();
+
+ const tripData = readFormData();
+ console.log(tripData);
+ const id = parseInt($(".trip-id").text());
+ console.log(id);
+
+ reportStatus('Sending trip data...');
+
+ axios.post(tripsURL+`/${id}/reservations`, tripData)
+ .then((response) => {
+ $('#confirmation').append(`You have successfully reserved a trip. A confirmation email was sent to ${response.data.email}.
`)
+ console.log(response)
+ reportStatus(`Successfully added a trip with ID ${response.data.id}!`);
+ 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(() => {
+ $('#load').click(loadTrips);
+ $('#trip-form').submit(reserveTrip);
+});
diff --git a/travel-logo.png b/travel-logo.png
new file mode 100644
index 00000000..d8bbf995
Binary files /dev/null and b/travel-logo.png differ
+