Build a dice roller app that simulates the results of rolling a specified number of 6-sided dice.

Requirements

• The user can specify the number of dice to roll using the input field and the value can be an integer between 1 to 12 inclusive.
• Upon clicking the "Roll" button, the dice roll is simulated and the results are displayed.
• The results of the dice roll should be displayed in rows of three.

The example below shows a potential result of rolling 6 dice.

Source

This question is adapted from FrontendEval's Rolling Dice question.

Solution

The solution can be broken down into a few parts:

1. Collecting form data.
2. Generating dice values.
3. Displaying the dice values.

State

The only state value we need for this dice roller is the values of the rolled dice, which can be represented as an array of values that range from 1 to 6.

Collecting form data

Since the transfer of data from the form is one-directional, a basic HTML form will suffice.

By using <input type="number" required="true" min="1" max="12" />, we ensure only integer values can be entered and leverage HTML validation so that the minimum value of the fields is 1 and maximum is 12. Empty fields are also prevented via the required attribute.

Generating dice values