Print All Dinos

[luketlancaster]

User Story

When I visit the page I should see a grid of cards displaying each dino and it's corresponding information.

AC

WHEN The user first visits the page THEN I should see a card-deck of all non-deleted dinos AND There should be a row of buttons I can use to interact with the dino AND The card should look like the supplied wireframe

Dev Notes

• Follow Style guide
• Use bootstrap buttons to feed, pet, send to hospital, and send on adventure.

  <button type="button" class="btn btn-success">Feed</button>
  <button type="button" class="btn btn-danger">Hospital</button>
  <button type="button" class="btn btn-success">Pet</button>
  <button type="button" class="btn btn-success">Send on Adventure</button>

• Use bootstrap card-deck for card style

  <div class="card-deck">
    <div id="dinoCard" class="card">
      <img class="card-img-top" src="..." alt="dino img">
      <div class="card-body">
        <div class="row">
          <h5 class="card-title">dino name</h5>
          <h5 class="card-title">dino health</h5>
          <h5 class="card-title">dino age</h5>
        </div>
        <p class="card-text">list of dinos adventures</p>
      </div>
      <div class="card-footer row">
        [hospital button here]
        [feed button here]
        [pet button here]
        [send on adventure button here]
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>

• Use domString to print card from dinos array ( #2 )

  const buildDinoCards = (dinosArr) => {
    let domString = '';
    for (let i = 0; i<dinosArray.length; i++){
      domString += `[bootstrap card here]`
    }
  }

• Use fontawesome icons for buttons

[luketlancaster]