1+ let container = document . querySelector ( ".container" ) ;
2+ let gridButton = document . getElementById ( "submit-grid" ) ;
3+ let clearGridButton = document . getElementById ( "clear-grid" ) ;
4+ let gridWidth = document . getElementById ( "width-range" ) ;
5+ let gridHeight = document . getElementById ( "height-range" ) ;
6+ let colorButton = document . getElementById ( "color-input" ) ;
7+ let eraseBtn = document . getElementById ( "erase-btn" ) ;
8+ let paintBtn = document . getElementById ( "paint-btn" ) ;
9+ let widthValue = document . getElementById ( "width-value" ) ;
10+ let heightValue = document . getElementById ( "height-value" ) ;
11+
12+ let events = {
13+ mouse : {
14+ down : "mousedown" ,
15+ move : "mousemove" ,
16+ up : "mouseup"
17+ } ,
18+ touch : {
19+ down : "touchstart" ,
20+ mobe : "touchmove" ,
21+ up : "touchend" ,
22+ } ,
23+ } ;
24+
25+ let deviceType = "" ;
26+
27+ let draw = false ;
28+ let erase = false ;
29+
30+ const isTouchDevice = ( ) => {
31+ try {
32+ document . createEvent ( "TouchEvent" ) ;
33+ deviceType = "touch" ;
34+ return true ;
35+ } catch ( e ) {
36+ deviceType = "mouse" ;
37+ return false ;
38+ }
39+ } ;
40+
41+ isTouchDevice ( ) ;
42+
43+ gridButton . addEventListener ( "click" , ( ) => {
44+ container . innerHTML = "" ;
45+ let count = 0 ;
46+ for ( let i = 0 ; i < gridHeight . value ; i ++ ) {
47+ count += 2 ;
48+ let div = document . createElement ( "div" ) ;
49+ div . classList . add ( "gridRow" ) ;
50+
51+ for ( let j = 0 ; j < gridWidth . value ; j ++ ) {
52+ count += 2 ;
53+ let col = document . createElement ( "div" ) ;
54+ col . classList . add ( "gridCol" ) ;
55+ col . setAttribute ( "id" , `gridCol${ count } ) ;
56+ col . addEventListener ( events [ deviceType ] . down , ( ) => {
57+ draw = true ;
58+ if ( erase ) {
59+ col . style . backgroundColor = "transparent" ;
60+ } else {
61+ col . style . backgroundColor = colorButton . value ;
62+ }
63+ } ) ;
64+
65+ col . addEventListener ( events [ deviceType ] . move , ( e ) => {
66+ let elementId = document . elementFromPoint (
67+ ! isTouchDevice ( ) ? e . clientX : e . touches [ 0 ] . clientX ,
68+ ! isTouchDevice ( ) ? e . clientY : e . touches [ 0 ] . clientY ,
69+ ) . id ;
70+ checker ( elementId ) ;
71+ } ) ;
72+
73+ col . addEventListener ( events [ deviceType ] . up , ( ) => {
74+ draw = false ;
75+ } ) ;
76+
77+ div . appendChild ( col ) ;
78+
79+ }
80+
81+ container . appendChild ( div ) ;
82+
83+ }
84+ } ) ;
85+
86+ function checker ( elementId ) {
87+ let gridColumns = document . querySelectorAll ( ".gridCol" ) ;
88+ gridColumns . forEach ( ( element ) => {
89+ if ( elementId == element . id ) {
90+ if ( draw && ! erase ) {
91+ element . style . backgroundColor = colorButton . value ;
92+ } else if ( draw && erase ) {
93+ element . style . backgroundColor = "transparent" ;
94+ }
95+ }
96+ } ) ;
97+ }
98+
99+ clearGridButton . addEventListener ( "click" , ( ) => {
100+ container . innerHTML = "" ;
101+ } ) ;
102+
103+ eraseBtn . addEventListener ( "click" , ( ) => {
104+ erase = true ;
105+ } ) ;
106+
107+ paintBtn . addEventListener ( "click" , ( ) => {
108+ erase = false ;
109+ } ) ;
110+
111+ gridWidth . addEventListener ( "input" , ( ) => {
112+ widthValue . innerHTML = gridWidth . value < 9 ? `0${ gridWidth . value } : gridWidth . value ;
113+ } ) ;
114+
115+ gridHeight . addEventListener ( "input" , ( ) => {
116+ heightValue . innerHTML = gridHeight . value < 9 ? `0${ gridHeight . value } : gridHeight . value ;
117+ } ) ;
118+
119+ window . onload = ( ) => {
120+ gridHeight . value = 0 ;
121+ gridWidth . value = 0 ;
122+ } ;
0 commit comments