Bulb On Off Project using HTML, CSS & JavaScript | Beginner JavaScript Project
Bulb On Off Project using HTML, CSS & JavaScript | Beginner JavaScript Project
Bulb On Off Project using HTML, CSS & JavaScript
This Blog You Will Learn
ஃFeatures
ஃWhat You Learn Bulb On Off
ஃHow It Works
ஃArchitecture Overall Diagram
ஃ(HTML code ) Structure
ஃ (CSS code ) Structure
ஃ( JavaScript code ) Structure
ஃProjectComponent Relationship (Simple View)
ஃOUTPUT
ஃ Summary
Features
- Toggle Switch
- On/Off Bulb Switch
- Background Changes (light + dark )
- Smooth animations
What You Learn Bulb On Off
- HTML body
- CSS Animations And Transitions
- JavaScript DOM Manipulation
- Event Handling
- UX /UI Basic Design
How It Works
Click On /OFF Button
Create the bulb div tag
CSS class is added
Bulb Appearance Changes instantly
1) Architecture Overall Diagram
Bulb On Off Project using HTML, CSS & JavaScript | Beginner JavaScript Project
Examples
❋ (HTML code ) Structure
2) Architecture HTML Structure Diagram (DOM TREE)
<div class="bulb" id="bulb"></div>
<div class="switch" id="switch"></div>
<div class="label" id="status">Light OFF</div>
ஃ Represents the light bulb UI
id="bulb" → use javaScript to control
ஃ Represents toggle button
id =" switch" → user click it to ON/OFF Light
ஃ Display current state (ON/OFF)
id ="label " → Updated dynamically using javascript
❋ (CSS code ) Structure
CSS Class RelationShip Diagram
❋ CSS Code
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Background */
body {
height: 100vh;
background: #0f172a;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
/* Light ON background */
body.light {
background: #fef9c3;
}
/* Bulb */
.bulb {
width: 120px;
height: 120px;
background: #444;
border-radius: 50%;
position: relative;
transition: 0.4s;
}
/* Bulb base */
.bulb::after {
content: "";
width: 30px;
height: 80px;
background: #888;
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
border-radius: 8px;
}
/* Glow */
.bulb.on {
background: #ffeb3b;
box-shadow: 0 0 50px #ffeb3b,
0 0 100px #ffeb3b,
0 0 150px #ffeb3b;
}
/* Switch */
.switch {
margin-top: 80px;
width: 90px;
height: 35px;
background: #555;
border-radius: 50px;
position: relative;
cursor: pointer;
transition: 0.3s;
}
/* Switch knob */
.switch::before {
content: "";
width: 30px;
height: 25px;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
border-radius: 50%;
transition: 0.3s;
}
/* Switch ON */
.switch.active {
background: #22c55e;
}
.switch.active::before {
left: 54px;
}
/* Label */
.label {
margin-top: 20px;
color: white;
font-size: 18px;
transition: 0.3s;
}
body.light .label {
color: #000;
}
</style>
❋ CSS Code Explain (Design +Animation)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
✅Why USe
Removes default browser spacing
box-sizing: border-box → makes layout easier
❋ Body Styling
body {
height: 100vh;
background: #0f172a;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
✅ Why USe
height :100vh → Full Screen height
display : flex → center everything (bulb+switch)
Dark background → shows glow effect better
❋ Light ON Background
body.light {
background: #fef9c3;
}
✅ Why Use
When class light added → background changes
This simulates room lighting effect
❋ Bulb Design
.bulb {
width: 120px;
height: 120px;
background: #444;
border-radius: 50%;
position: relative;
transition: 0.4s;
}
✅Why USe
Circle using border-radius : 50%
Dark color → OFF state
❋ Bulb Base (Pseudo Element)
.bulb::after {
content: "";
width: 30px;
height: 80px;
background: #888;
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
border-radius: 8px;
}
✅Why USe ::after
Add bulb holder without extra HTML
Keep code Clean
❋ Glow Effect
.bulb.on {
background: #ffeb3b;
box-shadow: 0 0 50px #ffeb3b,
0 0 100px #ffeb3b,
0 0 150px #ffeb3b;
}
Explanation :
class on is added
- Buld become yellow
- multiple box-shadow create realistic glow
❋ Switch Design
.switch {
margin-top: 80px;
width: 90px;
height: 35px;
background: #555;
border-radius: 50px;
position: relative;
cursor: pointer;
transition: 0.3s;
}
✅Why USe
modern toggle switch
❋Switch Active State
.switch::before {
content: "";
width: 30px;
height: 25px;
background: #fff;
position: absolute;
top: 4px;
left: 4px;
border-radius: 50%;
transition: 0.3s;
}
✅Why USe
Moving circle inside switch
❋ Switch Active State
.switch.active {
background: #22c55e;
}
.switch.active::before {
left: 54px;
}
✅Why USe
Changes color → ON
Moves → animation effect
❋ Label Styling
.label {
margin-top: 20px;
color: white;
font-size: 18px;
transition: 0.3s;
}
❋Why USe
Adjust text color based on background
❋ (JavaScript code ) Structure
✅JavaScript Code
<script>
const bulb = document.getElementById("bulb");
const toggle = document.getElementById("switch");
const body = document.body;
const statusText = document.getElementById("status");
function toggleLight() {
bulb.classList.toggle("on");
toggle.classList.toggle("active");
body.classList.toggle("light");
if (bulb.classList.contains("on")) {
statusText.textContent = "Light ON";
} else {
statusText.textContent = "Light OFF";
}
}
toggle.addEventListener("click", toggleLight);
document.addEventListener("keydown", (e) => {
if (e.code === "Space") {
toggleLight();
}
});
</script>
✅JavaScript code Explain (logic)
const bulb = document.getElementById("bulb");
const toggle = document.getElementById("switch");
const body = document.body;
const statusText = document.getElementById("status");
❋Why USe
Connect HTML element with Javascript
✅Main Function
function toggleLight() {
❋Why USe
This function run
- User Click Switch
- User presses space key
✅ Toggle Classes
bulb.classList.toggle("on");
toggle.classList.toggle("active");
body.classList.toggle("light");
❋Why USe
Key Concept classList.toggle()
if class exists → remove
if not → add
ON /OFF use created
✅ Update Test
if (bulb.classList.contains("on")) {
statusText.textContent = "Light ON";
} else {
statusText.textContent = "Light OFF";
}
❋Why USe
Checks bulb state
updates label dynamically
✅Click Event
toggle.addEventListener("click", toggleLight);
User Clicks Switch → run function
✅ Keyboard Event
Allow keyboard control (accessibility feature)
document.addEventListener("keydown", (e) => {
if (e.code === "Space") {
toggleLight();
}
});
Bulb On Off Project using HTML, CSS & JavaScript | Beginner JavaScript ProjectComponent Relationship (Simple View)
Bulb On Off Project using HTML, CSS & JavaScript | Beginner JavaScript Project
OUTPUT 
Summary
Using HTML, CSS, and JavaScript, this Light Bulb Project is an easy to understand interactive online application. It illustrates how functionality, design, and structure combine to produce a dynamic user experience. The three primary components of the HTML's fundamental structure are the status label, the switch, and the bulb. These elements are styled via CSS, which also creates the bulb shape, switch design, and visual effects like the glowing light using box-shadow. Additionally, it describes many states, such as ON (bright backdrop with glowing bulb) and OFF (dark background and grey bulb).
The project's brain is JavaScript. By identifying switch click events and keyboard input (spacebar), it manages user interaction.The toggleLight() function dynamically adds or removes CSS classes like "on," "active," and "light" when it is executed. This quickly modifies the background, switch, and lightbulb's appearance. Additionally, the status text is updated to indicate whether the light is turned on or off.
All things considered, this project is an class toggling, event handling, and DOM manipulation. It aids beginners in comprehending the effective construction of real-world interactive user interface elements like switches and dark/light modes.
Post a Comment