Easy Light Bulb Project: HTML, CSS, and JavaScript
In this tutorial, we will learn how to create a light bulb using HTML, CSS, and JavaScript. We will go step by step, explaining the code and its functionality. By the end of this tutorial, you will have a working light bulb that can be toggled on and off with a button.
HTML Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="light"></div>
<div class="cap"></div>
</div>
<button id="power">OFF</button>
<script src="script.js"></script>
</body>
</html>
CSS Styling
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: rgb(20,14,20);
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.light{
width: 100px;
height: 100px;
background-color: rgb(20,14,20);
border: 1px solid purple;
border-radius: 50%;
transition: box-shadow 0.5s, background-color 0.5s;
}
.light-on{
background-color: rgb(255,149,228);
box-shadow: 0 0 20px #fff,0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 7px #ff4da6, 0 0 80px #ff4da6;
}
.cap{
width: 40px;
height: 30px;
background-color: black;
position: relative;
bottom:5px;
left: 30px;
}
#power{
position: absolute;
bottom: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
border: none;
color: white;
font-weight: bold;
}
JavaScript Functionality
let light = document.querySelector('.light');
let button = document.querySelector('#power');
document.querySelector('#power').addEventListener('click', power);
function power() {
if (light.classList.contains('light-on')) {
light.classList.remove('light-on');
button.style.backgroundColor = "red";
button.innerHTML = "OFF";
} else {
light.classList.add('light-on');
button.style.backgroundColor = "green";
button.innerHTML = "ON";
}
}
Explanation
- We start by creating the HTML structure for our light bulb. Inside the body tag, we have a container div that holds two other div elements: light and cap.
- We also have a button with the id "power" that initially displays "OFF."
- The CSS styles define the appearance of the elements. The light bulb (represented by the light class) has a default background color of dark purple and a border. When the light bulb is on, it changes its background color to a light pink shade and adds a box-shadow effect to create a glowing effect.
- The JavaScript code selects the light and button elements using querySelector and assigns them to variables.
- An event listener is added to the button element to listen for a click event. When the button is clicked, the power function is called.
- Inside the power function, we check if the light element has the class "light-on." If it does, we remove the class, change the button's background color to red, and update its text to "OFF." This simulates turning off the light bulb.
- If the light element does not have the class "light-on," we add the class, change the button's background color to green, and update its text to "ON." This simulates turning on the light bulb.
You can access the source code for this project on GitHub.
That's it! You have successfully created a light bulb using HTML, CSS, and JavaScript. You can further enhance this project by adding more functionality or customizing the styles to fit your preferences. Have fun experimenting and expanding on this basic concept!
.png)
