diff --git a/index.css b/index.css
new file mode 100644
index 00000000..9ef210cf
--- /dev/null
+++ b/index.css
@@ -0,0 +1,90 @@
+@import url("https://fonts.googleapis.com/css?family=Bangers&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
+
+body {
+ font-family: Muli;
+ background-image: url("https://tinyurl.com/y4labzbu");
+ background-attachment: fixed;
+ /* background-position: center; */
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+main {
+}
+
+#title {
+ font-family: Bangers;
+ font-weight: 500;
+ font-size: 5rem;
+}
+
+#grid-container {
+ display: grid;
+ grid-template: auto 5em 1em / 50% auto;
+}
+
+#status-message {
+ grid-column: 1 / span 2;
+ grid-row: 1 / span 1;
+ border: solid;
+ border-color: orangered;
+ background-color: white;
+ opacity: 0.75;
+}
+
+#title {
+ grid-column: 1 / span 2;
+ grid-row: 2 / span 2;
+
+ justify-self: center;
+}
+
+#load {
+ border: solid;
+ border-color: orangered;
+ justify-self: end;
+ font-family: Muli;
+ font-size: 2em;
+ font-style: bold;
+ margin-top: 20%;
+ opacity: 0.75;
+}
+
+.current-treks {
+ grid-column: 1 / span 1;
+ grid-row: 3 / span 1;
+ justify-self: center;
+ padding-top: 10%
+}
+
+#trek-list {
+ list-style: none;
+ line-height: 30px;
+ text-align: center;
+}
+
+/* ul {
+ opacity: 0.75;
+} */
+
+li {
+ background-color: white;
+ opacity: 0.75;
+}
+
+li:hover {
+ background-color: orangered;
+ color: white;
+}
+
+#details {
+ grid-column: 2 / span 1;
+ grid-row: 3 / span 1;
+ padding-top: 10%;
+}
+
+#details * {
+ background-color: white;
+ opacity: 0.75;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..20c4a657
--- /dev/null
+++ b/index.html
@@ -0,0 +1,31 @@
+
+
+
+
+
+ TREK
+
+
+
+
+
+
+
+
+
+
+
+
+ Ready to Trek?
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..4b3d8244
--- /dev/null
+++ b/index.js
@@ -0,0 +1,99 @@
+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 loadTreks = () => {
+ const trekList = $('#trek-list');
+ trekList.empty();
+
+ let URL = 'https://trektravel.herokuapp.com/trips'
+ axios.get(URL)
+ .then((response) => {
+ const theTreks = response.data;
+
+ theTreks.forEach((trek) => {
+ trekList.append(`${trek.name}`);
+
+ const showTrekDetails = (trip) => {
+ const trekDetail = () => {
+ let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`
+
+
+ axios.get(detailsURL)
+ .then((response) => {
+ const trekDeets = $('.indiv-trek');
+ trekDeets.empty();
+
+ trekDeets.html(
+ `${trip.name}
+ Continent: ${trip.continent}
+ Category: ${trip.category}
+ Weeks: ${trip.weeks}
+ Cost: $${trip.cost}
+ About:
+ ${response.data.about}
`
+ )
+ // console.log(trip)
+ // console.log(response)
+ })
+
+ .catch((error) => {
+ reportStatus(error);
+ });
+ }
+ return trekDetail;
+ };
+ const clickedTrek = showTrekDetails(trek);
+ $("li").click(clickedTrek);
+ });
+ })
+
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading treks: ${error.message}`);
+ console.log(error);
+ });
+ };
+
+$(document).ready(() => {
+ $('#load').click(loadTreks)
+});
+
+
+// const showTrekDetails = (trip) => {
+// let detailsURL = `https://trektravel.herokuapp.com/trips/${trip.id}`
+// const trekDeets = $('#"trek-deets"');
+
+// axios.get(detailsURL)
+// .then((response) => {
+// trekDeets.append(`Trek Details
`);
+// trekDeets.append(`${response.data[0].name}`);
+// console.log(response.data.name)
+// })
+// .catch((error) => {
+// reportStatus(`Encountered an error while loading treks: ${error.message}`);
+// console.log(error);
+// });
+// };
+
+// .catch((error) => {
+// if (error.response.data && error.response.data.errors) {
+//reportError('Encountered an errro while loading oets: ${error.message},
+// error.response.data.errors)
+// }
+// })
+// reportError('Encountered an errro while loading oets: ${error.message},
+// error.response.data.errors)
+
+
+// https://picsum.photos/id/477/500/500
\ No newline at end of file
diff --git a/index2.js b/index2.js
new file mode 100644
index 00000000..c1e85319
--- /dev/null
+++ b/index2.js
@@ -0,0 +1,164 @@
+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 loadTreks = () => {
+ const trekList = $('#trek-list');
+ trekList.empty();
+
+ let URL = 'https://trektravel.herokuapp.com/trips'
+ axios.get(URL)
+ .then((response) => {
+ reportStatus(`Successfully loaded ${response.data.length} trips`);
+ console.log('successfully loaded all trips');
+
+ const theTreks = response.data;
+
+ theTreks.forEach((trek) => {
+ let thisTrek = $(`${trek.name}`);
+ thisTrek.addClass(`${trek.id}`);
+ trekList.append(thisTrek);
+ })
+ })
+
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading treks: ${error.message}`);
+ console.log(error);
+ })
+
+ const showTrekDetails = (event) => {
+ let trekId = event.target.className;
+ let detailsURL = `https://trektravel.herokuapp.com/trips/${trekId}`;
+
+ const detailSection = $('#details');
+ detailSection.empty();
+
+ axios.get(detailsURL)
+ .then((response) => {
+ reportStatus(`Successfully loaded trip ${trekId}`);
+ console.log('successfully loaded trip!');
+
+ detailSection.html(
+ `${response.data.name}
+ Continent: ${response.data.continent}
+ Category: ${response.data.category}
+ Weeks: ${response.data.weeks}
+ Cost: $${response.data.cost}
+ About:
+ ${response.data.about}
`
+ // `
+ )
+ reservationForm();
+ $('#reservation-form').on('submit', makeReservation);
+ })
+
+ .catch((error) => {
+ reportStatus(`Something went wrong with loading trip ${trekId}: ${error}`);
+ console.log(`Something went wrong with loading trip ${trekId}: ${error}`);
+ });
+
+ const makeReservation = (event) => {
+ event.preventDefault();
+ // const trekId = event.target.className;
+ console.log(`trek id: ${trekId}`)
+ let reservationURL = `https://trektravel.herokuapp.com/trips/${trekId}/reservations`
+
+ const trekData = readFormData();
+
+ reportStatus('Sending trek data...');
+
+ axios.post(reservationURL, trekData)
+ .then((response) => {
+ console.log(response);
+ reportStatus('Successfully reserved a trek!');
+ clearForm();
+ })
+
+ .catch((error) => {
+ console.log(error.response);
+ // Make sure the server actually sent us errors. If
+ // there's a different problem, like a typo in the URL
+ // or a network error, the response won't be filled in.
+ if (error.response.data && error.response.data.errors) {
+ // User our new helper method
+ reportError(`Encountered an error: ${error.message}`,
+ error.response.data.errors
+ );
+ } else {
+ // This is what we had before
+ reportStatus(`Encountered an error: ${error.message}`);
+ }
+ });
+ };
+
+
+ };
+
+ const reservationForm = () => {
+ const detailSection = $('#details');
+ detailSection.append('Make a Reservation
')
+ detailSection.append('')
+ // $('#reservation-form').submit(makeReservation);
+ }
+
+ $("#trek-list").on('click', 'li', showTrekDetails);
+ // $("#details").on('click', 'button', reservationForm);
+ };
+
+const readFormData = () => {
+ let parsedFormData = {};
+
+ const nameFromForm = $(`#reservation-form input[name="name"]`).val();
+ parsedFormData['name'] = nameFromForm ? nameFromForm : undefined;
+
+ const ageFromForm = $(`#reservation-form input[name="age"]`).val();
+ parsedFormData['age'] = ageFromForm ? ageFromForm : 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('');
+ $(`#reservation-form input[name="age"]`).val('');
+}
+
+
+
+ $(document).ready(() => {
+ $('#load').click(loadTreks);
+ // $('#reservation-form').submit(makeReservation);
+});
+
+console.log('dee is here!');
+
+// https://picsum.photos/id/477/500/500
\ No newline at end of file
diff --git a/sample.js b/sample.js
new file mode 100644
index 00000000..23212de8
--- /dev/null
+++ b/sample.js
@@ -0,0 +1,155 @@
+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 inventory...');
+
+ const tripsList = $('#trips-list');
+ tripsList.empty();
+
+ axios.get(URL)
+ .then((response) => {
+ reportStatus(`Successfully loaded ${response.data.length} trips`);
+ response.data.forEach((trip) => {
+ const newTrip = $(`${trip.name}`);
+ tripsList.append(newTrip);
+ const showTrip = tripShowHandler(trip);
+ newTrip.click(showTrip);
+ });
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+};
+
+const tripShowHandler = (trip) => {
+
+ const tripsShow = $('#trip-view');
+ const tripID = trip.id;
+ return () => {
+ reportStatus('Loading trip...');
+ tripsShow.empty();
+
+ axios.get(URL + tripID)
+ .then((response) => {
+ reportStatus(`Found the perfect adventure...`);
+ const newTrip = $(`${response.data.name}
+ $${response.data.cost} ${response.data.continent}, ${response.data.weeks} weeks
+
+ - Trip type: ${response.data.category}
+ - Details: ${response.data.about}
+
`);
+ tripsShow.append(newTrip);
+ const reserveButton = $(``)
+ tripsShow.append(reserveButton);
+ const reserveForm = reserveFormHandler(trip);
+ reserveButton.click(reserveForm);
+ })
+
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+ };
+};
+
+const reserveFormHandler = (trip) => {
+
+ const tripID = trip.id;
+
+ const form = `Add a reservation for ${trip.name}
+ `
+
+ const tripsShow = $('#trip-view');
+
+ return () => {
+ reportStatus('Loading reservation...');
+ tripsShow.append(form);
+ const result = (event) => {
+ event.preventDefault();
+ createReservation( tripID );
+ };
+
+ $('#reservation-form').submit(result);
+ }
+};
+
+const createReservation = ( tripID ) => {
+
+ const readFormData = () => {
+ const parsedFormData = {};
+
+ const nameFromForm = $(`#reservation-form input[name="name"]`).val();
+ parsedFormData['name'] = nameFromForm
+
+ const ageFromForm = $(`#reservation-form input[name="age"]`).val();
+ parsedFormData['age'] = ageFromForm ? ageFromForm : undefined;
+
+ const emailFromForm = $(`#reservation-form input[name="email"]`).val();
+ parsedFormData['email'] = emailFromForm
+
+ return parsedFormData;
+ };
+
+ const reservationData = readFormData();
+
+ const clearForm = () => {
+ $(`#reservation-form input[name="name"]`).val('');
+ $(`#reservation-form input[name="age"]`).val('');
+ $(`#reservation-form input[name="email"]`).val('');
+ }
+
+ const url = URL + tripID + `"/reservations?name=${reservationData['name']}&age=${reservationData['age']}&email=${reservationData['email']}`;
+
+ reportStatus(`Sending reservation data...`);
+
+ axios.post(url)
+ .then((response) => {
+ reportStatus(`Successfully added reservation 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);
+});
\ No newline at end of file