<!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>