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

trek

+ +
+
+
+ + +
+ +
+
+
+ +
+
+
+
+ + diff --git a/src/scriptkiddy.js b/src/scriptkiddy.js new file mode 100644 index 00000000..55fc3cfd --- /dev/null +++ b/src/scriptkiddy.js @@ -0,0 +1,120 @@ +const BASE = 'https://trektravel.herokuapp.com/' + +const loadTrips = () => { + axios.get(BASE + 'trips') + .then((response) => { + $('#triplist').css('height', 'max-content'); + $('#triplist').css('border', '4px solid black'); + response.data.forEach((trip) => { + $('#triplist').append(`
  • ${trip.name}
    • `); + }) + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trips: ${error.message}`); + console.log(error); + }); +}; + +const getDetails = (id) => { + axios.get(BASE + 'trips/' + id) + .then((response) => { + console.log(response.data); + $('#tripdetails').css('border', '4px solid orangered'); + $('#tripdetails').css('borderRadius', '10px'); + $('#tripdetails').css('boxShadow', '5px 5px 20px red'); + clearBorder(); + + $('#tripdetails').html(``); + + $('#bookit').on('click', function() { + bookTrip($(this).attr('data-id')); + }); + }) + .catch((error) => { + reportStatus(`Encountered an error while loading trip: ${error.message}`); + console.log(error); + }); +}; + +const bookTrip = (id) => { + $('#booktrip').css('border', '3px solid dodgerblue'); + $('#booktrip').css('boxShadow', '5px 5px 20px skyblue'); + + $('#booktrip').html( + `
    + + + + + +
    `); + + $('form').submit(submitForm); +}; + +const submitForm = (e) => { + e.preventDefault(); + + const data = {}; + data['name'] = $('form input[name="name"]').val(); + data['email'] = $('form input[name="email"]').val(); + console.log(data); + + reportStatus('Sending ur deets...'); + + const url = BASE + `trips/${$('form').attr('data-id')}/reservations` + axios.post(url, data) + .then((response) => { + reportStatus(`Successfully did a reserve for ${response.data.name}!`); + $('form input[name="name"]').val(''); + $('form input[name="email"]').val(''); + }) + .catch((error) => { + console.log(error.response); + if (error.response.data && error.response.data.errors) { + reportError( + `Encountered an error: ${error.message}`, + error.response.data.errors + ); + } else { + reportStatus(`Encountered an error: ${error.message}`); + } + }) +}; + +const reportStatus = (message) => { + $('#status-message').html(message); +}; + +const reportError = (message, errors) => { + let content = `

    ${message}

    '; + reportStatus(content); +}; + +const clearStatus = () => { + $('#status-message').html(''); +}; + +const clearBorder = () => { + $('#booktrip').css('border', ''); +}; + + +$(document).ready(() => { + $('#loadtrips').on('click', () => { + clearStatus(); + loadTrips(); + }); + + $('ul').on('click', 'li', function() { + clearStatus(); + $('#booktrip').html(''); + getDetails($(this).attr('data-id')); + }); +}) diff --git a/styles/style.css b/styles/style.css new file mode 100644 index 00000000..b5589b7c --- /dev/null +++ b/styles/style.css @@ -0,0 +1,135 @@ +body { + font-family: Helvetica, sans-serif; +} + +header { + display: flex; + align-items: flex-end; + margin-left: 2vw; +} + +h1 { + font-size: 6em; + margin: 0; +} + +#loadtrips { + max-height: 1.8vw; + margin-left: 2vw; + margin-bottom: 1vw; +} + +#tripscontainer { + display: flex; + justify-content: space-around; + flex-direction: row; +} + +#tripdetails { + width: 40vw; +} + +#triplist { + width: 40vw; + height: 0; + border: 2px solid black; + border-radius: 10px; + margin-top: 0; + box-shadow: 5px 5px 20px darkslategray; +} + +#triplist li { + margin-top: 1vw; + margin-left: .5vw; + font-weight: bold; + padding: 0; +} + +#triplist li:hover { + color: red; + cursor: crosshair; +} + +#triplist li:first-of-type { + margin-top: 3vw; +} + +#triplist li:last-of-type { + margin-bottom: 2.9vw; +} + +#about { + overflow-y: scroll; + max-height: 35vh; +} + +#singletripcontainer { + display: flex; + flex-direction: column; + font-weight: bold; + max-height: 30vw; +} + +#tripdetails ul { + padding: 0 2.5vw 0 2.5vw; +} + +#tripdetails li { + margin: 1.5vw 0 1.5vw 0; +} + +#title { + font-size: 2em; +} + +#about { + font-weight: normal; + border: 4px solid dodgerblue; + border-radius: 10px; + padding: 1vw; +} + +.rightalign { + text-align: right; +} + +#bookit { + text-decoration: underline; + font-size: 1.2em; +} + +#bookit:hover { + color: orangered; + cursor: pointer; +} + +#booktrip { + margin-top: 2vw; + border-radius: 10px; + padding: 2vw; +} + +ul { + list-style: none; +} + +form { + display: flex; + flex-direction: column; + margin-left: 1vw; +} + +input { + width: 30vw; + height: 2.5vw; + margin: .5vw; +} + +label { + margin-bottom: .6vw; + margin-top: .3vw; +} + +#submit { + width: 6vw; +}