forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex-START.html
More file actions
92 lines (72 loc) · 2.1 KB
/
index-START.html
File metadata and controls
92 lines (72 loc) · 2.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Tricks!</title>
</head>
<body>
<!-- <p onClick="makeGreen()">×BREAK×DOWN×</p> -->
<ul class="repos-list">
</ul>
<script>
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
const p = document.querySelector('p');
function makeGreen() {
p.style.color = '#BADA55';
p.style.fontSize = '50px';
}
console.group('String');
// Styled
console.log('%c Hello, world!', 'font-family: "Comic Sans MS", "Comic Sans", cursive;font-size: 60px; font-weight: bold;');
// Regular
console.log('Hello, world!');
// Interpolated
console.log('Olá, eu sou um %s bem maneiro', '💩');
console.groupEnd('String');
console.groupCollapsed('Warning messages');
// warning!
console.warn('Eita');
// Error :|
console.error('Fudeu!');
// Info
console.info('hello, world!');
// Testing
console.assert(1 === 2, "Um é diferente de dois");
console.groupEnd('Warning messages');
// clearing
// console.clear()
// Viewing DOM Elements
console.group('Viewing DOM Elements')
console.log(p);
console.dir(p);
console.groupEnd('Viewing DOM Elements');
// Grouping together
dogs.forEach(dog => console.log(`This is ${dog.name} and it has ${dog.age} years old.`));
// counting
console.count('Ed');
console.count('Ed');
console.count('Vitor');
console.count('Vitor');
console.count('Ed');
console.count('Ed');
console.count('Vitor');
console.count('Ed');
console.count('Ed');
console.count('Ed');
// timing
const printRepoList = document.querySelector('.repos-list');
console.time('fetching data');
fetch('https://api.github.com/users/edkf/repos')
.then(data => data.json())
.then(data => {
const repoList = data.map(function(repoinfo){ return repoinfo.name});
console.log(repoList);
repoList.forEach(function(repoItem){
// console.log(repoItem);
return printRepoList.innerHTML = `<li>${repoItem}<li>`;
})
})
console.table(dogs);
</script>
</body>
</html>