Main Dashboard

[zoeames]

User Story

As a user, on the main page you should see four bootstrap cards that represent each "page" (food, airport, crew, and plane)

AC

WHEN I come to the page I should see 4 cards THEN I should be able to click on the card and go the "page" selected AND I should see a footer at the bottom of the dashboard page AND it should have the airline logo

Dev Notes

• create a dashboard component
• in index.html create a div with an id of dashboard
• in dashboard component create a function printDashboard that builds a domString that prints bootstrap cards https://getbootstrap.com/docs/4.0/components/card/#images
• above the <img> tag add another <div> with an h2 tag with the title of the page
• add an unique id to each of the cards that references it's respective page target dash-card-food dash-card-airport dash-card-crew dash-card-plane
• add an event listener to each card that calls a function openFoodEvent openAirportEvent openCrewEvent `openPlaneEvent
• $(body).on(click,#dash-card-food, foodComponent.printFood) #15
• $(body).on(click,#dash-card-airport, airportComponent.printAirport) #19
• $(body).on(click,#dash-card-crew, crewComponent.printCrew) #20
• $(body).on(click,#dash-card-plane, planeComponent.printPlane) #21
• Each event will print the appropriate page

[stephencastaneda]

<div class="card" id="dash-card-food">
  <div class="card-header">
    Featured
  </div>
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>