Data Attributes for Custom Data

<div id="user-profile"
     data-user-id="42"
     data-user-name="Alice"
     data-role="admin"
     data-active="true"
     data-last-login="2025-01-15">
  <h2>User Profile</h2>
  <p>Click to view details</p>
</div>

<button class="action-btn"
        data-action="delete"
        data-confirm="Are you sure?"
        data-endpoint="/api/users/42"
        data-method="DELETE">
  Delete User
</button>

<ul class="todo-list">
  <li data-todo-id="1" data-completed="false">Buy groceries</li>
  <li data-todo-id="2" data-completed="true">Walk the dog</li>
  <li data-todo-id="3" data-completed="false">Do laundry</li>
</ul>

<script>
  const profile = document.getElementById('user-profile');
  console.log(profile.dataset.userId);
  console.log(profile.dataset.userName);
  console.log(profile.dataset.role);
  console.log(profile.dataset.active === 'true');

  document.querySelectorAll('.action-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
      const { action, confirm: msg, endpoint, method } = btn.dataset;
      if (msg && !window.confirm(msg)) return;
      const response = await fetch(endpoint, { method });
      console.log(`${action} completed`);
    });
  });

  document.querySelectorAll('.todo-list li').forEach(item => {
    item.addEventListener('click', () => {
      const id = item.dataset.todoId;
      const completed = item.dataset.completed === 'true';
      item.dataset.completed = !completed;
      item.style.textDecoration = !completed ? 'line-through' : 'none';
    });
  });
</script>