Skip to content

Commit 07fc722

Browse files
iselcqiselcq
committed
feat: add script
1 parent 4367d77 commit 07fc722

3 files changed

Lines changed: 106 additions & 134 deletions

File tree

‎09 - Dev Tools Domination/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# 09 - Dev Tools Domination
2+
3+
In this dev tools exercise we'll explore how to set break points in the browser debugger, and learn about various console methods that allow us to be more specific about the event being logged out (is it a warning, an error, a collection of data, etc.).
4+
5+
--- \*\*\* \_\_\_
6+
7+
This is a JavaScript practice with [JavaScript30] (https://javascript30.com/) by [Wes Bos] (https://github.com/wesbos) without any frameworks, no compilers, no boilerplate, and no libraries.

‎09 - Dev Tools Domination/index-FINISHED.html‎

Lines changed: 0 additions & 90 deletions
This file was deleted.

‎09 - Dev Tools Domination/index-START.html‎

Lines changed: 99 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,102 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Console Tricks!</title>
6-
<link rel="icon" href="https://fav.farm/🔥" />
7-
</head>
8-
<body>
9-
10-
<p onClick="makeGreen()">×BREAK×DOWN×</p>
11-
12-
<script>
13-
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
14-
15-
function makeGreen() {
16-
const p = document.querySelector('p');
17-
p.style.color = '#BADA55';
18-
p.style.fontSize = '50px';
19-
}
20-
21-
// Regular
22-
23-
// Interpolated
24-
25-
// Styled
26-
27-
// warning!
28-
29-
// Error :|
30-
31-
// Info
32-
33-
// Testing
34-
35-
// clearing
36-
37-
// Viewing DOM Elements
38-
39-
// Grouping together
40-
41-
// counting
42-
43-
// timing
44-
45-
</script>
46-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Console Tricks!</title>
6+
<link rel="icon" href="https://fav.farm/🔥" />
7+
</head>
8+
<body>
9+
<p onClick="makeGreen()">×BREAK×DOWN×</p>
10+
11+
<script>
12+
const dogs = [
13+
{ name: "Snickers", age: 2 },
14+
{ name: "hugo", age: 8 },
15+
];
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("I am just a normal console.log");
25+
26+
// Interpolated - Dynamically update the string value logged out using %s
27+
console.log("Hello! I am a %s string!", "🐙");
28+
// Interpolation using ES6 template string
29+
let testInterpolation = "🍏";
30+
console.log(
31+
`Testing ES6 interpolation: ${testInterpolation} <-- This should be an apple!`
32+
);
33+
34+
// Styled - Apply styling to a log event using %c
35+
console.log("%c I am some edited text", "font-size:1.2em; color: pink;");
36+
37+
// warning! - Displays a log event preceded with a caution sign
38+
console.warn("WARNING: Oh no, this is a warning");
39+
40+
// Error - Displays a log event highlighted in red with an 'x'
41+
console.error("This is an error display!");
42+
43+
// Info - Displays a log event preceded by an 'i'
44+
console.info("Display relevant information to this log!");
45+
// Testing - A very basic assert statement which accepts two arguments:
46+
// the expression we want to evaluate the truthiness of, and
47+
// a message to display if the assertion fails.
48+
console.assert(1 === 1, "That is wrong");
49+
50+
const p = document.querySelector("p");
51+
console.assert(p.classList.contains("ouch"), "That is wrong!");
52+
53+
// clearing - Clear all previously outputted console events
54+
//console.clear()
55+
56+
// Viewing DOM Elements
57+
console.log(p); // Standard console log event
58+
console.dir(p); // Logs out an interactive list of properties for a given object
59+
60+
// Grouping together - Log out related information in a collapsible group
61+
dogs.forEach((dog) => {
62+
console.groupCollapsed(`${dog.name}`);
63+
console.log(`${dog.name} is ${dog.age} years old`);
64+
console.log(`${dog.name} is ${dog.age * 7} dog years old`);
65+
console.groupEnd(`${dog.name}`);
66+
});
67+
68+
// Counting - Log out a given statement followed by a colon + the amount of times
69+
// this particular statement has already been logged
70+
console.count("WEEWOO");
71+
console.count("Woo!");
72+
console.count("Woo!");
73+
console.count("Wee?");
74+
console.count("Wee?");
75+
console.count("Woo!");
76+
console.count("Wee?");
77+
console.count("WEEWOO");
78+
console.count("WEEWOO");
79+
console.count("WEEWOO");
80+
console.count("Wee?");
81+
console.count("Wee?");
82+
console.count("Wee?");
83+
console.count("Wee?");
84+
console.count("Wee?");
85+
86+
// Timing -Logs out the time taken to perform a given action
87+
console.time("fetching data");
88+
fetch("https://api.github.com/users/iselcq")
89+
.then((data) => data.json(data))
90+
.then((data) => {
91+
console.timeEnd("fetching data");
92+
console.log(data);
93+
});
94+
95+
// Table - Log out array/object data in a table format
96+
console.table(dogs);
97+
// Provide properties to be displayed in the table as an array of string values
98+
// corresponding with property names
99+
console.table(dogs, ["age"]);
100+
</script>
101+
</body>
47102
</html>

0 commit comments

Comments
 (0)