6-2-ex-drink.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <section>
  9. <h2>Calculate your Caffeine Level</h2>
  10. <div class="menu">
  11. <h3>Coffee</h3>
  12. <p id="newCoffee"><a href="#">Add Coffee</a></p>
  13. <ul class="drink">
  14. <li><a href="#" data-level="1">American</a><span class="tooltip">Level 1 Caffeine</span></li>
  15. <li><a href="#" data-level="2">Colombian</a><span class="tooltip">Level 2 Caffeine</span></li>
  16. <li><a href="#" data-level="3">Brazilian</a><span class="tooltip">Level 3 Caffeine</span></li>
  17. <li><a href="#" data-level="10">Espresso</a><span class="tooltip">Level CRAZY Caffeine</span></li>
  18. </ul>
  19. <label for="total">Total:</label>
  20. <input type="text" id="total" size="3" value="0"/>
  21. <input type="button" id="clear" size="3" value="Clear"/>
  22. <div id="warning"></div>
  23. <div id="notice"></div>
  24. <div id="advertisement">
  25. <p>
  26. How about you try our new <a href="#">EnvyLabs Coffee!</a> ?
  27. </p>
  28. </div>
  29. </div>
  30. </section>
  31. <section>
  32. <h3>Store Locations</h3>
  33. <ul class="locations">
  34. </ul>
  35. </section>
  36. <section>
  37. <article>
  38. <h3>Top Pick of the Week</h3>
  39. <p id="topPick"></p>
  40. </article>
  41. <article>
  42. <h3>Other Suggested Coffee</h3>
  43. <ul class="suggested"></ul>
  44. </article>
  45. </section>
  46. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  47. <script src="lib/6-2-ex-drink.js"></script>
  48. </body>
  49. </html>