<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <section>
      <h2>Calculate your Caffeine Level</h2>

      <div class="menu">
        <h3>Coffee</h3>
        <p id="newCoffee"><a href="#">Add Coffee</a></p>
        <ul class="drink">
          <li><a href="#" data-level="1">American</a><span class="tooltip">Level 1 Caffeine</span></li>
          <li><a href="#" data-level="2">Colombian</a><span class="tooltip">Level 2 Caffeine</span></li>
          <li><a href="#" data-level="3">Brazilian</a><span class="tooltip">Level 3 Caffeine</span></li>
          <li><a href="#" data-level="10">Espresso</a><span class="tooltip">Level CRAZY Caffeine</span></li>
        </ul>
        <label for="total">Total:</label>
        <input type="text" id="total" size="3" value="0"/>
        <input type="button" id="clear" size="3" value="Clear"/>
        <div id="warning"></div>
        <div id="notice"></div>
        <div id="advertisement">
          <p>
            How about you try our new <a href="#">EnvyLabs Coffee!</a> ?
          </p>
        </div>
      </div>
    </section>
    <section>
      <h3>Store Locations</h3>
      <ul class="locations">
      </ul>
    </section>
    <section>
      <article>
        <h3>Top Pick of the Week</h3>
        <p id="topPick"></p>
      </article>
      <article>
        <h3>Other Suggested Coffee</h3>
        <ul class="suggested"></ul>
      </article>

    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="lib/6-2-ex-drink.js"></script>
  </body>
</html>