2. Traveler Interaction
   As a traveler:

• I should be able to make a trip request:
• I will select a date, duration, number of travelers and choose from a list of destinations
• After making these selections, I should see an estimated cost (with a 10% travel agent fee) for the trip.
• Once I submit the trip request, it will show on my dashboard as “pending” so that the travel agency can approve or deny it.
  (Refer to the “Add new trip” image
  
  )

Note!
If you haven’t already, focus on accessibility at this point. Before moving to iteration 3, please create a branch and push it up to GH so Lighthouse can be ran to check your dashboard for the accessibility audit. Since Lighthouse refreshes the page, we need this code on a separate branch to test the accessibility of your dashboard instead of your log in page.

Currently, a user can make several date errors that need correcting:

• booking a trip in the past
• booking a trip whose return date is earlier than their depart date
• booking a trip when another trip is happening

We will be pulling data from an API. We need to determine how to handle this data and what sort of classes and methods we will need to do this.

• Traveler
• Agency
• Trip

We will need to have our fetch calls set up and working in our API folder in order to access our data.
at a minimum, we need to access:

• Get All Travelers from http://localhost:3001/api/v1/travelers
• Get All Trips from http://localhost:3001/api/v1/trips
• Get All Destinations from http://localhost:3001/api/v1/destinations
• Get Single Traveler from http://localhost:3001/api/v1/travelers/ where will be a number of a traveler’s id
• Add New Trip POST to http://localhost:3001/api/v1/trips

These will be stored in our apiCalls.js file

This just needs to get us into the general ballpark of how our app will look. Mostly, we want to see how the data will display. More detail and design elements can come later but for now we need:

• a header that contains a button to book a trip
• a footer that holds a welcome greeting, and a display of the total amount spent on travel this year.
• a body that holds cards
• a card that contains the following info:
  • location name
  • status (confirmed or pending)
  • date departure
  • photo of destination
  • cost
  • number of travelers

1. Dashboard

As a traveler:

I should see a dashboard page that shows me:

• All of my trips (past, present, upcoming and pending)
• Total amount I have spent on trips this year. This should be calculated from the trips data and include a travel agent’s 10% fee

• Create a header
• create a body that holds cards
• create a basic card layout
• start to design for mobile before doing a media query for laptop

3. Login
   When first arriving at the site, a user should be able to log in with a username and password.

As a traveler:

• I should be able to login:
• I will see a login page when I first visit the site:
• I can log in with the following credentials:
  username: traveler50 (where 50 is the ID of the user)
  password: travel
• Upon successfully loggin in, I should see my dashboard.
  Refer to the “Get single traveler” photo