Advanced DOM Manipulation | Lecture 35

Let’s begin with Lecture 35 of the HTML5 & CSS3 series. Advanced DOM Manipulation – Classes, Themes & Keyboard Events. This lecture is for absolute beginners; even kids can follow along and understand.

🎯 Objective:

By the end of this lecture, you will:

• Know how to add, remove, and toggle classes using JavaScript
• Be able to build a dark mode toggle using class switching
• Learn how to animate elements by modifying styles dynamically
• Understand how to respond to keyboard events
• Make your website more interactive and dynamic using advanced DOM techniques!

🔧 What You’ll Learn Today

🎨 Using classList to Control Styles

The classList property lets you easily work with classes — perfect for toggling themes or effects.

Methods:

Example:

let box = document.getElementById("myBox");
box.classList.add("highlight"); // Add highlight style
box.classList.remove("highlight"); // Remove highlight
box.classList.toggle("highlight"); // Toggle it on/off

🌙 Build a Dark Mode Toggle with Class Switching

Let’s improve our dark mode feature from earlier by using classList.

Step 1: Update Your CSS

Add a .dark-mode class:

.dark-mode {
    background-color: #1e1e1e;
    color: white;
}

Also update nested elements if needed:

.dark-mode .card, .dark-mode header, .dark-mode footer {
    background-color: #2d2d2d;
}

Step 2: Add a Button

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

Step 3: Add JavaScript Function

<script>
    function toggleDarkMode() {
        document.body.classList.toggle("dark-mode");
    }
</script>

🎉 Now users can switch between light and dark theme with one click!

🖱️ Respond to Keyboard Events

You can make your site respond to keyboard keys — like pressing Enter to submit a form or Spacebar to play music.

Common Key Events:

• keydown – when a key is pressed down
• keyup – when a key is released

Example: Show Key Pressed

<p>Press any key to see its name!</p>
<p id="keyOutput"></p>

<script>
    document.addEventListener("keydown", function(event) {
        document.getElementById("keyOutput").textContent = "You pressed: " + event.key;
    });
</script>

Now as you press keys, their names appear instantly!

💡 Bonus: Create a Flashlight Effect with Mouse Movement

Let’s create a fun effect where only the area under the mouse is visible.

Step 1: Add HTML

<h2>Flashlight Mode</h2>
<div id="flashlight" style="position: fixed; width: 200px; height: 200px; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; background: white;"></div>

Step 2: Add JavaScript

<script>
    let flashlight = document.getElementById("flashlight");

    document.addEventListener("mousemove", function(e) {
        flashlight.style.left = e.pageX - 100 + "px";
        flashlight.style.top = e.pageY - 100 + "px";
    });
</script>

And add this CSS:

body {
    transition: background-color 0.3s ease;
}

.dark-mode {
    background-color: black;
}

Now move your mouse around — it’s like a real flashlight! 🔦

🧪 Try It Yourself!

1. Add a counter badge that shows how many items are in your list.
2. Use classList.contains() to check if dark mode is active before changing text colors.
3. Animate an element across the screen using setInterval() and style.left
4. Make the flashlight follow the mouse smoothly with transition and transform

✅ Summary of What You Learned Today

🚀 Next Lecture Preview:

In Lecture 36 , we’ll explore JavaScript objects and forms — so you can store complex data like user profiles, manage form submissions, and build interactive apps like login systems and contact forms!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series