diff --git a/header_img.JPG b/header_img.JPG new file mode 100755 index 00000000..a61baf07 Binary files /dev/null and b/header_img.JPG differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..f5e29f4d --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + Trekker + + + + + +

Trek

+
+ +
+ + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..13cdbb28 --- /dev/null +++ b/index.js @@ -0,0 +1,53 @@ +$(document).ready( () => { + const URL = "https://ada-backtrek-api.herokuapp.com/trips" + $('#trips-button').click(() => { + $('main').html($('#trips-button')) + $('main').append('

All Trips

'); + axios.get(URL) + .then((response) => { + response.data.forEach((trip) => { + $('#trips-container').append(`
  • ${trip.name}
    • `); + }); + }) + .catch((error) => { + console.log(error); + }); + }); + $('main').on('click', '.trip', function() { + const id = $( this ).attr('id'); + axios.get(`${URL}/${id}`) + .then((response) => { + const trip = response.data; + $('#details-container').removeClass('hidden'); + $('#reserve-container').removeClass('hidden'); + $('#details-container').html('

    Trip Details

    '); + $('#details-container').append( + `

    Name: ${trip.name}

    +

    Continent: ${trip.continent}

    +

    Category: ${trip.category}

    +

    Weeks: ${trip.weeks}

    +

    Cost: ${trip.cost}

    +

    About:

    ${trip.about}

    ` + ); + $('span#specific-trip').html(` ${trip.name}`); + $('span#specific-trip').attr('class', `${trip.id}`); + }) + .catch((error) => { + console.log(error); + }); + }); + $('aside').on('submit', '#reserve-form', function(event) { + event.preventDefault(); + const id = $('span#specific-trip').attr('class'); + const name = $('input#name').val(); + const email = $('input#email').val(); + const reservationData = {name: name, email: email} + axios.post(`${URL}/${id}/reservations`, reservationData) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..da8ad1a3 --- /dev/null +++ b/styles.css @@ -0,0 +1,153 @@ +body { + background-color: #cc4400; + color: #331100; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: 50px 1fr 1fr 50px; + font-family: 'IBM Plex Serif', serif; +} + +header { + grid-column: 1 / span 4; + border-bottom: 2px solid #331100; + background-color: #ffddcc; + box-shadow: 2px 5px #331100; + margin: 0; + margin-bottom: 25px; + color: #ffddcc; + background-image: url("header_img.JPG"); + background-size: cover; +} + +h1, h2, h3, table tr th { + font-family: 'Molle', cursive; + font-size: 3em; +} + +h1 { + font-size: 5em; + padding: 20px 0 5px 100px; + margin: 0; +} + +main { + grid-column: 2 / span 1; + width: 85%; +} + +aside { + grid-column: 3 / span 1; + min-width: 425px; +} + +main, aside { + text-align: center; +} + +main h3 { + margin: 15px 0 0; + padding: 15px 0 5px; +} + +h3, ul, ul li, aside > section { + border: 2px solid #331100; + box-shadow: 2px 5px #331100; + background-color: #ffddcc; +} + +h3 { + padding-top: 10px; +} + +ul { + list-style-type: none; + margin: 0; + padding: 0; + height: 615px; + overflow: scroll; +} + +ul li { + font-size: 1.5em; + padding: 10px 0; +} + +ul li:hover { + background-color: #331100; + color: #ffddcc; + border: 2px solid #ffddcc; +} + +.hidden { + display: none; +} + +.button { + background-color: #331100; + color: #ffddcc; + font-family: 'IBM Plex Serif', serif; + font-weight: bold; + font-size: 1.25em; + padding: 10px; + margin-top: 5px 0 0; + border-radius: 10px; + width: 65%; +} + +.button:hover { + background-color: white; + color: #331100; +} + +aside h3 { + margin: 15px 0; +} + +aside p { + font-size: 1.25em; + margin: 0; + text-align: left; + padding-bottom: 5px; +} + +aside p:first-of-type { + font-size: 1.5em; +} + +aside p:last-of-type { + height: 150px; + overflow: scroll; +} + +aside section:first-child { + margin-bottom: 25px; +} + +form { + display: flex; + flex-direction: column; + text-align: left; +} +label { + font-weight: bold; + font-size: 1.25em; +} + +div > input { + width: 65%; + height: 2em; +} + +div { + padding-bottom: 15px; +} +span#specific-trip { + padding-left: 5px; + font-size: 1.4em; +} + +aside > section { + padding: 0 15px 15px; + background-color: #ffddcc; +}