Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/medium

    Repair the Design-token Gradient Editor

    Challenge workspace

    35-45 min
    Component compositionPath 24/33
    Components & propsCompositionState & eventsForms

    Suggested first

    Repair Account Settings Tabs

    Your workspace must pass its server-side browser checks to complete this challenge.

    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