diff --git a/html.css b/html.css
new file mode 100644
index 00000000..a034f9ff
--- /dev/null
+++ b/html.css
@@ -0,0 +1,81 @@
+
+
+body{
+ font-family:Signika, Helvetica, Times ;
+ font-size:1em ;
+ margin: 0;
+}
+
+ul{
+ list-style-type: none;
+}
+#hide{
+ display: none;
+}
+
+header {
+ grid-row-start: 1;
+ display: flex;
+ justify-content: center;
+ background-color: black;
+ color: white;
+}
+
+.grid-container {
+ display: grid;
+ grid-template-rows: 10% 85% 5%;
+}
+main {
+ display: grid;
+ grid-template-columns: 50% 50%;
+ grid-row-start: 2;
+ background-color: grey;
+}
+
+#right-aside {
+ display: grid;
+ grid-template-rows: 25% 75%;
+ grid-column-start: 2;
+}
+
+#hide{
+ grid-column-row: 2;
+
+ /* border: .25px solid black; */
+}
+
+.list {
+ grid-column-start: 1;
+ display: flex;
+ justify-content: center;
+ border: 3px solid black;
+}
+
+
+.footer-center{
+ grid-row: 3;
+ display: flex;
+}
+
+.footer-center ul {
+ display: flex;
+}
+
+ .parallax {
+ grid-column-start: 1;
+
+
+ /* The image used */
+ background-image: url("https://picsum.photos/500/");
+
+ /* Set a specific height */
+ height: 50em;
+ overflow: scroll;
+
+ /* Create the parallax scrolling effect */
+ background-attachment: fixed;
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..aac75b29
--- /dev/null
+++ b/index.html
@@ -0,0 +1,70 @@
+
+
+
+
+ Trekitup
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..e152ac75
--- /dev/null
+++ b/index.js
@@ -0,0 +1,112 @@
+
+const allTripsURL = '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 listallTrips = () => {
+ reportStatus('Loading something...');
+ const tripsList = $('#tripList')
+ tripsList.empty();
+
+ axios.get(allTripsURL)
+ .then((response) => {
+ reportStatus(`Successfully loaded ${response.data.length} trips`);
+ console.log(response);
+ const result = response.data
+ result.forEach((place) => {
+ tripsList.append(`${place.name}`);
+ })
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+
+}; //end of listallTrips
+
+const tripDetails = (trip) => {
+
+ const aboutTrip = $('#details')
+ const singleTripUrl = 'https://ada-backtrek-api.herokuapp.com/trips/'
+ reportStatus('Loading a single something...');
+ console.log(trip);
+
+ axios.get(singleTripUrl + trip.id)
+ .then((response) => {
+ reportStatus(`Successfully loaded ${response.data.name} trip`);
+ console.log(response);
+ const result = response.data
+ for (attr in result) {
+ aboutTrip.append(`${result[attr]}`);
+ }
+ $('#hide').show();
+
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+
+} //end of Trip details
+
+const createReservation = (reservation, trip) => {
+ // console.log(reservation);
+ // console.log(trip);
+
+ const reservationData = {
+ name: $('input[name="name"]').val(),
+ age: $('input[name="age"]').val(),
+ email: $('input[name="email"]').val()
+ }
+
+ const reservationURL = `https://ada-backtrek-api.herokuapp.com/trips/${trip.id}/reservations`
+
+ axios.post(reservationURL, reservationData )
+ .then((response) => {
+ reportStatus(`Successfully created something`);
+ console.log(response);
+ })
+ .catch((error) => {
+ reportStatus(`Encountered an error while loading trips: ${error.message}`);
+ console.log(error);
+ });
+
+}; //end of createReservation
+
+
+
+$(document).ready(() => {
+ $('#load').click(listallTrips);
+
+ $('ul').on('click', 'li', function(){
+
+ const trip = this
+
+ tripDetails(trip);
+
+ $('form').submit( function(event) {
+ event.preventDefault();
+ const reservation = this
+ console.log(trip);
+
+ createReservation(reservation, trip);
+
+
+ });
+ });
+
+
+});