cf.completefrontend

Write the codeEasy

Build a counter with a step and a reset, using updater functions

Build App: a paragraph that shows Count: 0, a number input labelled Step that starts at 1, and four buttons: Add, Subtract, Add twice, and Reset.

Add and Subtract change the count by the step, and the count may go below 0. Add twice runs the same add logic twice in one click, so with a step of 5 it adds 10. Reset sets the count back to 0 and leaves the step as it is. An empty step counts as 0.

Write this (App.jsx)
export default function App() {
  return (
    <div>
      <p>Count: 0</p>
      <label>
        Step <input type="number" defaultValue={1} />
      </label>
      <button>Add</button>
      <button>Subtract</button>
      <button>Add twice</button>
      <button>Reset</button>
    </div>
  );
}
The checks your code must pass
  • starts at 0 with a step of 1
  • Add and Subtract change the count by 1
  • uses the step, and can go below 0
  • Add twice adds the step two times
  • Reset goes back to 0 and keeps the step
  • an empty step adds nothing

Try it in the editor

The answer

Write it yourself first. Then compare it with a reference solution and the checks it passes.

Checking your sign-in…