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>
|