/color-picker

The Color Picker is a React application that allows users to select colors from a palette and copy their hexadecimal values to the clipboard. Built with React and styled using Tailwind CSS, this project demonstrates modern frontend development practices with a focus on interactive design and responsive layout.

Primary LanguageJavaScript

Color Picker

Color Picker Demo

A simple and interactive color picker built with React and Tailwind CSS. This application allows users to select and copy color hex codes and displays the selected color and its details.

Features

  • Interactive Color Blocks: Click on any color block to select it. The hex code of the selected color is copied to the clipboard.
  • Responsive Design: The layout adjusts to different screen sizes, displaying color blocks in a flexible and wrap-around manner.
  • Focus and Accessibility: Supports keyboard navigation and focus styles for better accessibility.

Installation

To run this project locally, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/freddyfavour/color-picker.git
cd color-picker

  2. Install Dependencies: Make sure you have Node.js and npm installed. Then run:

    npm install

  3. Start the Development Server:

    npm start

    This will start the development server and open the application in your default browser at http://localhost:3000.

Usage

  • Select a Color: Click on any color block to select it. The color's hex code will be copied to your clipboard.
  • View Selected Color: The selected color's name and hex code will be displayed below the color blocks.

Project Structure

  • src/
    • ColorPicker.jsx: The main component for the color picker interface.
    • App.jsx: The main application component.
    • index.css: Tailwind CSS setup and global styles.
    • main.jsx: Entry point of the application where React is initialized.
  • public/
    • index.html: The HTML template for the React app.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Tailwind CSS: A utility-first CSS framework for styling.
  • JavaScript (ES6): The programming language used for development.

Contributing

If you would like to contribute to this project, please follow these steps:

  1. Fork the Repository.
  2. Create a New Branch: 
    git checkout -b feature-branch
  3. Make Your Changes and Commit: 
    git commit -am 'Add new feature'
  4. Push Your Changes: 
    git push origin feature-branch
  5. Create a Pull Request on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

  • React and Tailwind CSS for providing the tools and libraries to build this project.
  • Tailwind CSS Documentation for responsive design utilities.

Contact

If you have any questions or feedback, feel free to reach out: