Learn how to create a real working bulb switch using just HTML, CSS, and JavaScript — a fun and simple project perfect for beginners!
📖 About This Project
This project allows you to turn a bulb image on and off by clicking a button. It’s a basic use of JavaScript's onclick event to manipulate HTML elements — ideal for absolute beginners who want to get hands-on with real interactivity.
onclick event to manipulate HTML elements — ideal for absolute beginners who want to get hands-on with real interactivity.🔧 Features You'll Learn:
Handling button clicks using onclick
Changing image sources (img.src) with JavaScript
Structuring a responsive layout with HTML & CSS
Making your very first functional web interaction
🎥 Watch the Video Tutorial
💾 Source Code :
🧱 HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light Bulb</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="light">
<div class="wire"></div>
<div class="bulb">
<span></span>
<span></span>
</div>
<div class="switch">
<div class="btn"></div>
</div>
</div>
<!-- Audio for Click Effect -->
<audio src="audio/click.mp3" id="audio" autostart="false"></audio>
<script src="script.js"></script>
</body>
</html>
🎨 CSS Styling:
/* Reset Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
body.on{
background: radial-gradient(#555, #111);
}
/* Bulb Styling */
.bulb{
position: relative;
width: 80px;
height: 80px;
background: #444;
border-radius: 50%;
z-index: 2;
}
body.on .bulb{
background: #fff;
box-shadow: 0 0 50px #fff, 0 0 100px #fff, 0 0 150px #fff,
0 0 200px #fff, 0 0 250px #fff, 0 0 300px #fff,
0 0 350px #fff;
}
.bulb::before{
content: '';
position: absolute;
top: -50px;
left: 22.4px;
width: 35px;
height: 80px;
background: #444;
border-top: 30px solid #000;
border-radius: 10px;
}
body.on .bulb::before{
background: #fff;
}
body.on .bulb::after{
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
border-radius: 50%;
background: #fff;
filter: blur(40px);
}
/* Bulb hightlight effect */
.bulb span:nth-child(1){
position: absolute;
top: -16px;
left: -4px;
height: 30px;
width: 30px;
background: transparent;
transform: rotate(342deg);
border-bottom-right-radius: 40px;
box-shadow: 20px 20px 0 10px #444;
}
body.on .bulb span:nth-child(1){
box-shadow: 20px 20px 0 10px #fff;
}
.bulb span:nth-child(2){
position: absolute;
top: -16px;
left: -4px;
height: 30px;
width: 30px;
background: transparent;
transform: rotate(16.5deg);
border-bottom-left-radius: 40px;
box-shadow: -20px 20px 0 10px #444;
}
body.on .bulb span:nth-child(2){
box-shadow: -20px 20px 0 10px #fff;
}
/* wire styling */
.wire{
position: absolute;
left: calc(50% - 2px);
bottom: 50%;
width: 4px;
height: 60vh;
background: #000;
z-index: 1;
}
/* Switch styling */
.switch{
position: absolute;
width: 80px;
height: 80px;
bottom: 50px;
right: 50px;
border-radius: 10px;
border: 3px solid #000;
background: linear-gradient(#eee, #ccc, #eee);
display: flex;
justify-content: center;
align-items: center;
}
.switch .btn{
position: absolute;
width: 25px;
height: 40px;
background: linear-gradient(#777, #fff, #777);
border-radius: 6px;
border: 2px solid #222;
cursor: pointer;
}
.switch .btn::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
background: linear-gradient(#fff, #fff);
border-radius: 4px;
}
.on .switch .btn::before{
top: 15%;
}
/* Hide Audio */
#audio{
display: none;
}
⚡ JavaScript Code:
let btn = document.querySelector('.btn');
let audio = document.querySelector('#audio');
let body = document.querySelector('body');
btn.onclick = function(){
body.classList.toggle('on');
// playing the audio
audio.currentTime = 0; //reset audio on the start on each click
audio.play();
};
🙌 Final Words
This is the kind of small, fun project that helps build confidence when you're learning JavaScript. Try it yourself and see how easily you can control HTML elements with just a few lines of code.
📺 Subscribe for More
If you liked this project, be sure to subscribe to my YouTube channel for more beginner tutorials and creative UI projects!
Follow me on Github
Join our WhatsApp Channel
🏷️ Tags:
Bulb on off using JavaScript, beginner JavaScript project, JavaScript image toggle, bulb project HTML CSS, how to make bulb switch in JavaScript
.png)
0 Comments