Interactive Color Picker Tool
About the Project
This was a fun project I made on CodePen.io. When you hover your cursor in any one of the grids, a random color (in RGB value) will be displayed. Then if you click on it, it automatically copies that RGB value to your clipboard so you can paste it anywhere you want.
- Randomly chosen color by hovering mouse
- 1500+ views on CodePen.io so far
While the logic for accomplishing this interaction was arguably easy, it was actually hard when I had to implement it.
Here’s the basic logic:
- Create multiple Divs and numbered them either through CSS’s
- Utilized the
- Each Div has an
onClickfunction that receives an argument (the RGB value from the Div’s content) and copies the value to the user’s clipboard.
- Alert the user of the successfuly copying
What I Learned