diff --git a/css/foundation.css b/css/foundation.css
new file mode 100644
index 00000000..e69de29b
diff --git a/index.css b/index.css
new file mode 100644
index 00000000..30f7d7d5
--- /dev/null
+++ b/index.css
@@ -0,0 +1,53 @@
+
+#banner {
+ position: relative;
+ height: 300px;
+ width: auto;
+ object-fit: cover;
+ display: flex;
+ flex-direction: column;
+ align-items: left;
+ color: white;
+ background-image: url("train.jpg");
+ background-size: cover;
+}
+
+body {
+ font-family: sans-serif;
+ background-color: lavender;
+}
+
+main {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+}
+
+/* .trips {
+ grid-column: 1 / span 1;
+ grid-row: 1 / span 2;
+} */
+
+#aside {
+ display: grid;
+}
+
+#new-reserve {
+ grid-column: 2;
+ grid-row: 1;
+ display: none;
+}
+
+#details {
+ grid-column: 2;
+ grid-row: 1;
+}
+
+table, th, td {
+ border: 1px solid black;
+ border-collapse: collapse;
+ padding: 15px;
+}
+
+tr:nth-child(even) {
+ background-color: #dddddd;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..cf594b61
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+ Trek the World
+
+
+
+
+
+
+
+ Trek the World
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..de152d24
--- /dev/null
+++ b/index.js
@@ -0,0 +1,120 @@
+const allTripsUrl = " https://ada-backtrek-api.herokuapp.com/trips";
+
+const singleTripUrl = "https://ada-backtrek-api.herokuapp.com/trips/";
+
+const reserveUrl = "https://ada-backtrek-api.herokuapp.com/trips/1/reservations";
+
+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 loadTrips = function loadTrips() {
+ let tripList = $('#trip-list');
+
+ axios.get(allTripsUrl)
+ .then((response) => {
+ response.data.forEach((trip) => {
+ console.log(trip);
+ tripList.append(`| ${trip.name} |
`);
+ });
+ reportStatus('Trips Loaded!');
+ })
+ .catch((error) => {
+ console.log(error);
+ if (error.response.data && error.response.data.errors) {
+ // User our new helper method
+ reportError(
+ `Something's wrong: ${error.message}`,
+ error.response.data.errors
+ );
+ } else {
+ reportStatus(`Error: ${error.message }`);
+ }
+ });
+};
+
+const getTrip = function getTrip(event) {
+ event.preventDefault();
+
+ let display = $('#new-reserve');
+ display.show();
+
+
+ axios.get(singleTripUrl + $(this).data("id"))
+ .then((response) => {
+ $('#details').empty().append(`${response.data.name}
${response.data.continent}
${response.data.about}
Category of trip: ${response.data.category}
Duration of trip (in weeks): ${response.data.weeks}
$${response.data.cost}
`);
+ reportStatus('Trips Loaded!');
+ });
+}
+
+const FORM_FIELDS = ['name', 'email'];
+const inputField = name => $(`#trip-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 reserveTrip = (event) => {
+ event.preventDefault();
+
+ const reserveData = readFormData()
+ console.log(reserveData);
+
+ axios.post(reserveUrl, reserveData)
+ .then((response) => {
+ console.log(`SUCCESS`);
+ reportStatus(`Successfully added a reservation with ID ${response.data.trip_id}!`);
+ clearForm();
+ })
+ .catch((error) => {
+ console.log(`FAIL`);
+ console.log(error.response);
+ if (error.response.data && error.response.data.errors) {
+ reportError(
+ `Encountered an error: ${error.message}`,
+ error.response.data.errors
+ );
+ } else {
+ reportStatus(`Something must be wrong: ${error.message}`);
+ }
+ });
+};
+
+// make method for getting the reservation object once it's clicked OR
+// event listener in the reservation section, listening for a click on a trip
+
+
+
+
+$(document).ready(() => {
+ $('#load').click(loadTrips);
+ $('.trips').on('click', '.trip', getTrip);
+ $('#trip-form').submit(reserveTrip);
+});
diff --git a/train.jpg b/train.jpg
new file mode 100644
index 00000000..52dde7aa
Binary files /dev/null and b/train.jpg differ