easy JavaScript JS

Click Counter

The Brief

Build a click counter widget. Pressing the increment button bumps a number on the screen by one. A separate reset button sets the count back to zero. This is the classic JS event-handling exercise — get it tight and the rest of DOM scripting will feel familiar.

Acceptance Criteria

Tap a criterion to mark it off as you work. Tap a category header to expand or collapse.

1 A heading containing Clicks: followed by a <span id="count">0</span>

2 A button with id="increment" labelled +1

3 A button with id="reset" labelled Reset

4 Page text-align: center, font-family: sans-serif

5 Buttons: padding: 8px 16px, rounded corners (border-radius: 6px), no border

6 Increment button: blue background #3b82f6, white text

7 Reset button: grey background #6b7280, white text

8 Store the count in a JS variable starting at 0

9 Use addEventListener (not inline onclick)

10 On #increment click: increase the count by 1 and update the #count span

11 On #reset click: set the count back to 0 and update the span

💡 Hints 0 / 3

Guest Mode Attempt freely, or log in to earn EXP & CodeCoins.

index.html

Live Preview