forked from technolyceum/g11-m2
87 lines
3.8 KiB
Plaintext
87 lines
3.8 KiB
Plaintext
console.log('%cWOW!', 'font-size: 24px; color: purple; text-shadow: 2px 2px #000;');
|
||
document.body.style.transform = 'rotate(5deg)'; setTimeout(() => { document.body.style.transform = 'rotate(-5deg)'; }, 100); setTimeout(() => { document.body.style.transform = 'rotate(0deg)'; }, 200);
|
||
console.log(`There are ${document.querySelectorAll('a').length} links on this page!`);
|
||
document.body.style.backgroundColor = '#ffcccc';
|
||
console.log(123 * 456);
|
||
console.log('%cWow!', 'color:red; font-size:2 Newton0px; background:linear-gradient(90deg,red,orange,yellow,green,blue,indigo,violet)');
|
||
let i = 0; setInterval(() => { console.log(i % 2 ? '%cBlink!', 'color:red' : '%cBlink!', 'color:blue'); i++; }, 500);
|
||
console.clear(); console.log('✨ Console cleaned like magic!');
|
||
throw new Error('Oops! Just kidding :)');
|
||
console.log(navigator.userAgent);
|
||
console.log(`Screen: ${window.screen.width}x${window.screen.height}`);
|
||
console.table(performance.memory);
|
||
const factorial = n => n <= 1 ? 1 : n * factorial(n - 1); console.log(factorial(5));
|
||
console.log('#' + Math.floor(Math.random()*16777215).toString(16));
|
||
document.body.style.backgroundColor = 'lightblue';
|
||
console.log(`Images on page: ${document.images.length}`);
|
||
document.querySelectorAll('a').forEach(link => { link.style.border = '1px solid red'; });
|
||
const secret = Math.floor(Math.random() * 100) + 1; console.log('Guess a number between 1-100!'); let guess; while (guess !== secret) { guess = parseInt(prompt('Your guess?')); if (guess < secret) console.log('Too low!'); else if (guess > secret) console.log('Too high!'); } console.log('🎉 You won!');
|
||
console.time('test'); for (let i = 0; i < 1000000; i++) {} console.timeEnd('test');
|
||
console.log('Try typing "let me google that for you" here!');
|
||
console.table([ { name: 'Alice', score: 95 }, { name: 'Bob', score: 87 }, { name: 'Charlie', score: 92 } ]);
|
||
|
||
Here are one-line console commands to type in browser inspect element:
|
||
|
||
## CHANGE TEXT
|
||
```javascript
|
||
document.querySelector('h1').textContent = 'DOM MASTERY!'
|
||
document.querySelector('.lead').textContent = 'Learning Console Magic!'
|
||
document.querySelector('.navbar-brand').textContent = 'Console Nav'
|
||
```
|
||
|
||
## CHANGE STYLES
|
||
```javascript
|
||
document.body.style.backgroundColor = 'lightblue'
|
||
document.querySelector('.jumbotron').style.backgroundColor = 'yellow'
|
||
document.querySelector('h1').style.color = 'red'
|
||
```
|
||
|
||
## CREATE ELEMENTS
|
||
```javascript
|
||
document.querySelector('.nav').innerHTML += '<li><a href="#">New Item</a></li>'
|
||
document.querySelector('.content').innerHTML += '<p>Added via console!</p>'
|
||
```
|
||
|
||
## REMOVE ELEMENTS
|
||
```javascript
|
||
document.querySelector('.jumbotron').remove()
|
||
document.querySelector('.nav li:last-child').remove()
|
||
```
|
||
|
||
## CLASS MANIPULATION
|
||
```javascript
|
||
document.querySelector('.jumbotron').classList.add('highlight')
|
||
document.querySelector('.jumbotron').classList.remove('jumbotron')
|
||
```
|
||
|
||
## FUN EFFECTS
|
||
```javascript
|
||
document.body.style.transform = 'rotate(5deg)'
|
||
setInterval(() => document.body.style.backgroundColor = `hsl(${Math.random()*360}, 100%, 50%)`, 500)
|
||
```
|
||
|
||
## MODIFY ALL ITEMS
|
||
```javascript
|
||
document.querySelectorAll('.nav li').forEach(li => li.style.color = 'red')
|
||
```
|
||
|
||
## ADD CLICK EVENTS
|
||
```javascript
|
||
document.querySelector('h1').addEventListener('click', () => alert('Clicked!'))
|
||
```
|
||
|
||
## CHANGE ATTRIBUTES
|
||
```javascript
|
||
document.querySelector('.navbar-brand').setAttribute('href', '#new-link')
|
||
```
|
||
|
||
Just copy and paste any of these directly into the browser console!
|
||
|
||
### Notes:
|
||
- All commands are valid JavaScript intended for the browser’s DevTools Console.
|
||
- Some commands (like `prompt` or `performance.memory`) may behave differently depending on the browser or page context.
|
||
- Experiment:
|
||
- Try each command one by one.
|
||
- Observe the output and side effects (e.g., visual changes).
|
||
- Read the code to understand how it works.
|
||
- Experiment with modifying values (e.g., change colors, numbers, selectors). |