diff --git a/index.html b/index.html new file mode 100644 index 00000000..7bdcad85 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + + Trek + + + +
+

Trek

+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..ca179653 --- /dev/null +++ b/index.js @@ -0,0 +1,91 @@ +const URL = 'https://ada-backtrek-api.herokuapp.com/trips/' + +const reportStatus = (message) => { + $('#status-message').html(message); +} + +const loadTrips = () => { + $('#trips-table').empty(); + reportStatus("Loading trips...") + + axios.get(URL) + .then((response) => { + $('#trips-table').append("All Trips") + + response.data.forEach((trip) => { + $('#trips-table').append(`${trip.name}`); + + $('td').click(function() { + if (this.innerText === trip.name){ + showTrip(trip.id); + } + }) + }) + reportStatus('Trips loaded!'); + }) + .catch((error) => { + reportStatus(`Error: ${error.message}`); + }) +}; + +const showTrip = (id) => { + const tripInfo = $('#details'); + tripInfo.empty(); + tripInfo.append(`

Trip Details

`) + reportStatus('Retrieving trip...') + + axios.get(URL + id) + .then((response) => { + let tripData = ["name", "continent", "category", "weeks", "cost", "about"]; + + tripData.forEach((item) => { + let info = response.data[item]; + tripInfo.append(`

${item}: ${info}

`); + }) + reportStatus('Trip retrieved!') + showReservation(response.data); + }) + .catch((error) => { + reportStatus(`Error: ${error.message}`); + }) +}; + +const showReservation = (trip) => { + $('.reservation-container').empty(); + + $('.reservation-container').append(`
`); + $(`form`).append(`

Reserve Trip

`); + $(`form`).append(``); + $(`form`).append(`
`); + $(`form`).append(``); + $(`form`).append(``); + $(`form`).append(`

Trip: ${trip.name}

`); + $(`form`).append(``); + + $('form').submit(function() { + const formData = { + name: $('input[name="name"]').val(), + email: $('input[name="email"]').val() + } + reserveTrip(event, trip, formData); + }) +}; + +const reserveTrip = function reserveTrip(event, trip, formData) { + event.preventDefault(); + const postURL = URL + trip.id + '/' + 'reservations'; + reportStatus('Making reservation...'); + + axios.post(postURL, formData) + .then((response) => { + console.log(response.data); + reportStatus(`Trip to ${trip.name} for ${formData.name} reserved!`); + }) + .catch((error) => { + reportStatus(`Error: ${error.message}`); + }) +}; + +$(document).ready(() => { + $('#get-trips').click(loadTrips); +}) diff --git a/style.css b/style.css new file mode 100644 index 00000000..d8c889be --- /dev/null +++ b/style.css @@ -0,0 +1,80 @@ +body { + font-family: sans-serif; + background-color: #f5f7f2; + background-image: url("http://www.flymetotaiwan.com/wp-content/uploads/2015/10/Background.jpg"); +} + +h1, h2 { + padding: .5em; + padding-bottom: .25em; + border-bottom: solid 1px black; + margin: 0; +} + +h2 { + margin-bottom: .5em; +} + +.table { + max-width: 20%; + text-align: center; + border: black; +} + +.btn.btn-success { + margin-bottom: 2em; + margin-top: 1em; + margin-left: 1em; +} + +td:hover { + background-color: rgb(220, 242, 191); + cursor: pointer; +} + +p::first-letter { + text-transform: uppercase; +} + +main { + display: flex; + flex-direction: row; +} + +.list-container { + padding-left: 1em; + padding-right: 1em; +} + +.details-container { + border: 1px solid #dee2e6; + margin-right: 1em; + height: max-content; +} + +.reservation-container { + border: 1px solid #dee2e6; + margin-top: 1em; + margin-right: 1em; + height: max-content; +} + +.column2 { + display: flex; + flex-direction: column; + /* width: 100%; */ +} + +label { + font-weight: bold; + padding-right: .5em; +} + +p, label, input { + padding-left: .5em; +} + +#status-message { + background-color: rgb(220, 242, 191); + padding-left: .5em; +} diff --git a/wireframes/109832832447.jpg b/wireframes/109832832447.jpg new file mode 100644 index 00000000..d11dfc74 Binary files /dev/null and b/wireframes/109832832447.jpg differ