<!DOCTYPE html>
<head>
  <title>Overheard - Quotes Sans Context</title>
</head>

<body>
<header>
  <h1>Overheard - Quotes Sans Context</h1>
  <p>Silly Sayings Said Serendipitously</p>
</header>

<main>
  <% @overheards.each do |overheard| %>
    <p><%= overheard.body %></p>
  <% end %>
</main>

</body>
</html>

<!DOCTYPE html>
<head>
  <title>Overheard - Quotes Sans Context</title>
</head>

<body>
<header>
  <h1>Overheard - Quotes Sans Context</h1>
  <p>Silly Sayings Said Serendipitously</p>
  <nav>
    <a href="/overheards/new">Add Overheard</a>
  </nav>
</header>

<main>
  <% @overheards.each do |overheard| %>
    <p><%= overheard.body %></p>
  <% end %>
</main>

</body>
</html>

Create link to page where we create new overheards
Create link to page where we create new overheards

The pattern we're following is that first, we declare our intent; then
we make the change.

We used the test to declare the intent that their would be a link with
the text "Add Overheard".

We now use the link to declare the intent that the application will have
a
[route](https://github.com/codeunion/fundamentals-of-web-development/wiki/Glossary#route-sinatra)
that responds to GET requests to the path `/overheards/new`.

As our tests run, we see the failure message has changed. Instead of saying
'Unable to find link or button "Add Overheard"' it now says 'Unable to
find field "Body"'.

This is good! It means our test successfully clicked on the Add
Overheard link and tried to take the next step in the test; filling in
the text field.

New Tags
========
`nav` - Contains navigation elements.
[Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav)

`a` - Stands for 'anchor'. Creates a
[hyperlink](https://https://github.com/codeunion/fundamentals-of-web-development/wiki/Glossary/#link-html)
to another page.
[Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
