diff --git a/index.css b/index.css
new file mode 100644
index 00000000..6d87a8a2
--- /dev/null
+++ b/index.css
@@ -0,0 +1,43 @@
+body {
+ background-color: rgb(140, 213, 90);
+ font-family: 'Scada', sans-serif;
+}
+
+header {
+ border-bottom: solid;
+}
+
+main {
+ min-height: 80vh;
+ display: flex;
+ flex-flow: wrap row;
+ justify-content: space-around;
+}
+
+
+footer {
+ border-top: solid;
+}
+
+section {
+ max-height: 80vh;
+ width: 45vw;
+ overflow: scroll;
+ padding: .5em
+}
+
+.button {
+ background-color: rgb(140, 213, 90);
+ color: rgb(0, 0, 0);
+ border: 2px solid rgb(0, 0, 0);
+}
+
+#selected-trip{
+ max-height: 55vh;
+ overflow: scroll;
+}
+
+#trip-booking{
+ max-height: 25vh;
+ overflow: scroll;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..fa3ecd6c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+ TREK
+
+
+
+
+
+ Welcome to Trek - The new tech start up that's bound to disrupt the industry!
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..2f65bfc8
--- /dev/null
+++ b/index.js
@@ -0,0 +1,91 @@
+const URL = "https://ada-backtrek-api.herokuapp.com/trips"
+
+const userMessage = (message) => {
+ $('#user-message').html(message)
+}
+
+const loadTrips = function loadTrips() {
+ const tripList = $('#trips-list');
+ tripList.empty();
+ userMessage('Loading in trips..')
+ axios.get(URL)
+ .then((response) => {
+ const tripCollection = response.data
+ // console.log(response);
+ tripCollection.forEach((trip) => {
+ console.log(trip);
+ tripList.append(`${trip.name}`)
+ });
+ userMessage(`Showing ${tripCollection.length} amazing trips to choose from!`)
+ })
+ .catch((error) => {
+ userMessage(`Hrmm.. something has gone wrong: ${error.message}`)
+ console.log(error);
+ });
+};
+
+const loadClickedTrip = function loadClickedTrip(trip) {
+ // id, name, continent, about, category, weeks and cost
+ $('#selected-trip').empty();
+ console.log(trip);
+ axios.get(URL + `/${trip.id}`)
+ .then((response) => {
+ console.log(response);
+ const selectedTrip = response.data
+ $('#selected-trip').append('Trip Information
');
+ $('#trip-table').append(`Trip Name: ${selectedTrip.name}
`)
+ $('#trip-table').append(`Trip ID: ${selectedTrip.id}
`)
+ $('#trip-table').append(`Continent: ${selectedTrip.continent}
`)
+ $('#trip-table').append(`Category: ${selectedTrip.category}
`)
+ $('#trip-table').append(`Duration: ${selectedTrip.weeks}
`)
+ $('#trip-table').append(`Cost: $${selectedTrip.cost}
`)
+ $('#trip-table').append(`Description: ${selectedTrip.about}
`)
+
+ // Load form
+ buildForm(selectedTrip)
+ })
+ .catch((error) => {
+ userMessage(`Hrmm.. something has gone wrong loading this trip! ${error.message}`)
+ console.log(error);
+ });
+
+}
+
+const buildForm = (selectedTrip) => {
+ $('#trip-booking').empty();
+ $("#trip-booking").append('Book A Trip!
')
+ $("#trip-booking").append(
+ ``
+ )
+}
+
+const reserveTrip = (event) => {
+ event.preventDefault();
+ const tripID = $('form')[0][2].value
+ const reservationData = $('form').serialize()
+ console.log($('form'));
+ console.log(tripID);
+ console.log(reservationData);
+ axios.post(URL + `/${tripID}/reservations?${reservationData}`)
+ .then((response) => {
+ console.log(response);
+ userMessage("Hooray! You've booked an exciting adventure!")
+ })
+ .catch((error) => {
+ userMessage(`Hrmm.. something has gone wrong booking this trip! ${error.message}`)
+ console.log(error);
+ })
+ $('form')[0].reset();
+}
+
+
+$(document).ready (() => {
+ $('#trips-button').click(loadTrips);
+ $('#trips-list').on("click", "li", function(){
+ let trip = this;
+ console.log(trip);
+ loadClickedTrip(trip);
+ });
+ $('#trip-booking').submit(reserveTrip);
+
+});