1+ <!DOCTYPE html>
2+ < html >
3+
4+ < head >
5+ < title > Document Object Model:30 Days Of JavaScript</ title >
6+ < link href ="https://fonts.googleapis.com/css?family=Lato:300, 400,400i,700,700i&display=swap " rel ="stylesheet ">
7+ < link href ="https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap " rel ="stylesheet ">
8+ </ head >
9+
10+ < body >
11+
12+ < div class ="wrapper ">
13+ < h1 > Asabeneh Yetayeh challenges in < span > 2020</ span > </ h1 >
14+ < h2 > 30DaysOfJavaScript Challenge</ h2 >
15+ < p > </ p >
16+ < ul >
17+ < li > 30DaysOfPython Challenge Done</ li >
18+ < li > 30DaysOfJavaScript Challenge Ongoing</ li >
19+ < li > 30DaysOfReact Challenge Coming</ li >
20+ < li > 30DaysOfReactNative Challenge Coming</ li >
21+ < li > 30DaysOfFullStack Challenge Coming</ li >
22+ < li > 30DaysOfDataAnalysis Challenge Coming</ li >
23+ < li > 30DaysOfMachineLearning Challenge Coming</ li >
24+ </ ul >
25+ </ div >
26+
27+ < script >
28+ const hexaColor = ( ) => {
29+ const str = '0123456789abcdef'
30+ let hexa = '#'
31+ let index
32+ for ( let i = 0 ; i < 6 ; i ++ ) {
33+ index = Math . floor ( Math . random ( ) * str . length )
34+ hexa += str [ index ]
35+ }
36+ return hexa
37+ }
38+
39+ const showDateTime = ( ) => {
40+ const months = [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' ,
41+ 'October' , 'November' , 'December'
42+ ]
43+ const now = new Date ( )
44+ const year = now . getFullYear ( )
45+ const month = months [ now . getMonth ( ) ]
46+ const date = now . getDate ( )
47+ let hours = now . getHours ( )
48+ let minutes = now . getMinutes ( )
49+ let seconds = now . getSeconds ( )
50+ if ( hours < 10 ) {
51+ hours = '0' + hours
52+ }
53+ if ( minutes < 10 ) {
54+ minutes = '0' + minutes
55+ }
56+ if ( seconds < 10 ) {
57+ seconds = '0' + seconds
58+ }
59+
60+ const dateMonthYear = `${ month } ${ date } ${ year }
61+
62+ const time = hours + ':' + minutes
63+ const fullTime = dateMonthYear + ' ' + time
64+ return fullTime + `:${ seconds }
65+ }
66+
67+ const wrapper = document . querySelector ( '.wrapper' )
68+ const year = document . querySelector ( 'span' )
69+ const time = document . querySelector ( 'p' )
70+ wrapper . style . width = '50%'
71+ wrapper . style . margin = 'auto'
72+ const title = document . querySelector ( 'h1' )
73+ const subTitle = document . querySelector ( 'h2' )
74+ title . style . textAlign = 'center'
75+ title . style . fontFamily = 'Montserrat'
76+ title . style . fontWeight = 500
77+
78+ subTitle . style . textAlign = 'center'
79+ subTitle . style . fontFamily = 'Montserrat'
80+ subTitle . style . fontWeight = 300
81+ subTitle . style . textDecoration = 'underline'
82+
83+
84+ time . style . textAlign = 'center'
85+ time . style . fontFamily = 'Montserrat'
86+ time . style . fontWeight = 400
87+
88+ setInterval ( ( ) => {
89+ year . style . color = hexaColor ( )
90+ year . style . fontSize = '96px'
91+ year . style . fontWeight = 700 ;
92+ time . textContent = showDateTime ( )
93+ time . style . background = hexaColor ( )
94+ time . style . width = "25%"
95+ time . style . margin = 'auto'
96+ time . style . padding = '10px'
97+
98+ } , 1000 )
99+
100+
101+
102+ const ul = document . querySelector ( 'ul' )
103+ const lists = document . querySelectorAll ( 'li' )
104+ for ( const list of lists ) {
105+ list . style . listStyle = 'none'
106+ list . style . padding = '25px'
107+ list . style . margin = '3px'
108+ list . style . fontFamily = 'Montserrat'
109+ list . style . fontWeight = 300 ;
110+ list . style . letterSpacing = '0.0625em'
111+
112+ if ( list . textContent . includes ( 'Done' ) ) {
113+ list . style . background = '#21bf73'
114+ } else if ( list . textContent . includes ( 'Ongoing' ) ) {
115+ list . style . background = '#fddb3a'
116+
117+
118+
119+ } else {
120+ list . style . background = '#fd5e53'
121+
122+ }
123+
124+ }
125+ </ script >
126+ </ body >
127+
128+ </ html >
0 commit comments