diff --git a/index.css b/index.css
new file mode 100644
index 00000000..a0ca77df
--- /dev/null
+++ b/index.css
@@ -0,0 +1,66 @@
+
+
+body {
+ display: grid;
+ margin-left: 25px;
+ margin-right: 25px;
+ grid-template: 100px fit-content(10%) 1fr 2fr / 1fr 2fr;
+}
+
+h1, h2, h3 {
+ font-family: 'Baloo Da', cursive;
+}
+
+h1 {
+ font-size: 4em;
+ color: white;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ list-style-type: none;
+ line-height: 1.5em;
+}
+
+#logo {
+ text-align: center;
+ background-color: lightblue;
+ grid-column: span 2;
+}
+
+#load {
+ margin-bottom: 25px;
+}
+
+#trips {
+ grid-row: span 2;
+ padding-right: 25px;
+}
+
+#status-message {
+ min-height: 10px;
+ grid-column: span 2;
+}
+
+#trip-details {
+ grid-row: 3 / span 1;
+ min-height: 100px;
+ grid-column: 2;
+}
+
+#form-section {
+ grid-column: 2;
+ grid-row: 4;
+}
+
+#submit-div {
+ padding-top: 15px;
+}
+
+.hidden {
+ display: none;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..775b100f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TREK
+
+
+
+
+
+
+
+
+
+
+
+ Trip Details
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..3f3b5cb6
--- /dev/null
+++ b/index.js
@@ -0,0 +1,115 @@
+const URL = 'https://trektravel.herokuapp.com/trips';
+
+
+const reportStatus = (message, alertClass) => {
+ $('#status-message').removeClass();
+ $('#status-message').addClass(alertClass);
+ $('#status-message').html(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, "alert alert-warning");
+ };
+
+const clearForm = () => {
+ $('#trip-form').get(0).reset();
+};
+
+
+
+const loadTrips = () => {
+ reportStatus('Loading trips...');
+
+ const tripList = $('#trips-list');
+ tripList.empty();
+
+ axios.get(URL)
+ .then((response) => {
+ reportStatus(`Successfully loaded ${response.data.length} trips`, "alert alert-success");
+ response.data.forEach((trip) => {
+ tripList.append(`${trip.name}
`);
+ $(`#${trip.id}`).click(function () {
+ showTrip(trip.id);
+ });
+ });
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+};
+
+const showTrip = (index) => {
+ $('#status-message').removeClass();
+ $('#status-message').html('');
+
+ axios.get(URL + `/${index}`)
+ .then((response) => {
+ $('#form-section').removeClass('hidden');
+ $('#trip-form').submit(function (event) {
+ $('#tripID').val(response.data.id);
+ event.preventDefault();
+ makeReservation();
+ });
+
+ $('#trip-details').removeClass('hidden');
+ $('#form-section h2').html(`Make a Reservation: ${response.data.name}`);
+ $('#name').html(`Trip ${response.data.id}: ${response.data.name}`);
+ $('#continent').html(`Continent: ${response.data.continent}`)
+ $('#category').html(`Category: ${response.data.category}`)
+
+ let weeksString = 'week';
+ if (response.data.weeks !== 1) {
+ weeksString += 's';
+ }
+ $('#weeks').html(`Duration: ${response.data.weeks} ${weeksString}`)
+ $('#cost').html(`Cost: $${response.data.cost}`)
+ $('#about').html(`Description: ${response.data.about}`)
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trip: ${error.message}`);
+ console.log(error);
+ });
+};
+
+const makeReservation = () => {
+ $('#status-message').html('');
+ const tripID = $('#tripID').val();
+
+ const tripData = {
+ name: $('#customer-name').val(),
+ email: $('#email').val(),
+ age: $('#age').val(),
+ }
+
+ axios.post(URL+`/${tripID}/reservations`, tripData)
+ .then((response) => {
+ clearForm();
+ console.log(response);
+ reportStatus('Successfully made reservation!', "alert alert-success");
+ })
+ .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}`, "alert alert-warning");
+ }
+ });
+
+}
+
+$(document).ready(() => {
+ $('#load').click(loadTrips);
+});
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..48e341a0
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+ "lockfileVersion": 1
+}