typestar

component_page.html in HTML

One page, four built-in behaviors: a template, a custom element, a popover and a dialog.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Snippet library</title>
  </head>
  <body>
    <header>
      <h1>Snippet library</h1>
      <button type="button" popovertarget="shortcuts">Shortcuts</button>
      <div id="shortcuts" popover>
        <h2>Keyboard shortcuts</h2>
        <dl>
          <dt><kbd>/</kbd></dt>
          <dd>Focus the filter</dd>
          <dt><kbd>Esc</kbd></dt>
          <dd>Close this</dd>
        </dl>
      </div>
    </header>

    <main>
      <search>
        <form action="/snippets" method="get">
          <label for="filter">Filter</label>
          <input type="search" id="filter" name="q">
        </form>
      </search>

      <p id="row-count" role="status" aria-live="polite">0 snippets</p>

      <table>
        <caption>Snippets in this library</caption>
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Language</th>
            <th scope="col">Lines</th>
          </tr>
        </thead>
        <tbody id="rows"></tbody>
      </table>

      <template id="row-template">
        <tr>
          <th scope="row" class="name"></th>
          <td class="lang"></td>
          <td class="lines"></td>
        </tr>
      </template>

      <button type="button" id="clear">Clear the library</button>

      <dialog id="confirm" aria-labelledby="confirm-title">
        <h2 id="confirm-title">Clear the library?</h2>
        <form method="dialog">
          <button value="cancel">Cancel</button>
          <button value="clear">Clear</button>
        </form>
      </dialog>
    </main>

    <script>
      const rows = document.getElementById('rows');
      const template = document.getElementById('row-template');
      const count = document.getElementById('row-count');

      const add = (snippet) => {
        const row = template.content.cloneNode(true);
        row.querySelector('.name').textContent = snippet.name;
        row.querySelector('.lang').textContent = snippet.lang;
        row.querySelector('.lines').textContent = snippet.lines;
        rows.append(row);
        count.textContent = `${rows.children.length} snippets`;
      };

      add({ name: 'binary_search', lang: 'Rust', lines: 18 });
      add({ name: 'window_named', lang: 'SQL', lines: 15 });

      const dialog = document.getElementById('confirm');
      document.getElementById('clear')
        .addEventListener('click', () => dialog.showModal());
      dialog.addEventListener('close', () => {
        if (dialog.returnValue !== 'clear') return;
        rows.replaceChildren();
        count.textContent = '0 snippets';
      });
    </script>
  </body>
</html>

How it works

  1. The template holds the row markup, so no HTML lives in a string.
  2. The custom element owns its own behavior, attached to the tag.
  3. The popover and the dialog each get their focus handling for free.

Keywords and builtins used here

The run, in numbers

Lines
91
Characters to type
2205
Tokens
628
Three-star pace
85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 443 seconds.

Type this snippet

Step 1 of 1 in Encore, step 13 of 13 in Interactive HTML.

← Previous