typestar

Una página que responde en HTML

Panel desplegable, popover, diálogo y una región viva en una página, sin framework.

<main>
  <h1>Deploy</h1>

  <p id="deploy-state" role="status" aria-live="polite">Idle</p>

  <details name="deploy-info">
    <summary>What happens on deploy</summary>
    <ol>
      <li>Build the image</li>
      <li>Run the migrations</li>
      <li>Swap the containers</li>
    </ol>
  </details>

  <button type="button" popovertarget="deploy-help">Help</button>
  <div id="deploy-help" popover>
    <p>Deploys take about four minutes.</p>
  </div>

  <button type="button" id="start">Deploy to production</button>

  <dialog id="confirm" aria-labelledby="confirm-title">
    <h2 id="confirm-title">Deploy to production?</h2>
    <p>This replaces the running version.</p>
    <form method="dialog">
      <button value="cancel">Cancel</button>
      <button value="go">Deploy</button>
    </form>
  </dialog>
</main>

<script>
  const dialog = document.getElementById('confirm');
  const state = document.getElementById('deploy-state');
  document.getElementById('start')
    .addEventListener('click', () => dialog.showModal());
  dialog.addEventListener('close', () => {
    state.textContent = dialog.returnValue === 'go'
      ? 'Deploying to production'
      : 'Idle';
  });
</script>

Cómo funciona

  1. Cada parte interactiva usa el elemento hecho para eso.
  2. El único script es el que abre el diálogo y actualiza el estado.
  3. Todo aquí sigue funcionando solo con el teclado.

Palabras clave y builtins usados aquí

El intento, en números

Líneas
42
Caracteres a escribir
1083
Tokens
267
Ritmo de tres estrellas
80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 200 segundos.

Escribe este fragmento

Paso 3 de 3 en Scripts e incrustaciones; paso 12 de 13 en HTML interactivo.

← Anterior Siguiente →