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
Generatewill 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: <background color hex code>(the background color and the hex code must match)
Our suggestions for breaking down the task into TODOs:
- If you need a reminder of how we did this last week, watch the video showing breaking down tasks
- Read the Breaking Down Tasks Into TODOs page on the Learning Platform
- 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
- Allow user to specify hue (eg. green or red or blue)
- Allow user to specify luminosity (eg. light or dark)
- Transition smoothly between the colors as they change
- Use a CSS-in-JS library for all styling (eg. Emotion or Styled Components)
- Allow user to specify size for the color box
- Make a "screensaver mode" where the color box moves around in a diagonal pattern, bouncing off the screen edges and changing color (eg. like this)
- Preflight runs without errors in your project
- Drone bot has been tagged and responded with a passing message
- Correct GitHub commit message format (see Writing Commit Messages)