Want to create your first JavaScript project?
This simple Bulb ON/OFF switch is perfect for beginners — and super fun to build!
🧠 Why This Project?
If you’ve just started learning JavaScript, this is the perfect first project. It’s simple, visual, and shows real-time interaction — the kind of thing that makes coding feel real.
You’ll build a bulb (using an image), a button, and with just a few lines of JS, you’ll make that bulb toggle on/off with a click.
📺 Watch the Full Tutorial
See how it works, how I built it, and follow along step-by-step:
🎯 What You’ll Learn:
How to manipulate HTML elements with JavaScript
Use onclick or addEventListener to handle events
Change image src dynamically
Build responsive interaction using just vanilla HTML, CSS & JS
✨ What Makes This Fun?
You can literally “turn the lights on”
It gives a real sense of control with very basic code
It’s perfect for portfolios, CodePens, or school projects
And… it’s great content for your YouTube or Instagram Reels 😉
🚀 Project Ideas to Go Further
Add a toggle switch UI instead of a button
Add CSS animation to make the bulb glow
Add sound when the bulb turns on/off
Make the bulb remember its last state using localStorage
🔗 YouTube Tutorial: Bulb On Off Project using HTML, CSS & JavaScript
Source Code Download
💻 Follow me on github
✨ Follow Me on YouTube: @alizehcodes
Join our WhatsApp Channel
💬 Let’s Talk!
Tried this project? Have questions?
Drop them in the comments — or share your version. I’d love to see what you create!
🏷️ Tags:
Top comments (0)