index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My List</title>
  <link rel="stylesheet" href="/src/css/style.css">
  <script type="module" src="/src/main.ts" defer></script>
</head>

<body>
  <main>
    <h1 class="offscreen">My List</h1>

    <section class="newItemEntry">
      <h2 class="offscreen">New Item Entry</h2>
      <form class="newItemEntry__form" id="itemEntryForm">
        <label for="newItem" class="offscreen">Enter a new to do item</label>
        <input class="newItemEntry__input" id="newItem" type="text" maxlength="40" autocomplete="off"
          placeholder="Add item" />
        <button id="addItem" class="button newItemEntry__button" title="Add new item" aria-label="Add new item to list">
          +
        </button>
      </form>
    </section>

    <section class="listContainer">
      <header class="listTitle">
        <h2 id="listName">List</h2>
        <button id="clearItemsButton" class="button listTitle__button" title="Clear the list"
          aria-label="Remove all items from the list">
          Clear
        </button>
      </header>
      <hr />
      <ul id="listItems">
        <!-- <li class="item">
                    <input type="checkbox" id="1">
                    <label for="1">eat</label>
                    <button class="button">X</button>
                </li>
                <li class="item">
                    <input type="checkbox" id="2">
                    <label for="2">sleep</label>
                    <button class="button">X</button>
                </li>
                <li class="item">
                    <input type="checkbox" id="3">
                    <label for="3">code</label>
                    <button class="button">X</button>
                </li> -->
      </ul>
    </section>
  </main>
</body>

</html>