Day 4: Events & addEventListener

Daily Objective

Listen for user input and interactions with addEventListener and inspect event details.

1. Handling Events

const btn = document.querySelector('#action-btn');
btn.addEventListener('click', event => {
  console.log('Button clicked!', event.target);
});

const input = document.querySelector('#name-input');
input.addEventListener('input', e => {
  console.log('Current value:', e.target.value);
});

Daily Hands-on Practice (70%)

1. Create a live character counter that updates a <span> in real-time as a user types into a <textarea>.