diff --git a/css/home.css b/css/home.css
new file mode 100644
index 00000000..5f9c6c2a
--- /dev/null
+++ b/css/home.css
@@ -0,0 +1,110 @@
+.display-flex {
+ display: flex;
+ flex-direction: row;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ margin: 3rem;
+ border: 1px solid black;
+}
+
+h1 {
+ margin-left: 10px;
+}
+
+section.title {
+ font-weight: bold;
+ font-size: 20px;
+ padding: 10px;
+ border-bottom: solid thin black;
+}
+
+button#load-trips {
+ margin-top: 10px;
+ margin-left: 10px;
+}
+
+#trip-list {
+ width: 450px;
+ padding-top: 10px;
+ margin-left: 10px;
+}
+
+#trip-details {
+ width: 650px;
+ padding-top: 10px;
+ margin-left: 10px;
+}
+
+#trip-list > h4, #trip-details > h4, #reserve-trip > h4 {
+ text-align: center;
+ border: solid thin black;
+ margin: 0px;
+ border-bottom: 0px;
+ padding: 10px 0px;
+}
+
+#reserve-trip > h4 {
+ border-bottom: solid thin black;
+}
+
+#trip-list > div {
+ border: solid thin black;
+ border-bottom: 0;
+ text-align: center;
+ padding: 10px 0px;
+ cursor: pointer;
+}
+
+#trip-details > div {
+ border: solid thin black;
+ border-bottom: 0;
+ text-align: left;
+ padding: 10px 10px;
+}
+
+#reserve-trip > div {
+ border-left: solid thin black;
+ border-right: solid thin black;
+ border-bottom: 0;
+ text-align: left;
+ padding: 10px 10px;
+}
+
+#trip-list > div:last-child,
+#trip-details > div:last-child,
+#reserve-trip > div:last-child {
+ border-bottom: solid thin black;
+}
+
+
+label {
+ font-weight: bold;
+}
+
+.display-flex-column {
+ display: flex;
+ flex-direction: column;
+}
+
+#reserve-trip {
+ width: 650px;
+ padding-top: 10px;
+ margin-left: 10px;
+ margin-bottom: 20px;
+}
+
+div.display-flex > div:first-child {
+ width: 100px;
+}
+
+div.display-flex input {
+ border-radius: 3px;
+ border: solid thin black;
+ font-size: 18px;
+}
+
+#reserve-trip > div:last-child {
+ text-align: right;
+}
\ No newline at end of file
diff --git a/home.html b/home.html
new file mode 100644
index 00000000..3f066683
--- /dev/null
+++ b/home.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+ Trek
+
+
+ Trek
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
new file mode 100644
index 00000000..2197819f
--- /dev/null
+++ b/js/script.js
@@ -0,0 +1,100 @@
+let selectedTrip = null;
+
+const displayStatus = (message) => {
+ $('#status').html(message);
+ }
+
+const handleApiError = (error) => {
+ displayStatus(error);
+}
+
+const loadTrips = () => {
+displayStatus("loading trips...");
+(async () => {
+ const response = await axios.get('https://trektravel.herokuapp.com/trips');
+ $("#trip-list")[0].innerHTML = getAlltrips(response.data);
+ displayStatus("");
+
+ // using closure here
+ const showTripDetails = (trip) => {
+ const tripName = trip.currentTarget.textContent;
+ selectedTrip = response.data.filter(o => o.name === tripName);
+ const tripId = selectedTrip[0].id;
+ (async () => {
+ const tripResponse = await axios.get('https://trektravel.herokuapp.com/trips/' + tripId);
+ $("#trip-details")[0].innerHTML = getTripDetails(tripResponse.data);
+ displayStatus("");
+ $("#reserve-title").html(`Reserve a spot on ${selectedTrip[0].name} trip`);
+ $("#reserve-trip").show();
+ })()
+ .catch(function(error) {
+ handleApiError("There is an issue while pulling the trips' information");
+ });
+ }
+ $('#trip-list div').bind("click", showTripDetails);
+ })()
+
+ .catch(function(error) {
+ handleApiError("There is an issue while pulling the trips' information");
+ });
+}
+
+const reserveTrip = () => {
+
+ if (selectedTrip && selectedTrip.length > 0) {
+ const name = $("#txtName");
+ const email = $("#txtEmail");
+ const tripId = selectedTrip[0].id;
+ if (validateData(name.val()) && validateData(email.val())) {
+ const newReservedData = {
+ name: name.val(),
+ email: email.val()
+ }
+ displayStatus("loading...");
+ (async () => {
+ await axios.post('https://trektravel.herokuapp.com/trips/'+ tripId +'/reservations', newReservedData);
+ displayStatus("The trip is reserved");
+ name.val('');
+ email.val('');
+ })()
+
+ .catch(function (error) {
+ handleApiError('There is an issue while creating a new reservation');
+ });
+ }
+ }
+}
+
+const validateData = (data) => {
+ if (!data || data === '') {
+ handleApiError("Name or email is not correct");
+ return false;
+ }
+ return true;
+}
+
+$(document).ready(() => {
+ $('#load-trips').click(loadTrips);
+ $('#reserve-trip-button').click(reserveTrip);
+ $('#reserve-trip').hide();
+});
+
+const getAlltrips = (data) => {
+ let output = 'All Trips
';
+ data.forEach((trip)=> {
+ output += '' + trip.name + '
';
+ });
+ return output;
+}
+
+const getTripDetails = (data) => {
+ let output = 'Trip Details
' +
+ '' + data.name +'
' +
+ '' + data.continent +'
' +
+ '' + data.category +'
' +
+ '' + data.weeks +'
' +
+ '' + data.cost +'
' +
+ '
' + data.about + '
';
+
+ return output;
+}
\ No newline at end of file