Creating the Order Form

Add a <section> tag, two <div>s, and a <form> to index.html, below the <header> element you just created.

...
    <header>
      <h1>CoffeeRun</h1>
    </header>
    <section>
      <div class="panel panel-default">
        <div class="panel-body">
          <form data-coffee-order="form">
            <!-- Input elements will go here -->
          </form>
        </div>
      </div>
    </section>
    <script src="scripts/datastore.js" charset="utf-8"></script>
...

The <form> tag is going to be where all the important stuff happens. You gave it a data-coffee-order attribute with the value form. In CoffeeRun, you will use data attributes for accessing DOM elements from JavaScript, just as you did in Ottergram.

For layout, you added two <div> tags. It is not important that you use <div> ...

Get Front-End Web Development: The Big Nerd Ranch Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.