Facebook Pixel

Dice Roller

React.js
medium
20 mins

Create a Dice Roller Component that simulates rolling a dice when a button is clicked. The dice should display a random number between 1 and 6.

Requirements

  1. The component should have a button labeled "Roll Dice".
  2. Clicking the button should generate a random number between 1 and 6.
  3. The rolled number should be displayed on the screen with text ="🎲 diceValue".
  4. If the Roll Dice button is not clicked , then show a message "Click to roll!"
  5. The UI should include a dice-like representation (optional).

Constraints & Edge Cases

  • Constraint 1: The rolled number should always be between 1 and 6.
  • Constraint 2: Ensure the result updates correctly on every button click.
  • Edge Case 1: Handle cases where the button is clicked multiple times quickly.
  • Edge Case 2: Ensure UI updates correctly when the dice is rolled.

Reference UI

diceRoller

Preview what you need to build

Solve Similar questions 🔥