diff --git a/index.css b/index.css
new file mode 100644
index 00000000..a2884056
--- /dev/null
+++ b/index.css
@@ -0,0 +1,75 @@
+*{
+ list-style: none;
+ font-family: 'Roboto Mono', monospace;
+}
+
+h1, h2, h4{
+ font-family: 'Roboto Slab', serif;
+}
+body{
+ background-color: rgb(240, 235, 237);
+ margin: 50px;
+}
+
+main{
+ display: grid;
+ grid-template-columns: 2fr 4fr 1fr;
+}
+
+#hidden{
+ visibility: hidden;
+}
+
+.current-trips > *{
+ margin: 20px;
+}
+
+.reservation{
+
+}
+
+#trip-detail{
+ grid-columns: 2 / 3;
+}
+
+.reservation{
+ grid-columns: 2 / 3;
+}
+
+.btn{
+ margin-top: 10px;
+}
+
+.detail-container{
+ background-color: rgba(191, 163, 176, 0.31);
+ margin-left: 20px;
+ margin-right: 30px;
+ padding: 30px;
+}
+
+#name{
+ font-size: 2.5rem;
+ padding-bottom: 5px;
+}
+
+#continent{
+ font-size: 2rem;
+ padding-bottom: 5px;
+}
+
+#about{
+ padding-bottom: 10px;
+}
+#weeks{
+ border-top: 1px solid rgba(167, 162, 168, 0.61);
+ padding-top: 10px;
+}
+
+#trip-list li{
+ padding: 3px;
+}
+
+#trip-list li:hover{
+ background-color: rgb(219, 193, 204);
+ font-style: italic;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..6709d269
--- /dev/null
+++ b/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+ trek trek trek
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Make a reservation for this trip
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..ea42fe83
--- /dev/null
+++ b/index.js
@@ -0,0 +1,95 @@
+const TRIPS = 'https://trektravel.herokuapp.com/trips';
+
+const reportStatus = (message) => {
+ $('#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);
+};
+
+const createReservation = (event => {
+ event.preventDefault();
+
+ const reservationData = {
+ name: $('input[name="name"]').val(),
+ email: $('input[name="email"]').val(),
+ trip_id: $('input[name="trip_id"]').val()
+ };
+ console.log(reservationData)
+
+ axios.post(`${TRIPS}/${reservationData.trip_id}/reservations`, reservationData)
+ .then((response) => {
+ reportStatus(`Successfully added a reservation with ID ${response.data.id}`)
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error: ${error.message}`);
+ })
+
+});
+
+const loadTrips = () => {
+ reportStatus("* ~ * loading trips ~ * ~")
+ const tripList = $('#trip-list');
+ tripList.empty();
+
+ axios.get(TRIPS)
+ .then((response) => {
+ reportStatus(`Successfully loaded trips!`)
+
+ response.data.forEach((trip) => {
+ tripList.append(`${trip.name}`);
+ });
+ })
+ .catch((error) => {
+ reportError(error);
+ console.log('something went wrong');
+ });
+};
+
+const loadTripDetails = (tripId) => {
+
+ const tripDetails = () => {
+ const detail = $('#trip-detail');
+ detail.empty();
+ axios.get(`${TRIPS}/${tripId}`)
+ .then((response) => {
+ reportStatus(`Successfully loaded detail of trip!`);
+
+ detail.append(`
+
Trip ${response.data.id} Details
+ ${response.data.name}
+ ${response.data.continent}
+ ${response.data.about}
+ Weeks: ${response.data.weeks}
+ Cost: $${response.data.cost}
+ `);
+ })
+ .catch((error) => {
+ reportError(error);
+ console.log('something went wrong :c');
+ });
+ };
+ return tripDetails();
+};
+
+
+$(document).ready(() => {
+ $('#load').click(loadTrips);
+
+ $('ul').on('click', 'li', function(){
+ const tripId = $(this).attr('id');
+ loadTripDetails(tripId);
+ $('#hidden').css('visibility', 'visible');
+ });
+
+ $('#reservation-form').submit(createReservation);
+});