Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit aaa9602

Browse files
Day 09 - Dev Tools Domination
1 parent 8ffc67d commit aaa9602

File tree

4 files changed

+155
-0
lines changed

4 files changed

+155
-0
lines changed

‎09_day/index.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>09 Day</title>
7+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
8+
</head>
9+
10+
<body>
11+
<p onClick="makeGreen()">Click Me</p>
12+
<p><em>Please have a look at the JavaScript Console where you can see result of below code</em> 💁</p>
13+
<pre class="prettyprint">
14+
15+
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
16+
17+
function makeGreen() {
18+
const p = document.querySelector('p');
19+
p.style.color = '#BADA55';
20+
p.style.fontSize = '50px';
21+
}
22+
23+
// Regular
24+
console.log('hello');
25+
26+
// Interpolated
27+
console.log('Hello I am a %s string!', '💩');
28+
29+
// Styled
30+
// console.log('%c I am some great text', 'font-size:20px; background:green; text-shadow: 10px 10px 0 grey')
31+
32+
// warning!
33+
console.warn('OH NOOO');
34+
35+
// Error :|
36+
console.error('Shit!');
37+
38+
// Info
39+
console.info('Crocodiles eat 3-4 people per year');
40+
41+
// Testing
42+
const p = document.querySelector('p');
43+
44+
console.assert(p.classList.contains('ouch'), 'That is wrong!');
45+
46+
// clearing
47+
console.clear();
48+
49+
// Viewing DOM Elements
50+
console.log(p);
51+
console.dir(p);
52+
53+
// Grouping together
54+
dogs.forEach(dog => {
55+
console.groupCollapsed(`${dog.name}`);
56+
console.log(`This is ${dog.name}`);
57+
console.log(`${dog.name} is ${dog.age} years old`);
58+
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
59+
console.groupEnd(`${dog.name}`);
60+
});
61+
62+
// counting
63+
console.count('Wes');
64+
console.count('Wes');
65+
console.count('Steve');
66+
console.count('Steve');
67+
console.count('Wes');
68+
console.count('Steve');
69+
console.count('Wes');
70+
console.count('Steve');
71+
console.count('Steve');
72+
console.count('Steve');
73+
console.count('Steve');
74+
console.count('Steve');
75+
76+
// timing
77+
console.time('fetching data');
78+
fetch('https://api.github.com/users/wesbos')
79+
.then(data => data.json())
80+
.then(data => {
81+
console.timeEnd('fetching data');
82+
console.log(data);
83+
});
84+
85+
console.table(dogs);
86+
</pre>
87+
<script type="text/javascript" src="main.js"></script>
88+
</body>
89+
90+
</html>

‎09_day/main.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
const dogs = [
2+
{
3+
name: 'Snickers',
4+
age: 2
5+
}, {
6+
name: 'hugo',
7+
age: 8
8+
}
9+
];
10+
11+
function makeGreen() {
12+
const p = document.querySelector('p');
13+
p.style.color = '#BADA55';
14+
p.style.fontSize = '50px';
15+
}
16+
17+
console.log('hello');
18+
19+
console.log('Hello I am a %s string!', '💩');
20+
21+
console.warn('OH NOOO');
22+
23+
console.error('Shit!');
24+
25+
console.info('Crocodiles eat 3-4 people per year');
26+
27+
const p = document.querySelector('p');
28+
29+
console.assert(p.classList.contains('ouch'), 'That is wrong!');
30+
31+
console.log(p);
32+
console.dir(p);
33+
34+
dogs.forEach(dog => {
35+
console.groupCollapsed(`${dog.name}`);
36+
console.log(`This is ${dog.name}`);
37+
console.log(`${dog.name} is ${dog.age} years old`);
38+
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
39+
console.groupEnd(`${dog.name}`);
40+
});
41+
42+
console.count('Wes');
43+
console.count('Wes');
44+
console.count('Steve');
45+
console.count('Steve');
46+
console.count('Wes');
47+
console.count('Steve');
48+
console.count('Wes');
49+
console.count('Steve');
50+
console.count('Steve');
51+
console.count('Steve');
52+
console.count('Steve');
53+
console.count('Steve');
54+
55+
console.time('fetching data');
56+
fetch('https://api.github.com/users/wesbos').then(data => data.json()).then(data => {
57+
console.timeEnd('fetching data');
58+
console.log(data);
59+
});
60+
61+
console.table(dogs);

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,6 @@ Learned about new array methods like some, every, find, findIndex.
4747
### Day 8: 25 Jun 2018
4848
Had so much fun learning today. Canvas and draw.
4949
![Canvas](https://pbs.twimg.com/media/C1QFNMYUsAA9cxC.jpg)
50+
51+
### Day 9: 26 Jun 2018
52+
Learned few useful Dev tools tricks. Debugging JavaScript code is so much fun, easy and colorful now.

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
<a class="active" href="./06_day/index.html">06 Day</a>
1818
<a class="active" href="./07_day/index.html">07 Day</a>
1919
<a class="active" href="./08_day/index.html">08 Day</a>
20+
<a class="active" href="./09_day/index.html">09 Day</a>
2021
</div>
2122
</body>
2223

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /