Random Number Generator

Easy
156
9
60.5% Acceptance

Your task is to build an application that:

  1. Takes input for a starting number and an ending number.
  2. Generates a random number between (and including) those two numbers upon a button click.
  3. Displays the generated random number or appropriate error messages based on input validation.

Remember, in React, when working with user inputs and displaying dynamic data, you'll most likely be dealing with component state. You'll need to update this state every time the input values change or when the random number needs to be generated.

Instructions

  1. Input Fields: Begin by creating two input fields of type number. One for the starting range (startRange) and the other for the ending range (endRange).

  2. Generate Button and Display: Implement a button that, when clicked, will generate the random number. Additionally, you should have a display area (a div element) to show the generated number or any error messages.

  3. Input Validation: Ensure that the input values are numbers. If a user enters a non-numeric value or leaves the input empty, display an error message "Invalid Input".

  4. Random Number Generation: Once the inputs are validated, generate a random number between the start and end range (inclusive). Display this number in the designated display area.

  5. State Updates: It's vital in React to use state effectively for dynamic data. Utilize the useState hook to manage the input values and the generated random number. Every time a new random number is required, update the state, ensuring the component reflects the change.

  6. Continuous Generation: The random number should change every time the generate button is clicked, demonstrating the dynamic nature of React applications.

Challenges

Challenge 1: Input Elements

Ensure you create two input elements of type number. One should have the ID startRange and the other should have the ID endRange.

Challenge 2: Generate Button and Display Element

You should have a button with the ID generate. Additionally, create a div element with the ID randomNumber to display the generated random number or error messages.

Challenge 3: Input Validation

When the generate button is clicked, check the values in the input fields. If either value is not a number, the div with the ID randomNumber should display the text Invalid Input.

Challenge 4: Displaying the Random Number

On clicking the generate button with valid number inputs in startRange and endRange, a random number (inclusive) between these two values should be generated and displayed in the div with the ID randomNumber.

Challenge 5: Updating the Random Number

Every time the generate button is clicked, a new random number should be generated and displayed. Ensure that the random number updates with each click.