💡 Bulb Toggle Project Using HTML, CSS & JavaScript

July 4, 2025

This content originally appeared on DEV Community and was authored by Olayemi Habeeb

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

This content originally appeared on DEV Community and was authored by Olayemi Habeeb