Component compositionPath 17/21
Components & propsCompositionState & eventsForms
Prerequisites are suggestions only. Every challenge stays open.
Gradient Generator
In this challenge, you'll create a Gradient Generator that dynamically updates a preview box based on the user-selected colors. Users will input colors using color pickers, and the gradient preview will reflect their choices in real-time.
Requirements
- Display a preview box that shows the gradient
- Use an array of colors stored in a state to generate the gradient
- Provide color pickers for users to select the colors in the gradient
- The gradient should dynamically update as users change colors
- Write clean, reusable code for updating state and rendering components
Features to Implement
- Gradient Preview: A visual box that displays the current gradient
- Color Picker Controls: Input elements for users to select colors
- Dynamic Updates: Real-time gradient changes as colors are modified
- Add/Remove Colors: Ability to add more colors or remove existing ones
- Responsive Design: Works well on different screen sizes
Tips
- Use CSS
linear-gradient() for creating the gradient
- Store colors in a React state array
- Create reusable functions for adding, removing, and updating colors
- Consider using CSS-in-JS or styled-components for better organization
- Test the gradient with different color combinations