https://github.com/shivlalsharma/color-picker
A simple and responsive Color Picker application built with HTML, CSS, and JavaScript. This tool generates random colors, displays their hex codes, and allows users to copy the codes with a "Copied!" message for visual feedback.
https://github.com/shivlalsharma/color-picker
color-picker css html javacript random-color-generator responsive-design web-development
Last synced: 2 months ago
JSON representation
A simple and responsive Color Picker application built with HTML, CSS, and JavaScript. This tool generates random colors, displays their hex codes, and allows users to copy the codes with a "Copied!" message for visual feedback.
- Host: GitHub
- URL: https://github.com/shivlalsharma/color-picker
- Owner: shivlalsharma
- License: mit
- Created: 2024-12-01T11:15:26.000Z (over 1 year ago)
- Default Branch: javascript
- Last Pushed: 2024-12-01T11:23:07.000Z (over 1 year ago)
- Last Synced: 2025-04-07T20:54:56.043Z (about 1 year ago)
- Topics: color-picker, css, html, javacript, random-color-generator, responsive-design, web-development
- Language: CSS
- Homepage: https://color-picker03.netlify.app/
- Size: 31.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Color Picker
A simple and responsive **Color Picker** application that generates random colors, displays the corresponding hex code, and allows users to copy the code with a single click. A "Copied!" message appears temporarily when a color code is successfully copied.
## Deployment
This project is live and accessible online. You can try it out here: [Color Picker](https://color-picker03.netlify.app/)
## Features
- **Random Color Generation**: Generates random colors with a single click.
- **Hex Code Display**: Displays the generated color's hex code in real-time.
- **Copy to Clipboard**: Easily copies the hex code to the clipboard by clicking the copy icon.
- **Visual Feedback**: Shows a "Copied!" message above the copy icon for 1 second after successfully copying.
- **Responsive Design**: Works seamlessly across different devices and screen sizes.
## Technologies Used
### Frontend
- **HTML5**: Structuring the UI.
- **CSS3**: Styling and animations.
- **JavaScript**: Functionality and interactivity.
### Libraries
- **Font Awesome**: For the copy icon.
## How It Works
1. **Generate Color**:
- Click the "Generate Color" button to generate a random color.
- The background color of the page changes to the generated color.
- The corresponding hex code is displayed and styled with the generated color.
2. **Copy Hex Code**:
- Click on the copy icon to copy the hex code to the clipboard.
- A "Copied!" message appears above the copy icon for 1 second.
3. **Visual Feedback**:
- The "Copied!" message fades in and out smoothly to inform users of successful copy operations.
## Installation
follow these steps to run the project locally:
1. **Clone the repository**:
```bash
git clone https://github.com/shivlalsharma/color-picker.git
cd color-picker
```
2. **Open the `index.html` file in your browser**.
Alternatively, you can set up a local server (e.g., using **VS Code Live Server**) to view the project in your browser.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Author
Created and deployed by **Shivlal Sharma**.
- **GitHub**: [Shivlal Sharma's GitHub](https://github.com/shivlalsharma)
- **LinkedIn**: [Shivlal Sharma's LinkedIn](https://www.linkedin.com/in/shivlal-sharma-56ba5a284/)