HTML5 APIs Overview

<button data-product-id="4471" data-in-stock="true">
  Add to Cart
</button>

<li data-user-id="882" data-role="admin" class="user-row">
  Maria Chen
</li>

<div data-tooltip="Click to expand" data-expanded="false">
  Section Header
</div>

<button id="add-btn" data-product-id="4471" data-in-stock="true">
  Add to Cart
</button>

<script>
  const btn = document.getElementById('add-btn');

  console.log(btn.dataset.productId);  // "4471"
  console.log(btn.dataset.inStock);    // "true"

  // Note: data-product-id  → dataset.productId
  //       data-in-stock    → dataset.inStock
  // The hyphen is removed and the following letter is capitalized —
  // exactly the same convention JavaScript already uses for
  // multi-word property names.
</script>

<div data-visible="false"></div>

<script>
  const el = document.querySelector('div');

  if (el.dataset.visible) {
    console.log('This runs — even though the data says "false"!');
    // "false" is a non-empty string, so it is truthy.
  }

  // The fix — an explicit string comparison
  if (el.dataset.visible === 'true') {
    console.log('This correctly does NOT run.');
  }
</script>

el.dataset.expanded = 'true';
// Sets the actual HTML attribute to: data-expanded="true"

el.dataset.itemCount = '12';
// Sets: data-item-count="12"

<div class="panel" data-state="collapsed">...</div>

<style>
  .panel[data-state="collapsed"] {
    max-height: 0;
    overflow: hidden;
  }
  .panel[data-state="expanded"] {
    max-height: 500px;
  }
</style>

<script>
  document.querySelector('.panel').dataset.state = 'expanded';
  // Toggling ONE attribute value drives the entire visual state change —
  // no separate CSS classes to add and remove in sync with each other.
</script>

<div contenteditable="true">
  This text can be clicked into and edited directly, right in the page.
</div>

<h2 contenteditable="true">Click this heading to rename it</h2>

<div contenteditable="true" id="title">Untitled Document</div>

<script>
  const title = document.getElementById('title');

  title.addEventListener('input', () => {
    console.log('Current content:', title.innerText);
    // In a real app, this is where you'd debounce and send an
    // autosave request to the server.
  });
</script>

<!-- No built-in form submission — contenteditable content is not
     automatically included when a <form> submits, unlike a real input -->
<form>
  <div contenteditable="true">This will NOT be sent on submit</div>
  <button type="submit">Submit</button>
</form>

<!-- No built-in validation — required, maxlength, and pattern
     simply do not apply to a contenteditable div at all -->
<div contenteditable="true" required></div>
<!-- "required" here has no effect whatsoever -->

<form id="post-form">
  <div contenteditable="true" id="post-body"></div>
  <input type="hidden" name="body" id="hidden-body">
  <button type="submit">Publish</button>
</form>

<script>
  document.getElementById('post-form').addEventListener('submit', () => {
    // Copy the editable content into the hidden input just before
    // submission, so it actually gets included in the form data.
    document.getElementById('hidden-body').value =
      document.getElementById('post-body').innerHTML;
  });
</script>

<div class="card" draggable="true" id="card-1">
  Task: Write Q3 report
</div>

dragstart   — fires ONCE, on the element being dragged, the instant the drag begins
dragover    — fires REPEATEDLY, on the drop target, continuously while something
              is being dragged over it (many times per second)
drop        — fires ONCE, on the drop target, the instant the item is released

<div class="card" draggable="true" id="card-1">Task: Write Q3 report</div>

<script>
  const card = document.getElementById('card-1');

  card.addEventListener('dragstart', (event) => {
    event.dataTransfer.setData('text/plain', card.id);
    // Storing the dragged element's id lets the drop handler
    // later identify exactly which element to move.
  });
</script>

<div class="column" id="in-progress-column"></div>

<script>
  const column = document.getElementById('in-progress-column');

  column.addEventListener('dragover', (event) => {
    event.preventDefault();  // REQUIRED — without this, "drop" never fires
  });
</script>

column.addEventListener('drop', (event) => {
  event.preventDefault();
  const draggedId = event.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(draggedId);
  column.appendChild(draggedElement);   // moves the real element in the DOM
});

<div class="board">
  <div class="column" data-status="todo" id="todo-column">
    <h3>To Do</h3>
    <div class="card" draggable="true" data-card-id="1">Write Q3 report</div>
    <div class="card" draggable="true" data-card-id="2">Review PR #482</div>
  </div>

  <div class="column" data-status="done" id="done-column">
    <h3>Done</h3>
  </div>
</div>

<script>
  // dragstart on every card — record which card is being dragged
  document.querySelectorAll('.card').forEach((card) => {
    card.addEventListener('dragstart', (event) => {
      event.dataTransfer.setData('text/plain', card.dataset.cardId);
    });
  });

  // dragover + drop on every column
  document.querySelectorAll('.column').forEach((column) => {
    column.addEventListener('dragover', (event) => {
      event.preventDefault();  // required, or drop never fires
      column.classList.add('drag-over');  // visual feedback while dragging over
    });

    column.addEventListener('dragleave', () => {
      column.classList.remove('drag-over');
    });

    column.addEventListener('drop', (event) => {
      event.preventDefault();
      column.classList.remove('drag-over');

      const cardId = event.dataTransfer.getData('text/plain');
      const card = document.querySelector(`[data-card-id="${cardId}"]`);
      column.appendChild(card);

      console.log(`Card ${cardId} moved to status: ${column.dataset.status}`);
    });
  });
</script>

A Portland-based project-management startup ships a Kanban board feature, letting users drag task cards between "To Do," "In Progress," and "Done" columns. During internal QA, a report comes in: dragging a card over the "Done" column highlights it correctly with a visual border, but releasing the mouse does nothing at all — the card snaps right back to its original column, with no error anywhere in the browser console.

document.querySelectorAll('.column').forEach((column) => {
  column.addEventListener('dragover', () => {
    column.classList.add('drag-over');  // visual highlight works fine
  });

  column.addEventListener('drop', (event) => {
    const cardId = event.dataTransfer.getData('text/plain');
    const card = document.querySelector(`[data-card-id="${cardId}"]`);
    column.appendChild(card);
  });
});

What the engineer finds

Exactly the bug flagged in Part 07: the dragover handler never calls event.preventDefault(). Because the browser's default response to a dragover is to reject the drop outright, the visual highlight applied by the handler works perfectly fine — CSS classes have nothing to do with the drag-and-drop protocol itself — while the actual drop event silently never fires at all. The missing call is a single line, but its absence is completely invisible from the visual behavior alone, since the highlight gives every impression that the interaction is "almost working."

column.addEventListener('dragover', (event) => {
  event.preventDefault();   // ← the missing line
  column.classList.add('drag-over');
});

The team adds a short comment directly above every dragover listener in the codebase afterward — // preventDefault() required here or drop() never fires — specifically because this exact bug had already cost an afternoon of debugging once, and the fix is trivial to miss again on the next drag-and-drop feature built by someone unfamiliar with this particular quirk of the API.