@@ -5,7 +5,6 @@ class Quizzes {
55 this . cardsContainer = document . querySelector ( ".quizzes-main" )
66 this . card = document . createElement ( "a" )
77 this . image = document . createElement ( "img" )
8- this . color = document . createElement ( "div" )
98 this . label = document . createElement ( "p" )
109 this . title = document . createElement ( "h2" )
1110 this . date = document . createElement ( "span" )
@@ -15,26 +14,29 @@ class Quizzes {
1514
1615 this . createCards ( )
1716 }
17+ 18+ setAttributes ( el , attrs ) {
19+ for ( var key in attrs ) {
20+ el . setAttribute ( key , attrs [ key ] ) ;
21+ }
22+ }
1823
1924 createCards ( ) {
2025 quizzes . forEach ( quiz => {
2126 this . cardContainer = this . cardsContainer . appendChild ( this . card . cloneNode ( true ) )
2227 this . cardContainer . setAttribute ( "href" , quiz . url )
2328 this . cardContainer . setAttribute ( "target" , "_blank" )
24- this . cardContainer . appendChild ( this . image . cloneNode ( true ) ) . setAttribute ( "src" , quiz . imageUrl )
25- this . cardContainer . appendChild ( this . image . cloneNode ( true ) ) . setAttribute ( "alt" , quiz . imageAlt )
29+ this . setAttributes ( this . cardContainer . appendChild ( this . image . cloneNode ( true ) ) , { "src" : quiz . imageUrl , "alt" : quiz . imageAlt } )
2630 this . cardContainer . appendChild ( this . label . cloneNode ( true ) ) . innerHTML = quiz . technology
2731 this . cardContainer . appendChild ( this . title . cloneNode ( true ) ) . innerHTML = quiz . name
2832 this . cardContainer . appendChild ( this . date . cloneNode ( true ) ) . innerHTML = quiz . date
2933
30- let color = this . cardContainer . appendChild ( this . color . cloneNode ( true ) )
31- 3234 if ( quiz . technology === this . javascript ) {
33- color . classList . remove ( "css-color" )
34- color . classList . add ( "javascript-color" )
35+ this . cardContainer . getElementsByTagName ( "p" ) [ 0 ] . style . backgroundColor = "#FDFFBC"
36+ } else if ( quiz . technology === this . css ) {
37+ this . cardContainer . getElementsByTagName ( "p" ) [ 0 ] . style . backgroundColor = "#FFE3DE"
3538 } else {
36- color . classList . remove ( "javascript-color" )
37- color . classList . add ( "css-color" )
39+ this . cardContainer . getElementsByTagName ( "p" ) [ 0 ] . style . backgroundColor = "#C6FCED"
3840 }
3941 } )
4042 }
0 commit comments