diff --git a/index.css b/index.css
new file mode 100644
index 00000000..5f116112
--- /dev/null
+++ b/index.css
@@ -0,0 +1,74 @@
+body {
+ background-color: #e6e6e6;
+ font-family: Arial;
+ margin-left: 3%;
+ margin-right: 3%;
+}
+
+
+main {
+ padding: 4vh 0;
+ margin-bottom: 0;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: .6fr .3fr .1fr;
+ grid-gap: 1em;
+}
+
+.trips {
+ grid-area: 2/1/4/2;
+
+}
+
+
+#trips-list {
+ max-height: 80vh;
+ overflow-x: scroll;
+
+
+}
+
+.welcome {
+ grid-area: 1/1/2/3;
+ text-align: center;
+ padding-top: 10vh;
+ font-size: 50pt;
+ font-family: Luckiest Guy;
+ color: #cccc00;
+ background: url("road.jpg") no-repeat;
+ background-size: 100% 100%;
+}
+
+#trip {
+ display: grid;
+ grid-area: 2/2/3/3;
+ padding-top: 10vh;
+ height: 30vh;
+ overflow: scroll;
+
+}
+
+.trip-details {
+ background-color: #f3ffcc;
+ border-style: solid;
+ border-width:thin;
+}
+
+.new-reservation {
+ grid-area: 3/2/4/3;
+
+}
+
+.reservation {
+ margin-left: 30%;
+}
+
+button#load, input[type="submit"] {
+ background-color: #cccc00;
+ border-style: solid;
+ border-radius: 5pt;
+ margin: 0 auto 1em auto;
+ font-size: 1em;
+ padding: 5px 30px;
+
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..ea7d57e1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,42 @@
+
+
+
+
+ Trek
+
+
+
+
+
+
+
+
+
+
+
+ Find your next adventure!
+
+
+ Amazing Trips
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/road.jpg b/road.jpg
new file mode 100644
index 00000000..c2d76a78
Binary files /dev/null and b/road.jpg differ
diff --git a/trek.js b/trek.js
new file mode 100644
index 00000000..6a4c99c2
--- /dev/null
+++ b/trek.js
@@ -0,0 +1,155 @@
+const URL = 'https://ada-backtrek-api.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 = $('#trips-list');
+ tripList.empty();
+
+ axios.get(URL)
+ .then((response) => {
+ console.log(response);
+ reportStatus(`Successfully loaded ${response.data.length} trips`);
+ response.data.forEach((trip) => {
+ tripList.append(`${trip.name}`);
+ });
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+};
+
+const individualTrip = (id) => {
+ console.log(id);
+ reportStatus("Loading trip details...");
+ const reserve = $('#reservation-form');
+ const trip = $('#trip');
+ trip.empty();
+ reserve.empty();
+
+ let urlTrip = URL + id;
+ axios.get(urlTrip)
+ .then((response) => {
+
+ reportStatus(`Successfully loaded trip to: ${response.data.name}`);
+
+ trip.append(
+ `
+ | Trip Details: |
|---|
+ | Name: ${response.data.name} |
|---|
+ | Continent: | ${response.data.continent} |
|---|
+ | Category: | ${response.data.category} |
|---|
+ | Cost: | ${response.data.cost} |
|---|
+ | Weeks: | ${response.data.weeks} |
|---|
+ | About: | ${response.data.about} |
|---|
+ `
+ );
+ $('#trip').addClass('trip-details');
+ reserve.addClass(id);
+ reserve.html(
+ `Reservation
+
+
+
+
+
+
+
+
+
+
+
+ `
+ );
+ $('#reservation-form').addClass('reservation');
+
+
+ $('#reservation-form').submit(function(event) {
+ console.log(event);
+ event.preventDefault();
+ createReservation(urlTrip);
+
+ });
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading this trip: ${error.message}`);
+ console.log(error);
+ });
+};
+
+const FORM_FIELDS = ['name', 'email'];
+const inputField = name => $(`#reservation-form input[name="${name}"]`);
+
+const readFormData = () => {
+ const getInput = name => {
+ const input = inputField(name).val();
+ return input ? input : undefined;
+ };
+
+ const formData = {};
+ FORM_FIELDS.forEach((field) => {
+ formData[field] = getInput(field);
+ });
+
+ return formData;
+
+};
+
+
+const clearForm = () => {
+ FORM_FIELDS.forEach((field) => {
+ inputField(field).val('');
+ });
+}
+
+const createReservation = (urlTrip) => {
+
+ const reservationData = readFormData();
+ console.log(reservationData);
+
+ reportStatus('Doing your reservation...');
+
+ let urlReservation = urlTrip + '/reservations'
+ axios.post(urlReservation, reservationData)
+
+ .then((response) => {
+ console.log(response);
+ reportStatus(`Successfully added a reservation for ${response.data.name}!`);
+ clearForm();
+ })
+ .catch((error) => {
+ console.log(error.response);
+ if (error.response.data && error.response.data.errors) {
+ reportError(
+ `Encountered an error while trying to reserve the trip: ${error.message}`,
+ error.response.data.errors
+ );
+ } else {
+ reportStatus(`Was not able to reserve your trip: ${error.message}`);
+ }
+ });
+};
+
+$(document).ready(() => {
+ $('#load').click(loadTrips);
+ $(`#trips-list`).on(`click`, `li`, function(){
+ individualTrip(this.id);
+ });
+
+});