🚀 New React Challenge: Roll dices

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 3 and only accepts values between 1 and 6, submitted with a Roll button.
• On submit, roll as many dice as the input value — rendering one Dice component per dice, each showing a random value between 1 and 6.
• Add three random number generators, each with its own Roll button and a result display, producing random integers:
  • Between -10 and 10, both included.
  • Between 7 and 14, both not included.
  • Between 0 and 255, both included.

---

💡 Notes

• A Dice.tsx component is provided and read-only, so you can focus on state and logic instead of markup.

---

🧪 Tests

1. Default input value is 3
2. Does not roll more than 6 dice
3. Does not roll fewer than 1 dice
4. Clicking roll renders a number of dice equal to the input value
5. Random values map to valid dice faces
6. First random generator returns values between -10 and 10, both included
7. Second random generator returns values between 8 and 13, both not included
8. 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.

🔥 Start the Challenge Now