💡 Bulb Toggle Project Using HTML, CSS & JavaScript

Posted on by — No Comments ↓

💡 Bulb Toggle Project Using HTML, CSS & JavaScript

Hey devs 👋🏽

I recently built a simple Bulb Toggle Project as part of my learning journey.

Even though I’m focused on backend development, I challenged myself to create a small frontend-based project using HTML, CSS, and JavaScript — and it turned out to be both fun and educational.

⚙️ What the Project Does

The idea is simple:

A lightbulb turns on and off when you click a button.

This helped me understand:

  • DOM manipulation in JavaScript
  • Basic CSS styling
  • How HTML structure connects with logic

🛠️ Tools & Languages Used

  • HTML (structure)
  • CSS (styling the bulb and page)
  • JavaScript (to handle the toggle logic)

💻 How It Works

  • There’s a bulb image (off state by default).
  • A button controls the bulb.
  • When clicked, JavaScript changes the image to the “on” or “off” version.

Here’s a quick view of the logic in JavaScript:


js
let bulb = document.getElementById("bulb");
let btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  if (bulb.src.includes("bulb-off")) {
    bulb.src = "bulb-on.png";
    btn.innerText = "Turn Off";
  } else {
    bulb.src = "bulb-off.png";
    btn.innerText = "Turn On";
  }
});

Simple, right? But it taught me a lot about DOM events and conditions.


🎯 What I Learned

As a backend newbie, this project helped me:
    • Get comfortable manipulating the DOM
    • Build logic without frameworks
    • Appreciate how frontend and backend work together


## Video

https://www.instagram.com/p/DLTG_s_s54v/?igsh=dnlpbnEydTI1aHk1



👨🏽‍💻 About Me

I’m a backend development learner from Nigeria 🇳🇬
Learning one bug and project at a time 😅
Currently working with Node.js, Express, and MongoDB.
Let’s connect!


✅ Want to Build It Too?

This project is perfect for beginners. You only need:
    • A text editor (like VS Code)
    • A browser to test it
    • Some patience and curiosity 😉



Thanks for reading!

Feel free to share feedback or ask me how I did certain parts.
You can also follow my journey here on DEV or connect via Hashnode: anizoomy.hashnode.dev

Happy coding! 💡

Leave a Reply