Most of us write Math.floor(Math.random() * n) on autopilot and only realize later that the boundaries are wrong — inclusive when you wanted exclusive, or off by one. This challenge replaces that guesswork with practice: build a dice roller and three random number generators where getting the range right is the whole point.
🧩 Overview
Build a dice roller app plus three random number generators, practicing how to convert Math.random() into random integer values across different ranges.
👉 https://www.reactchallenges.com/challenges/roll-dices
✅ Requirements
- A form with an input that defaults to
3and only accepts values between1and6, submitted with a Roll button. - On submit, roll as many dice as the input value — rendering one
Dicecomponent per dice, each showing a random value between1and6. - Add three random number generators, each with its own Roll button and a result display, producing random integers:
- Between
-10and10, both included. - Between
7and14, both not included. - Between
0and255, both included.
- Between
💡 Notes
- A
Dice.tsxcomponent is provided and read-only, so you can focus on state and logic instead of markup.
🧪 Tests
- Default input value is 3
- Does not roll more than 6 dice
- Does not roll fewer than 1 dice
- Clicking roll renders a number of dice equal to the input value
- Random values map to valid dice faces
- First random generator returns values between -10 and 10, both included
- Second random generator returns values between 8 and 13, both not included
- Third random generator returns values between 0 and 255, both included
If you have ever doubted whether your random range formula is right, this is a quick, test-driven way to lock it in. You'll finish confident mapping Math.random() to any range — and rendering a list of components from state while you are at it.
