diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..39ba80cb --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + Trips + + + + + + +
+ + +
+ +
+
+
+
+ +
+
+
+ + +
+
+

Trip Details

+
+
+
+

Reserve Trip

+
+ + +
+
+ + + + + + + diff --git a/index.js b/index.js new file mode 100644 index 00000000..309e1a3b --- /dev/null +++ b/index.js @@ -0,0 +1,100 @@ +const URL = 'https://ada-backtrek-api.herokuapp.com/trips/'; + +const reportStatus = (message) => { + $('#status-message').html(message); +} + +const loadTrips = () => { + + const tripList = $('#trip-list'); + tripList.empty(); + + reportStatus('Loading Trips! Please Wait...'); + + axios.get(URL) + .then((response) => { + response.data.forEach((trip) => { + tripList.append(`
  • ${trip.name}
    • `); + }); + reportStatus('Trips Loaded!'); + }) + .catch((error) => { + reportStatus(`Error: ${error.message}`); + }) +} +const loadTrip = (id) => { + + const tripInfo = $('#trip'); + tripInfo.empty(); + const reservationInfo = $('#reservation'); + reservationInfo.empty(); + + reportStatus('Loading Trip Details! Please Wait...') + + axios.get(URL + `${id}`) + .then((response) => { + + let data = response.data; + console.log(data.name); + + + tripInfo.append(`
  • Name: ${data.name}
    • `); + tripInfo.append(`
  • Continent: ${data.continent}
    • `); + tripInfo.append(`
  • Category:${data.category}
    • `); + tripInfo.append(`
  • Weeks: ${data.weeks}
    • `); + tripInfo.append(`
  • Cost: ${data.cost}
    • `); + tripInfo.append(`
  • About:${data.about}
    • `); + console.log(tripInfo); + + reservationInfo.append( + ` +
    ` + + ); + reservationInfo.append( + ` +
    ` + ); + reservationInfo.append(`
    `); + reservationInfo.append( + `` + ); + reportStatus('Trip Details Loaded!'); + }) + .catch((error) => { + reportStatus(`Error: ${error.message}`); + }) +} +const reservationData = (id) => { + let tripData = {name: $(`input[name="name"]`).val(), + email:$(`input[name="email"]`).val() +} +console.log(reservationData); + +reportStatus('Reserving a trip...'); + +axios.post(URL + `${id}/reservations`, tripData) +.then((response) => { + console.log('The post req was succesful') + reportStatus(`Successfully reserved this trip ${response.data.name}!`); + +}) +.catch((error) => { + console.log(error.response); + + reportStatus(`Encountered an error: ${error.message}`); +}); + +}; +$(document).ready(() => { + $('#load').click(loadTrips); + $('#trip-list').on('click', 'li', function() { + let id = $(this).attr('id'); + loadTrip(id); + }); + $('#reservation').on('click', '.reserve', function(){ + let id = $(this).attr('id').substr(7); + console.log(id); + reservationData(id); + }); +}) diff --git a/style.css b/style.css new file mode 100644 index 00000000..96760469 --- /dev/null +++ b/style.css @@ -0,0 +1,50 @@ + +body{ + +/* background-color: lightblue; */ + background-image: url("trips.jpeg"); + height: 100%; + padding: 2rem; + + background-attachment: fixed; + background-position: center; + background-repeat: no-repeat; + background-size: cover; +} + + + +header{ + + +} +*{ + list-style-type: none; +} +.tripcontainer{ + display: grid; + grid-template-columns: auto auto; + align-content: space-around; + /* border: 1px solid black; */ + font-size: 12px; + + +} +.buttoncontainer{ + grid-column: 1/3; + border: 1px solid black; +} +.triplist{ + grid-row: 2/5; + border: 1px solid black; + text-decoration: underline; + +} +.tripdetail{ + border: 1px solid black; + padding:5px; +} +.tripreservation{ +border: 1px solid black; +padding:5px; +} diff --git a/travel.jpeg b/travel.jpeg new file mode 100644 index 00000000..6660684a --- /dev/null +++ b/travel.jpeg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + Tree, mountain, lake and rock HD photo by Matt Thomason (@shipmate) on Unsplash + + + + +
    We're here to help

    Alberta, Canada
    Share
    Info

    Featured in 162 collections

    Travel
    6 photos · Curated by Ingrid h
    travel
    cloud
    river
    Canada
    25 photos · Curated by Ulisse Itaca
    canada
    cloud
    building
    Round 1 clinic picturs
    24 photos · Curated by Lifespan Medicine
    forest
    lake
    outdoor

    Related tags

    tree
    mountain
    lake
    rock
    stone
    canada
    banff
    banff national park
    mountain range
    pine tree
    evergreen
    blue
    + + + + + + + + + diff --git a/trek.jpeg b/trek.jpeg new file mode 100644 index 00000000..a44756d5 Binary files /dev/null and b/trek.jpeg differ diff --git a/trips.jpeg b/trips.jpeg new file mode 100644 index 00000000..cd1de8bd Binary files /dev/null and b/trips.jpeg differ