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

Olayemi Habeeb | Sciencx (2025-07-04T01:48:40+00:00) 💡 Bulb Toggle Project Using HTML, CSS & JavaScript. Retrieved from https://www.scien.cx/2025/07/04/%f0%9f%92%a1-bulb-toggle-project-using-html-css-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.