1+ let colors = document . querySelectorAll ( ".color-box" ) ;
2+ let notesList = document . querySelectorAll ( ".note-node" ) ;
3+
4+ let selectedArr = [ false , false , false , false ] ;
5+ let colorsArr = [ "#d795ac" , "#60cbdf" , "#92e6c8" , "#312f31" ] ;
6+
7+ let deleteStatus = false ;
8+
9+ for ( let i = 0 ; i < colors . length ; i ++ ) {
10+ colors [ i ] . addEventListener ( 'click' , function ( ) {
11+ if ( selectedArr [ i ] ) {
12+ resetTaskbarColors ( ) ;
13+ setBackgroundColor ( document . body , "#f3f2f3" ) ;
14+ selectedArr [ i ] = false ;
15+ filterTasksByColor ( true ) ;
16+ } else {
17+ setBackgroundColor ( document . body , colorsArr [ i ] ) ;
18+ resetTaskbarColors ( ) ;
19+ setBackgroundColor ( colors [ i ] , "#3a383a" ) ;
20+ selectTask ( i ) ;
21+ filterTasksByColor ( false , i ) ;
22+ }
23+ } ) ;
24+ }
25+
26+ function filterTasksByColor ( all , colorIdx ) {
27+ if ( all ) {
28+ for ( let i = 0 ; i < notesList . length ; i ++ ) {
29+ notesList [ i ] . style . display = 'flex' ;
30+ }
31+ } else {
32+ for ( let i = 0 ; i < notesList . length ; i ++ ) {
33+ let noteColor = notesList [ i ] . querySelector ( ".note-color" ) ;
34+ let color = noteColor . getAttribute ( "color" ) ;
35+ if ( color == getColorName ( colorIdx ) )
36+ notesList [ i ] . style . display = 'flex' ;
37+ else
38+ notesList [ i ] . style . display = 'none' ;
39+ }
40+ }
41+ }
42+
43+ function selectTask ( task ) {
44+ for ( let i = 0 ; i < selectedArr . length ; i ++ ) {
45+ if ( task == i )
46+ selectedArr [ i ] = true ;
47+ else
48+ selectedArr [ i ] = false ;
49+ }
50+ }
51+
52+ function resetTaskbarColors ( ) {
53+ for ( let i = 0 ; i < colors . length ; i ++ ) {
54+ setBackgroundColor ( colors [ i ] , "#464446" ) ;
55+ }
56+ }
57+
58+ function setBackgroundColor ( element , color ) {
59+ element . style . backgroundColor = color ;
60+ }
61+
62+ let add = document . querySelector ( ".b1" ) ;
63+ let del = document . querySelector ( ".b2" ) ;
64+
65+ let modal = document . querySelector ( ".modal-container" ) ;
66+
67+ let priorities = document . querySelectorAll ( ".priority" ) ;
68+ let priorityColorsNotSelected = [ "#a57888" , "#579da9" , "#79ac9a" , "#383638" ] ;
69+ let chosenPriority = priorities . length - 1 ;
70+
71+ add . addEventListener ( 'click' , function ( ) {
72+ modal . style . display = "block" ;
73+ resetPriorityColors ( ) ;
74+ chosenPriority = priorities . length - 1 ;
75+ priorities [ chosenPriority ] . style . border = "3px solid #000000" ;
76+ } ) ;
77+
78+ document . querySelector ( ".main-content" ) . addEventListener ( 'click' , function ( ) {
79+
80+ } ) ;
81+
82+ del . addEventListener ( 'mouseenter' , function ( ) {
83+ setBackgroundColor ( del , "#3a383a" ) ;
84+ } ) ;
85+ del . addEventListener ( 'mouseleave' , function ( ) {
86+ if ( ! deleteStatus )
87+ setBackgroundColor ( del , "#464446" ) ;
88+ } ) ;
89+ del . addEventListener ( 'click' , function ( ) {
90+ if ( deleteStatus ) {
91+ setBackgroundColor ( del , "#464446" ) ;
92+ } else {
93+ setBackgroundColor ( del , "#3a383a" ) ;
94+ }
95+ deleteStatus = ! deleteStatus ;
96+ } ) ;
97+
98+ for ( let i = 0 ; i < priorities . length ; i ++ ) {
99+ priorities [ i ] . addEventListener ( 'mouseenter' , function ( ) {
100+ setBackgroundColor ( priorities [ i ] , colorsArr [ i ] ) ;
101+ } ) ;
102+ priorities [ i ] . addEventListener ( 'mouseleave' , function ( ) {
103+ if ( chosenPriority != i )
104+ setBackgroundColor ( priorities [ i ] , priorityColorsNotSelected [ i ] ) ;
105+ } ) ;
106+ priorities [ i ] . addEventListener ( 'click' , function ( ) {
107+ resetPriorityColors ( ) ;
108+ setBackgroundColor ( priorities [ i ] , colorsArr [ i ] ) ;
109+ priorities [ i ] . style . border = "3px solid #000000" ;
110+ chosenPriority = i ;
111+ } ) ;
112+ }
113+
114+ function resetPriorityColors ( ) {
115+ for ( let i = 0 ; i < priorities . length ; i ++ ) {
116+ setBackgroundColor ( priorities [ i ] , priorityColorsNotSelected [ i ] ) ;
117+ priorities [ i ] . style . border = "none" ;
118+ }
119+ }
120+
121+ let input = document . querySelector ( ".modal-input" ) ;
122+ input . addEventListener ( 'keypress' , function ( e ) {
123+ if ( e . key == 'Enter' && input . value . trim ( ) != '' ) {
124+ modal . style . display = "none" ;
125+ let data = input . value ;
126+ input . value = '' ;
127+ createNotes ( data ) ;
128+ }
129+ } ) ;
130+
131+ let notes = document . querySelector ( ".notes-container" ) ;
132+
133+ function createNotes ( data ) {
134+ let node = document . createElement ( "div" ) ;
135+ node . setAttribute ( "class" , "note-node" ) ;
136+ node . innerHTML = `
137+ <div class="note-color" color="` + getColorName ( chosenPriority ) + `"></div>
138+ <p class="note-uid">#` + randomId ( 6 ) + `</p>
139+ <p class="note-content">` + data + `</p>
140+ ` ;
141+ notes . appendChild ( node ) ;
142+
143+ let color = node . querySelector ( ".note-color" ) ;
144+ color . style . backgroundColor = colorsArr [ chosenPriority ] ;
145+ color . addEventListener ( 'click' , function ( ) {
146+ let colorName = color . getAttribute ( 'color' ) ;
147+ let colorIdx = getColorIdx ( colorName ) ;
148+ color . style . backgroundColor = colorsArr [ ( colorIdx + 1 ) % 4 ] ;
149+ color . setAttribute ( 'color' , getColorName ( ( colorIdx + 1 ) % 4 ) ) ;
150+ } ) ;
151+ notesList = document . querySelectorAll ( ".note-node" ) ;
152+ // filterTasksByColor(false, color.getAttribute('color'));
153+
154+ let colorHead = node . querySelector ( ".note-uid" ) ;
155+ colorHead . addEventListener ( 'click' , function ( ) {
156+ if ( deleteStatus ) {
157+ node . remove ( ) ;
158+ }
159+ } ) ;
160+ }
161+
162+ function getColorName ( idx ) {
163+ switch ( idx ) {
164+ case 0 : return 'pink' ;
165+ case 1 : return 'blue' ;
166+ case 2 : return 'green' ;
167+ case 3 : return 'black' ;
168+ }
169+ }
170+
171+ function getColorIdx ( name ) {
172+ switch ( name ) {
173+ case 'pink' : return 0 ;
174+ case 'blue' : return 1 ;
175+ case 'green' : return 2 ;
176+ case 'black' : return 3 ;
177+ }
178+ }
179+
180+ function randomId ( length ) {
181+ let chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' ;
182+ var result = '' ;
183+ for ( var i = length ; i > 0 ; -- i ) result += chars [ Math . floor ( Math . random ( ) * chars . length ) ] ;
184+ return result ;
185+ }
0 commit comments