typestar

A page that responds in HTML

Disclosure, popover, dialog and a live region on one page, with no 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>

How it works

  1. Each interactive part uses the element built for it.
  2. The only script is the one that opens the dialog and updates the status.
  3. Everything here keeps working with the keyboard alone.

Keywords and builtins used here

The run, in numbers

Lines
42
Characters to type
1083
Tokens
267
Three-star pace
80 tpm

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

Type this snippet

Step 3 of 3 in Scripts & embeds, step 12 of 13 in Interactive HTML.

← Previous Next →