Design and develop a random color generator web application using React. This application will show a random color when a button is clicked:
A button with the exact text Generate will cause a new color to be generated when it is clicked
Once a color is generated, update the background color of a div which contains the exact text Generated Color: (the background color and the hex code must match) Our suggestions for breaking down the task into TODOs:
// The problem
- creating a random color generator
// TODO
- Use the useState hook to store the current color value
- Generate a random hex color by getting a random number and converting to hex
- Update the color state to trigger a re-render with the new color
- Set the div background color to match the current color value
// the proposed solution (if there is one)
-
[ ]display:
- color should be random
- an input field
- a place for color
- a button
- button with the exact text Generate will cause a new color
-
[ ]any alternative solutions
-
[ ]the technology choices of the final solution
-
[ ]which existing code or components the final solution will affect
-
[ ]any conflicts that may arise with existing code or components
-
[ ]the UX and visual design of the final solution
-
[ ]all of the different ways how the user will use the final solution (if applicable)
-
[ ]the data model of the final solution
This time, you will need to think about design in the browser: Design the web app with a tool like Figma or by sketching the design out on paper Come up with a detailed list of features you'll need for the application above For each of the features, write which dependencies, functions and React component(s) you'll need for them, if any Describe how each component will interact with the other components Identify any unknowns