🌐
50 React Coding Puzzles
  • 50 React Coding Puzzles
  • Contact
  • Reviews
  • Table of Contents
  • Introduction
  • 1 - Simple Counter App
  • 2 - Dynamic List of Items with Strikethrough
  • 3 - Color Picker with Hex Code Display
  • 4 - Password Strength Checker
  • 5 - Countdown Timer with Audio
  • 6 - Dynamic Movie List with Filtering and Sorting
  • 7 - Text Animation Component (Fade/Scroll)
  • 8 - Dynamically Generated Text Art
  • 9 - Meme Generator with Custom Text
  • 10 - "What Should I Eat?" Random Recipe Generator
  • 11 - Simple Quiz App with Multiple Choice
  • 12 - Unit Converter
  • 13 - Dynamic Image Gallery with Lightbox
  • 14 - Weather Widget with Temperature and Description
  • 15 - Contact Form with Email and Message Validation
  • 16 - Color Palette Generator
  • 17 - Drag-and-Drop Feature for Rearranging Items
  • 18 - Interactive Quiz with Dynamic Results and Feedback
  • 19 - To-Do List with Task Categorization
  • 20 - Note-Taking App with Markdown Support
  • 21 - Simple Calculator with Basic Operations
  • 22 - Word Scramble Game with Timer and Score
  • 23 - Number Guessing Game
  • 24 - Digital Clock with Time Zone Support
  • 25 - Interactive Time Zone Converter
  • 26 - Weather Forecast App with Location Detection
  • 27 - Real-Time Stock Ticker with Updates
  • 28 - Virtual Dice Roller with Multiple Dice
  • 29 - Responsive Navigation Menu with Dropdowns
  • 30 - Progress Bar for Loading or Task Completion
  • 31 - Modal Window for Alerts and Confirmations
  • 32 - Infinite Scroll for Loading More Content
  • 33 - Form Validation with Error Messages
  • 34 - Search Bar with Filtering and Suggestions
  • 35 - Drag-and-Drop File Upload
  • 36 - Interactive Color Picker with Sliders
  • 37 - Image Carousel with Autoplay
  • 38 - Rating System with Stars or Thumbs Up/Down
  • 39 - Comment Section with Nested Replies
  • 40 - Pagination for Long Lists of Data
  • 41 - Stopwatch app that tracks elapsed time
  • 42 - Responsive E-commerce Product Grid
  • 43 - Random Movie/Book Recommender
  • 44 - Kanban board for managing tasks with drag-and-drop
  • 45 - Chat application with real-time messaging using WebSockets
  • 46 - Calendar that displays events and allows scheduling
  • 47 - Tic-Tac-Toe Game
  • 48 - Hangman Game
  • 49 - Notes App
  • 50 - Expense Tracker
  • Afterword
  • Appendix
Powered by GitBook
On this page
  • Description
  • Algorithm
  • Classes
  • Code
  • Explanation
  • Possible Future Enhancements:

16 - Color Palette Generator

Description

Create a React application that generates a color palette with the following features:

  • Start with a random color

  • Adjust the palette size

  • Preview the colors

  • Copy color codes

Algorithm

  1. Generate a random color using a color library like chroma-js.

  2. Create a state variable to store the palette size.

  3. Create a state variable to store the generated colors.

  4. Define a function to generate a new color palette based on the palette size.

  5. Define a function to copy the color codes to the clipboard.

  6. Render a preview of the colors with a copy button.

Classes

ColorPaletteGenerator: A component that generates the color palette and renders the preview.

Code

import React, { useState } from 'react';
import chroma from 'chroma-js';

function ColorPaletteGenerator() {
  const [paletteSize, setPaletteSize] = useState(5);
  const [colors, setColors] = useState([]);

  const generatePalette = () => {
    const colors = [];
    for (let i = 0; i < paletteSize; i++) {
      colors.push(chroma.random().hex());
    }
    setColors(colors);
  };

  const copyColors = () => {
    const colorCodes = colors.join(', ');
    navigator.clipboard.writeText(colorCodes);
  };

  return (
    <div>
      <input
        type="number"
        value={paletteSize}
        onChange={(event) => setPaletteSize(event.target.value)}
      />
      <button onClick={generatePalette}>Generate Palette</button>
      <div>
        {colors.map((color) => (
          <div
            style={{ backgroundColor: color, width: 50, height: 50 }}
          />
        ))}
      </div>
      <button onClick={copyColors}>Copy Color Codes</button>
    </div>
  );
}

export default ColorPaletteGenerator;

Explanation

The ColorPaletteGenerator component generates a color palette with a random color using chroma-js. The component uses the useState hook to store the palette size and generated colors. The generatePalette function generates a new color palette based on the palette size. The copyColors function copies the color codes to the clipboard. The component renders a preview of the colors with a copy button.

Possible Future Enhancements:

  • Add more features to the color palette generator (e.g., color harmony, contrast).

  • Use a more advanced color library (e.g., color-thief).

  • Display the color codes in a more user-friendly format (e.g., hex, rgb).

  • Style the component with CSS.

Previous15 - Contact Form with Email and Message ValidationNext17 - Drag-and-Drop Feature for Rearranging Items

Last updated 10 months ago