1+ const pickerBtn = document . querySelector ( "#picker-btn" ) ;
2+ const clearBtn = document . querySelector ( "#clear-btn" ) ;
3+ const colorList = document . querySelector ( ".all-colors" ) ;
4+ const exportBtn = document . querySelector ( "#export-btn" ) ;
5+
6+ // Retrieving picked colors form localStorage or initializing an empty array
7+ let pickedColors = JSON . parse ( localStorage . getItem ( "colors-list" ) ) || [ ] ;
8+
9+ // Variable to keep track of the current color popup
10+ let currentPopup = null ;
11+
12+ //Function to copy text to the clipboard
13+ const copyToClipboard = async ( text , element ) => {
14+ try {
15+ await navigator . clipboard . writeText ( text ) ;
16+ element . innerText = "Copied!" ;
17+ //Resetting element text after 1 second
18+ setTimeout ( ( ) => {
19+ element . innerText = text ;
20+
21+ } , 1000 ) ;
22+ } catch ( error ) {
23+ alert ( "Filed to Copy text!" ) ;
24+ }
25+ } ;
26+
27+ //Function to export colors as text file
28+ const exportColors = ( ) => {
29+ const colorText = pickedColors . join ( "\n" ) ;
30+ const blob = new Blob ( [ colorText ] , { type : "text/plain" } ) ;
31+ const url = URL . createObjectURL ( blob ) ;
32+ const a = document . createElement ( "a" ) ;
33+ a . href = url ;
34+ a . download = "Colors.text" ;
35+ document . body . appendChild ( a ) ;
36+ a . click ( ) ;
37+ document . body . removeChild ( a ) ;
38+ URL . revokeObjectURL ( url ) ;
39+ } ;
40+
41+ //Function to create the color popup
42+ const createColorPopup = ( color ) => {
43+ const popup = document . createElement ( "div" ) ;
44+ popup . classList . add ( "color-popup" ) ;
45+ popup . innerHTML = `
46+ <div class="color-popup-content">
47+ <span class="close-popup">x</span>
48+ <div class="color-info">
49+ <div class="color-preview" style="background: ${ color }
50+ <div class="color-details">
51+ <div class="color-value">
52+ <span class="label">Hex: </span>
53+ <span class="value hex" data-color="${ color } ${ color }
54+ </div>
55+ <div class="color-value">
56+ <span class="label">RGB:</span>
57+ <span class="value rgb" data-color="${ color } ${ hexToRgb ( color ) }
58+ </div>
59+ </div>
60+ </div>
61+ </div>
62+
63+ ` ;
64+
65+ // Close button inside the popup
66+ const closePopup = popup . querySelector ( ".close-popup" ) ;
67+ closePopup . addEventListener ( 'click' , ( ) => {
68+ document . body . removeChild ( popup ) ;
69+ currentPopup = null ;
70+ } ) ;
71+
72+ //Event listeners to copy color value to clipboard
73+ const colorValues = popup . querySelectorAll ( ".value" ) ;
74+ colorValues . forEach ( ( value ) => {
75+ value . addEventListener ( 'click' , ( e ) => {
76+ const text = e . currentTarget . innerText ;
77+ copyToClipboard ( text , e . currentTarget ) ;
78+ } ) ;
79+ } ) ;
80+
81+ return popup ;
82+
83+ } ;
84+ //Function to display the picked colors
85+ const showColors = ( ) => {
86+ colorList . innerHTML = pickedColors . map ( ( color ) =>
87+ `
88+ <li class="color">
89+ <span class="rect" style="background: ${ color } ${ color === "#ffffff" ? "#ccc" : color }
90+ <span class="value hex" data-color="${ color } ${ color }
91+ </li>
92+ `
93+ ) . join ( "" ) ;
94+
95+ const colorElement = document . querySelectorAll ( ".color" ) ;
96+ colorElement . forEach ( ( li ) => {
97+ const colorHex = li . querySelector ( ".value.hex" ) ;
98+ colorHex . addEventListener ( 'click' , ( e ) => {
99+ const color = e . currentTarget . dataset . color ;
100+ if ( currentPopup ) {
101+ document . body . removeChild ( currentPopup ) ;
102+ }
103+ const popup = createColorPopup ( color ) ;
104+ document . body . appendChild ( popup ) ;
105+ currentPopup = popup ;
106+ } ) ;
107+ } ) ;
108+
109+ const pickedColorsContainer = document . querySelector ( ".colors-list" ) ;
110+ pickedColorsContainer . classList . toggle ( "hide" , pickedColors . length === 0 ) ;
111+
112+ } ;
113+
114+ // function to convert a hex color code to rgb format
115+ const hexToRgb = ( hex ) => {
116+ const bigint = parseInt ( hex . slice ( 1 ) , 16 ) ;
117+ const r = ( bigint >> 16 ) & 255 ;
118+ const g = ( bigint >> 8 ) & 255 ;
119+ const b = bigint & 255 ;
120+ return `rgb(${ r } ${ g } ${ b } ;
121+
122+ } ;
123+
124+ // function to activate the eye dropper color picker
125+ const activateEyeDropper = async ( ) => {
126+ document . body . style . display = "none" ;
127+ try {
128+ //Opening the eye dropper and retrieving the selected color
129+ const { sRGBHex} = await new EyeDropper ( ) . open ( ) ;
130+
131+ if ( ! pickedColors . includes ( sRGBHex ) ) {
132+ pickedColors . push ( sRGBHex ) ;
133+ localStorage . setItem ( "colors-list" , JSON . stringify ( pickedColors ) ) ;
134+ }
135+
136+ showColors ( ) ;
137+ } catch ( error ) {
138+ alert ( "Filed to Copy the color code!" ) ;
139+ } finally {
140+ document . body . style . display = "block" ;
141+ }
142+ } ;
143+
144+ // function to clear all picked colors
145+ const clearAllColors = ( ) => {
146+ pickedColors = [ ] ;
147+ localStorage . removeItem ( "colors-list" ) ;
148+ showColors ( ) ;
149+ } ;
150+
151+ // Event listeners for buttons
152+ clearBtn . addEventListener ( 'click' , clearAllColors ) ;
153+ pickerBtn . addEventListener ( 'click' , activateEyeDropper ) ;
154+ exportBtn . addEventListener ( 'click' , exportColors ) ;
155+
156+ showColors ( ) ;
0 commit comments