<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<!--
    trying to summarize checkboxes checked so far using JavaScript

    by: Sharon Tuttle
    last modified: 2024-04-30

    you can run this using the URL:
    https://nrs-projects.humboldt.edu/~st10/s24cs328/328lect15-extra/js-ckbox-play.html
-->

<head>
    <title> JS Array example </title>
    <meta charset="utf-8" />

    <link href="https://nrs-projects.humboldt.edu/~st10/styles/normalize.css"
          type="text/css" rel="stylesheet" />

    <link href="js-ckbox-play.css"
          type="text/css" rel="stylesheet" />

    <!-- this is grabbing the JavaScript used from another file 
         (only this script, does NOT depend on others, async should
         be good here, I think!) -->

    <script src="updateSummary.js" type="text/javascript" async="async">
    </script>
</head>

<body>

<h1> my first JavaScript Array example </h1>

<hr />
    <p>
    Note - This page will not work correctly without JavaScript
    (its JavaScript is NOT unobtrusive enough!!)
    </p>
<hr />

<p>
    <label>
        <input type="checkbox" name="cheddar" class="toppingChoice" />
        Cheddar </label> <br />

    <label>
        <input type="checkbox" name="lettuce" class="toppingChoice" />
        Lettuce </label> <br /> 

    <label>
        <input type="checkbox" name="ketchup" class="toppingChoice" />
        Ketchup </label> <br />
</p>

<h2> Summary of toppings: </h2>
<p id="topping-summary">
    Summary of toppings:
</p>

    <footer>
    <hr />
    <p>
        Validate by pasting .xhtml copy's URL into<br />
        <a href="https://validator.w3.org/nu">
            https://validator.w3.org/nu
        </a>
        or  
        <a href="https://html5.validator.nu/">
            https://html5.validator.nu/
        </a>
    </p>
    </footer></body>
</html>