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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.