Day 11: Events, Event Object & Delegation

<button id="b">Click me</button>
<input id="i" placeholder="Type here…" aria-label="Type here">
<select id="s" aria-label="Size"><option>500 g</option><option>1 kg</option></select>
<div id="box" style="margin-top:8px;padding:16px;background:#fef3c7;border-radius:8px">Hover / double-click me</div>
<pre id="log" style="height:110px;overflow:auto;background:#111827;color:#a7f3d0;padding:8px;border-radius:8px"></pre>

<script>
const log = msg => {
  const box = document.querySelector('#log');
  box.textContent = msg + '\n' + box.textContent;
};
document.querySelector('#b').addEventListener('click', () => log('click'));
document.querySelector('#i').addEventListener('input', e => log('input: ' + e.target.value));
document.querySelector('#s').addEventListener('change', e => log('change: ' + e.target.value));
const box = document.querySelector('#box');
box.addEventListener('mouseenter', () => log('mouseenter'));
box.addEventListener('dblclick', () => log('dblclick'));
</script>

<a id="link" href="https://example.com">Go to example.com (blocked)</a>
<p>Press any key while this preview is focused…</p>
<p id="out"></p>

<script>
document.querySelector('#link').addEventListener('click', function (event) {
  event.preventDefault();                       // stop the default action (navigation)
  document.querySelector('#out').textContent = `Link click stopped. target: <${event.target.tagName.toLowerCase()}>`;
});
document.addEventListener('keydown', e => {
  document.querySelector('#out').textContent =
    `key: "${e.key}"  code: ${e.code}  ctrl: ${e.ctrlKey}  shift: ${e.shiftKey}`;
});
</script>

<div id="outer" style="padding:16px;background:#e0e7ff;border-radius:10px">outer div
  <div id="inner" style="padding:16px;background:#c7d2fe;border-radius:10px;margin-top:6px">inner div
    <button id="btn">button</button>
  </div>
</div>
<p id="path"></p>

<script>
const path = [];
['#btn', '#inner', '#outer'].forEach(sel => {
  document.querySelector(sel).addEventListener('click', e => {
    path.push(e.currentTarget.id);
    document.querySelector('#path').textContent = 'Order: ' + path.join(' → ');
  });
});
document.querySelector('#btn').addEventListener('click', () => { path.length = 0; }, { capture: true });
</script>

<ul id="products"></ul>
<button id="more">Load 2 more products</button>
<p id="cart">Cart: 0 items</p>

<script>
const all = ['Kaju Katli', 'Ghewar', 'Rasmalai', 'Ladoo', 'Kalakand', 'Soan Papdi'];
let shown = 2, cartCount = 0;
const list = document.querySelector('#products');

function render() {
  list.innerHTML = all.slice(0, shown).map((name, i) =>
    `<li>${name} <button data-action="add" data-index="${i}">Add</button>
                  <button data-action="info" data-index="${i}">Info</button></li>`).join('');
}

// ONE listener on the parent handles every button – even ones added later
list.addEventListener('click', e => {
  const btn = e.target.closest('button[data-action]');
  if (!btn) return;                                  // click was not on a button
  const name = all[Number(btn.dataset.index)];
  if (btn.dataset.action === 'add') {
    cartCount++;
    document.querySelector('#cart').textContent = `Cart: ${cartCount} items (last: ${name})`;
  } else {
    alert(`${name}: made fresh every morning`);
  }
});
document.querySelector('#more').addEventListener('click', () => { shown = Math.min(all.length, shown + 2); render(); });
render();
</script>

<button id="open">Open offer</button>
<div id="modal" hidden style="margin-top:10px;padding:16px;border:2px solid #ca8a04;border-radius:12px">🎁 10% off today! <small>(press Esc or click ✕)</small> <button id="x" aria-label="Close">✕</button></div>
<p><button id="once">Claim coupon (works once)</button> <span id="c"></span></p>

<script>
const modal = document.querySelector('#modal');
function onKey(e) { if (e.key === 'Escape') close(); }
function open() { modal.hidden = false; document.addEventListener('keydown', onKey); }
function close() { modal.hidden = true; document.removeEventListener('keydown', onKey); }   // same function reference!
document.querySelector('#open').addEventListener('click', open);
document.querySelector('#x').addEventListener('click', close);

document.querySelector('#once').addEventListener('click', () => {
  document.querySelector('#c').textContent = 'Coupon SWEET10 applied ✅';
}, { once: true });
</script>