Closed ancasimon closed 4 years ago
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>
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
diaryCard.js
file, write a function to build the diary entry card.