78 lines
1.8 KiB
HTML
78 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Console Tricks!</title>
|
||
<link rel="icon" href="https://fav.farm/🔥" />
|
||
</head>
|
||
<body>
|
||
|
||
<p onClick="makeGreen()">×BREAK×DOWN×</p>
|
||
|
||
<script>
|
||
const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }];
|
||
|
||
function makeGreen() {
|
||
const p = document.querySelector('p');
|
||
p.style.color = '#BADA55';
|
||
p.style.fontSize = '50px';
|
||
}
|
||
|
||
// Regular
|
||
console.log('Hello World!');
|
||
|
||
// Interpolated
|
||
console.log('Hello I am a %s string!', ':poop:');
|
||
let str = 'string!';
|
||
console.log(`Hello I am a ${str}`); //ES6
|
||
|
||
// Styled
|
||
console.log('%c I am some great text', 'font-size: 20px; background:red;');
|
||
|
||
// warning!
|
||
console.warn('WARNING!');
|
||
|
||
// Error :|
|
||
console.error('WE MESSED UP!');
|
||
|
||
// Info
|
||
console.info('INFO!');
|
||
|
||
// Testing
|
||
console.assert(1 === 2, 'That is wrong');
|
||
|
||
// clearing
|
||
console.clear();
|
||
|
||
// Viewing DOM Elements
|
||
const p = document.querySelector('p');
|
||
console.log(p);
|
||
console.dir(p);
|
||
|
||
// Grouping together
|
||
dogs.forEach(dog => {
|
||
console.groupCollapsed(`${dog.name}`);
|
||
console.log(`This is ${dog.name}`);
|
||
console.log(`${dog.name} is ${dog.age} years old`);
|
||
console.log(`${dog.name} is ${dog.age * 7} in dog years`);
|
||
console.groupEnd(`${dog.name}`);
|
||
});
|
||
|
||
// counting
|
||
console.count('WorldDrknss');
|
||
console.count('WorldDrknss');
|
||
console.count('WorldDrknss');
|
||
console.count('WorldDrknss');
|
||
|
||
// timing
|
||
console.time('fetching data');
|
||
fetch('https://api.github.com/users/worlddrknss')
|
||
.then(data => data.json())
|
||
.then(data => {
|
||
console.timeEnd('fetching data');
|
||
});
|
||
console.table(dogs);
|
||
|
||
</script>
|
||
</body>
|
||
</html> |