Made rolling dice web apk which works on the concept of Up and Down Button by which allows the user to change the score based on click using the ReactJS, JSX, components, props, and component state best practices.
Create a ReactJS application for rolling dice.
Your application should present the user with two numbers, labelled with "number of dice" and the "number of sides" (for a dice). The number of dice should initially be set to "1" and the number of sides should initially be set to "6". Beside each number should be an up button and a down button. When the up button is clicked, the number should increment by 1, when the down button is clicked, the number should decrement by 1. The number of sides should have a minimum value of 2 (i.e. do not allow the user to lower the number of sides below 2), and the number of dice should have a minimum value of 1 (i.e do not allow the user to lower the number of dice below 1).
The application should also provide a "roll" button. When the roll button is clicked, beneath the numbers and buttons described above should appear the results of a dice roll, using the current number of sides for a dice and the number of sides for a dice to perform the roll. The results should include a representation of each individual dice and the number that was rolled, as well as a sum of all the dice numbers. You can represent each dice as a coloured square with a number inside (i.e. numeral dice), it doesn't have to have dots like most dice. If the roll button is clicked again, a new roll and new results should be presented based on the current number of dice and number of sides. The dice rolls should be random.
Your solution must be built using ReactJS in the expected ways using components, state, props and other concepts. Your solution should use class components, it should not use function components or hooks (we will cover these concepts soon, but for this first React assignment we will focus on the foundational concepts first). Using jQuery, or using JavaScript in ways not expected when using ReactJS (e.g. DOM manipulation), will not be awarded marks.
Your solution must incorporate a dice component that is given its number to display via a prop. This component should not have any state. You should have at least one other component in your solution as well.
Used CSS to make the numbers, labels, buttons and dice appear attractive and professional.
