Command Palette

Search for a command to run...

Hectal
Phase 4: State and Events
React · Exercise 1 of 5Next
Beginner

A counter with plus, minus and reset

Build a counter. Show the number in a paragraph with id="count", starting at 0.

Add three buttons: id="plus" adds 1, id="minus" takes 1 away but never goes below 0, and id="reset" sets it back to 0.

Use one state variable and pass functions (not function calls) to onClick.

What Check tests

  1. The count starts at 0
  2. Clicking + three times shows 3
  3. Clicking − once shows 2
  4. Reset goes back to 0
  5. − never goes below 0

Stuck? One hint at a time

The solution unlocks after your first Check. Try first: that is where the learning happens.

Runs in your browser. Your code is saved here.

Your page

Press Run to see the page.

Console

Nothing logged yet.