File tree 2 files changed +83
-0
lines changed
09 - Dev Tools Domination
2 files changed +83
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < title > Dev Tools Domination</ title >
5
+ < meta charset ="utf-8 ">
6
+ < meta name ="viewport " content ="width=device-width, initial-scale=1, maximum-scale=1 ">
7
+ < link href ="dist/main.css " type ="text/css " rel ="stylesheet ">
8
+ </ head >
9
+ < body >
10
+
11
+ < p onclick ="makeGreen() "> ×BREAK×DOWN×</ p >
12
+
13
+ < script src ="main.js "> </ script >
14
+ </ body >
15
+ </ html >
Original file line number Diff line number Diff line change
1
+ const dogs = [ { name : 'Snickers' , age : 2 } , { name : 'hugo' , age : 8 } ] ;
2
+
3
+ function makeGreen ( ) {
4
+ const p = document . querySelector ( 'p' ) ;
5
+ p . style . color = '#BADA55' ;
6
+ p . style . fontSize = '50px' ;
7
+ }
8
+
9
+ // Regular
10
+ console . log ( 'hello' ) ;
11
+
12
+ // clearing
13
+ console . clear ( ) ;
14
+
15
+ // Interpolated
16
+ console . log ( 'Hello I am a %s string!' , '💩' ) ;
17
+
18
+ // Styled
19
+ console . log ( '%c I am some great text' , 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue' ) ;
20
+
21
+ // warning!
22
+ console . warn ( 'OH NOOO' ) ;
23
+
24
+ // Error :|
25
+ console . error ( 'Shit!' ) ;
26
+
27
+ // Info
28
+ console . info ( 'Crocodiles eat 3-4 people per year' ) ;
29
+
30
+ // Testing
31
+ const p = document . querySelector ( 'p' ) ;
32
+ console . assert ( p . classList . contains ( 'ouch' ) , 'That is wrong!' ) ;
33
+
34
+ // Viewing DOM Elements
35
+ console . dir ( p ) ;
36
+
37
+
38
+ // Grouping together
39
+ dogs . forEach ( dog => {
40
+ console . groupCollapsed ( `${ dog . name } ` ) ;
41
+ console . log ( `This is ${ dog . name } ` ) ;
42
+ console . log ( `${ dog . name } is ${ dog . age } years old` ) ;
43
+ console . log ( `${ dog . name } is ${ dog . age * 7 } dog years old` ) ;
44
+ console . groupEnd ( `${ dog . name } ` ) ;
45
+ } ) ;
46
+
47
+ // counting
48
+
49
+ console . count ( 'Wes' ) ;
50
+ console . count ( 'Wes' ) ;
51
+ console . count ( 'Steve' ) ;
52
+ console . count ( 'Steve' ) ;
53
+ console . count ( 'Wes' ) ;
54
+ console . count ( 'Steve' ) ;
55
+ console . count ( 'Wes' ) ;
56
+ console . count ( 'Steve' ) ;
57
+
58
+
59
+ // timing
60
+ console . time ( 'fetching data' ) ;
61
+ fetch ( 'https://api.github.com/users/afuh' )
62
+ . then ( data => data . json ( ) )
63
+ . then ( data => {
64
+ console . timeEnd ( 'fetching data' ) ;
65
+ console . log ( data ) ;
66
+ } ) ;
67
+
68
+ console . table ( dogs ) ;
You can’t perform that action at this time.
0 commit comments