added dom

FromJavaScriptTojQuery-master/console-exercises.txt

@@ -0,0 +1,87 @@
+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).