typestar

component_page.html en HTML

Una página, cuatro comportamientos nativos: template, elemento personalizado, popover y diálogo.

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

Cómo funciona

  1. El template guarda el marcado de la fila, así ningún HTML vive en un string.
  2. El elemento personalizado es dueño de su comportamiento, atado a la etiqueta.
  3. El popover y el diálogo reciben su manejo de foco gratis.

Palabras clave y builtins usados aquí

El intento, en números

Líneas
91
Caracteres a escribir
2205
Tokens
628
Ritmo de tres estrellas
85 tpm

Al ritmo de tres estrellas de 85 tokens por minuto, este intento toma unos 443 segundos.

Escribe este fragmento

Paso 1 de 1 en Bis; paso 13 de 13 en HTML interactivo.

← Anterior