Build diary entry

[ancasimon]

User Story

As a user, when I am on the Home Page, I can see a Diary section and each entry includes the following details: the name of the location from the card the user was typing in, the text that was in the text box from that card, timestamp for when the diary entry was created.

AC

WHEN I look at a the Diary section below the Destinations section, THEN I see a list of diary entries, AND each diary entry displays the following: location name, timestamp of when I created it/ clicked Submit, and the notes I entered in the input box.

Dev Notes

• Create a diaryCard component and corresponding .js and .scss files.
• Note that all the data here is read-only.
• In the diaryCard.js file, write a function to build the diary entry card.
• At the end of the function, return the domString (do not use printToDom here - we will do that in the container).
• Be sure to export it.

[ancasimon]

Mockups in exercise indicated these diary entries should be horizontal cards - here is the Bootstrap code for horizontal cards:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>