JAVASCRIPT Free Section Starter Challenge 30 min

3. Interactive DOM Manipulation & Event Handling

Overview: Listen to button clicks, toggle CSS classes, and update innerHTML.

Concept & Syntax Guide

Use `document.querySelector()` to grab elements and `.addEventListener('click', () => {})` to respond to user actions. Dynamic interfaces update in real time without refreshing the browser.

Hands-On Practice Exercise

Build an Interactive Click Counter

Select the button `#counterBtn` and span `#countVal`. When clicked, increment the count number by 1.

Target Output: Current Count

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Current Count

JAVASCRIPT Code Editor

1
2
3
4
5
6
7
8
9
10

<div style="padding:20px; text-align:center;">
  <h3>Current Count: <span id="countVal">0</span></h3>
  <button id="counterBtn" style="padding:10px 20px; background:#82b440; border:none; font-weight:bold; cursor:pointer;">
    Click to Increment
  </button>
</div>

<script>
let count = 0;
const btn = document.getElementById('counterBtn');
const span = document.getElementById('countVal');

// Add your event listener here
btn.addEventListener('click', () => {
  count++;
  span.textContent = count;
  console.log('Clicked! New count:', count);
});
</script>