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

1. Gradient Preview: A visual box that displays the current gradient
2. Color Picker Controls: Input elements for users to select colors
3. Dynamic Updates: Real-time gradient changes as colors are modified
4. Add/Remove Colors: Ability to add more colors or remove existing ones
5. 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