I’m excited to share a small project I just built a Light Bulb ON/OFF Project using JavaScript! This project allows you to control a light bulb with just the click of a button. It was fun to make and a great way to understand the basics of interactivity in web development.
If you’re curious about how I did it, keep reading! I’ll walk you through the code and logic so you can create your own version too.
The Idea
The goal was simple: create a web page with a light bulb image that changes between ON and OFF states when clicking buttons labeled Bulb ON and Bulb OFF. This is a beginner-friendly JavaScript project, perfect for learning how to:
- Manipulate the DOM (Document Object Model).
- Handle button click events.
- Dynamically change image sources.
The HTML Structure
Here’s the simple structure for the project. It includes a title, the light bulb image, and two buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bulb ON/OFF Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>bulb on/off project</h1>
<div class="container">
<div class="bulb" id="bulb"></div>
<div class="buttons">
<button id="onButton">bulb on</button>
<button id="offButton">bulb off</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS
To make the project visually appealing, I added some basic styles.
/* styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background-color: #f4f4f9;
}
h1 {
color: #333;
font-size: 2rem;
margin-bottom: 20px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.bulb {
width: 100px;
height: 150px;
background-color: #222; /* Default OFF bulb color */
border-radius: 50% 50% 0 0;
position: relative;
overflow: hidden;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s, box-shadow 0.3s;
}
.bulb::after {
content: '';
width: 50px;
height: 10px;
background-color: #555;
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}
.bulb::before {
content: '';
width: 20px;
height: 40px;
background-color: #777;
position: absolute;
bottom: -60px;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}
.buttons {
display: flex;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #eee;
}
#onButton {
background-color: #4caf50;
color: white;
}
#offButton {
background-color: #f44336;
color: white;
}
Adding Interactivity with JavaScript
Now, the magic! Using JavaScript, I handled the button click events to change the light bulb image dynamically.
// script.js
// Select the DOM elements
const bulb = document.getElementById("bulb");
const onButton = document.getElementById("onButton");
const offButton = document.getElementById("offButton");
// Add event listeners to the buttons
onButton.addEventListener("click", () => {
bulb.style.backgroundColor = "#ffeb3b"; // Turn bulb ON with yellow light
bulb.style.boxShadow = "0 0 30px #ffeb3b"; // Add glowing effect
});
offButton.addEventListener("click", () => {
bulb.style.backgroundColor = "#222"; // Turn bulb OFF
bulb.style.boxShadow = "0 0 15px rgba(0, 0, 0, 0.3)"; // Remove glowing effect
});
Explanation
- HTML:
- The
<div class="bulb">represents the bulb structure, replacing the image.
- The
- CSS:
- The
.bulbclass creates a round light bulb usingborder-radiusandbox-shadow. - The
::beforeand::afterpseudo-elements add a bulb’s base and stem. - Smooth transitions are added to make the ON/OFF effect more appealing.
- The
- JavaScript:
- The
onButtonchanges the bulb’s background to a yellow color (#ffeb3b) and adds a glowing effect usingbox-shadow. - The
offButtonresets the bulb to a dark state (#222) and removes the glow.
- The
How It Looks
The bulb now has a structured design made entirely with CSS. When you click the Bulb ON button, the bulb lights up and glows. Clicking the Bulb OFF button turns it off.
Final Thoughts
This light bulb ON/OFF project was a great way to practice my JavaScript skills while having fun. It’s beginner-friendly and can be extended further with features like toggling the bulb with a single button or using keyboard shortcuts.
I encourage you to try it out! Modify the design, add animations, or even control multiple bulbs let your creativity shine.