Full Stack Camp

B) Properties (often nicer)

const img = document.querySelector('img'); img.src = 'cat.jpg'; img.alt = 'A cute cat';

C) Custom data: data-* + dataset

<button id="pay" data-plan="pro" data-price="299">Buy</button> <script> const pay = document.getElementById('pay'); console.log(pay.dataset.plan); // "pro" console.log(pay.dataset.price); // "299" </script>

8) Forms + validation basics (DOM side)

<form id="signup"> <input id="email" type="email" placeholder="Email" required /> <input id="pwd" type="password" placeholder="Password (min 6)" minlength="6" required /> <button>Sign Up</button> </form> <p id="status"></p> <script> const form = document.getElementById('signup'); const status = document.getElementById('status'); form.addEventListener('submit', (e) => { e.preventDefault(); if (!form.checkValidity()) { status.textContent = 'Please fix form errors.'; return; } const email = document.getElementById('email').value; status.textContent =Welcome, ${email}!; });
</script>

✅ Uses built-in HTML validation + DOM for feedback.

9) When should your JS run? (DOMContentLoaded, defer)

Option A: Put <script> at the end of <body>
HTML loads first → then script runs (elements exist).

Option B: Use defer in the head
<script src="app.js" defer></script>
defer waits until HTML is parsed, then runs script.

Option C: Listen for the DOM to be ready

document.addEventListener('DOMContentLoaded', () => {
   // safe to query and manipulate the DOM here });

10) Mini build (step-by-step): Add items to a list + remove items
(Just a teaching demo; not a “challenge”)

<form id="todoForm"> <input id="todoInput" placeholder="New task..." /> <button>Add</button> </form> <ul id="todoList"></ul> <script> const form = document.getElementById('todoForm'); const input = document.getElementById('todoInput'); const list = document.getElementById('todoList'); form.addEventListener('submit', (e) => { e.preventDefault(); const text = input.value.trim(); if (!text) return; // 1) create const li = document.createElement('li'); li.textContent = text + ' '; // remove button const removeBtn = document.createElement('button'); removeBtn.textContent = '✖'; removeBtn.setAttribute('aria-label', 'Remove item'); li.append(removeBtn); // 2) insert list.appendChild(li); // 3) clear input input.value = ''; }); // Event delegation to remove items list.addEventListener('click', (e) => { if (e.target.tagName === 'BUTTON') { e.target.parentElement.remove(); } }); </script>

What you practiced here:
➤submit + preventDefault()
➤createElement / appendChild / append
➤event.target and delegation on the <ul>

11) Good habits & small gotchas
✅Prefer addEventListener over inline events.
✅Use textContent for text; innerHTML only when you must render HTML (never with untrusted input).
✅Prefer classes (classList) over inline styles.
✅Use defer or run code after DOMContentLoaded.
✅When attaching many handlers to many children, prefer event delegation on their parent.
✅Keep HTML semantic & accessible (use <button> for clickables, connect <label> with for to inputs, etc.).

🧠 Today you learned
✅The right way to handle events with addEventListener (and how to remove them).
✅The event object and how to use event.target.
✅The difference between input / change / submit / keyboard & mouse events.
✅Creating, inserting, cloning, and removing elements.
✅classList, attributes vs properties, and custom data- attributes.
✅How to organize scripts so the DOM exists when your code runs.

🔥🔥You just unlocked the power to build real interactive pages. 🚀

80 views18:49