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!


Trending Posts

5 Awesome Computer Shortcut Key Tricks You Must Try

Image
  A computer is a cool machine. You can do lots of stuff on it. You can even become cooler after knowing these 5 Short Cut Key tricks given below. Minimize All Open Windows/Program At Once If you are in hurry and want to minimize all the open programs on your computer at once. Then, you should press the Win+D key from your keyboard. After this, all the open programs will minimize. You can maximize all the programs again by pressing the same key combination Win+D . Open Windows Settings Quickly There is also one shortcut key to open Windows OS Settings. If you press the Win+I key from your keyboard the Settings will open. Shut Down Your Computer Quickly Many people usually shut down their computer using a mouse. But, there is also a shortcut key to shut down the computer real quick. If you press the Alt+F4+Enter key your computer will shut down. Lock Your Computer If you press the Win+L key from your keyboard your computer will be locked. This shortcut key is one of the useful shortc
Read More

What Are The Use of Function Keys F1 to F12 on The Keyboard?

Image
On your Computer Keyboard or Laptop keyboard, you always see F1 to F12 Function Keys, right. But, have you ever wondered what are these keys(F1 to F12) and their uses are? What are Function Keys? Function Keys are the keys that are on the top of the keyboard from F1 to F12 for performing different functions that make the use of the computer ease. Like for example, Function Key can be used to Refresh/Reload webpage or computer, saving the file, closing the window, etc. To Use Function Key On Laptop, you should press function keys with the 'fn' key which is on the bottom of your keyboard. What are the Uses of F1 To F12 Function Key? F1 Key: The F1 key is used to open the Help Center of the Application. For example, if you press the F1 key while using Chrome Browser, Google Chrome Help Center will open. F2 Key: The F2 key is used to Rename the file or folder on the computer quickly. Usually, to rename a file/folder, you right-click on it and click on rename to change its name, rig
Read More

What is ChatGPT? What are the Capabilities, Application and Impact of ChatGPT?

Image
In recent years, advancements in artificial intelligence have transformed the way we interact with technology. One of the most remarkable developments in this field is ChatGPT, a powerful language model created by OpenAI. ChatGPT, based on the GPT-3.5 architecture, is designed to engage in meaningful conversations, understand human queries, and provide informative and contextually appropriate responses. In this blog, we will delve into the fascinating world of ChatGPT, understanding its capabilities, potential applications, and the impact it has on our daily lives. Understanding ChatGPT: ChatGPT is an AI-based language model trained to generate human-like text responses based on the given input. It builds upon the foundation of Generative Pre-trained Transformers (GPT) and is equipped with a vast amount of knowledge and linguistic patterns gathered from diverse sources on the internet. This knowledge enables ChatGPT to generate coherent and contextually relevant responses, making it an
Read More

How To Create a Fake Facebook Login Clone Using Only HTML and CSS?

Image
First of all these HTML elements into your HTML document. Copy the code From Our Github   <div><h1>Facebook</h1>         <p>Connect with friends and the world<br> around you on Facebook.</p>     </div>     <div class="form">         <form action="">        <div>         <input type="text" name="Username" id="Username" placeholder="Email or Phone Number">        </div>        <div>         <input type="password" name="Password" id="Password" placeholder="Password">        </div>        <div>         <input type="submit" value="Log In" class="submit">        </div>         </form>     </div>   Then add this CSS code to your CSS file.  *{    box-sizing: border-box;    margin: 0;    padding: 0;    font-family: SFProDisplay-Regular, Helvet
Read More

5 Pro Ways To Search On Google

Image
  Nowadays almost everyone uses Google for searching for something. But, most people usually search by just typing the text on the search bar. Sometimes they get the answer to the question but sometimes they get confused with the search results, right. Below I have mentioned 5 pros way or tips to search on Google that will help you to find out the result or answer you want by Google. Use "...." If you want your search result that includes a specific word or sentence. Then you should type that word between "....". For eg: If you want the result which has a word called COMPUTER, type "computer" between the inverted comma. Use * for a missing word This tip will help find music or popular quotes. If you heard a song and you remember some line of the song and forget some between words then use Asterisk "*" instead of that word. For Eg: Let * * you, Everybody is * but if you * * fish, etc.   Use site:websiteURL If you want your search result from a spe
Read More

Best Tips On Learning to Code Faster for Self-Taught Programmers

Image
Learning to code is one of the most empowering skills you can acquire in today’s world. As a self-taught programmer myself, I understand the unique challenges, frustrations, and moments of triumph that come with it. The journey is not always smooth—there were times when I almost gave up, faced roadblocks, and felt lost. But over time, with persistence and smarter strategies, I managed to speed up the process. And now, I want to share the lessons I’ve learned to help you learn to code faster and more effectively. In this post, I’ll break down the strategies that worked for me, focusing on practical tips you can apply as a self-taught programmer. Let’s dive right in! 1. Start with a Strong Foundation The most common mistake I made at the beginning was rushing into complex frameworks and technologies without understanding the fundamentals. Sure, it’s tempting to jump into learning React or Node.js because everyone seems to be talking about them, but without a solid foundation in t
Read More

12MP vs 48MP vs 64MP vs 108MP | Does More Megapixel Equal Better Image Quality?

Image
Right now, In a smartphone, you will get a 48MP Camera, 64MP Camera, 108MP Camera, and so on. But, Does this number of megapixels improve the image quality? What is a Megapixel? Megapixel means a million pixels in an image. Pixel is the small dot or square on the image. By combining millions of pixels, one image is formed. 1 Megapixel = 1 Million Pixel, 2 Megapixel = 2 Million Pixel, 12 Megapixel = 12 Million Pixel, 48 Megapixel = 48 Million Pixel, 64 Megapixel = 64 Million Pixel, and so on.   Does More Megapixel equal better image quality? No. A Megapixel is just a million pixels in an image. Many other factors also matter while capturing an image like Image Sensor, Aperture, Megapixel, Lens, and Software.    If you have a 108 Megapixel Camera with a small image sensor and a 12 Megapixel camera with a big image sensor. Then, The second one will have better quality. It's because, in a big image sensor, the pixel size is bigger. If the pixel size is bigger, it can capture more ligh
Read More

8 Characteristics Of Modern Computer

Image
In today’s digital age, computers have become essential tools in nearly every aspect of life. Whether it’s managing day-to-day tasks, storing massive amounts of data, or solving complex calculations, computers have fundamentally changed the way we operate. Computers exhibit various characteristics that make them indispensable in almost every field. From high-speed processing to their automation abilities, here’s a look at some of the most important traits that define a computer. 1. Speed One of the primary reasons computers are so powerful is their incredible speed. They can process simple and complex calculations in a fraction of a second—far faster than any human. The processing speed of a computer is measured in Hertz (Hz) , which represents the number of cycles per second. This is further classified into: KiloHertz (KHz) – Thousands of cycles per second. MegaHertz (MHz) – Millions of cycles per second. GigaHertz (GHz) – Billions of cycles per second. TeraH
Read More

How Long Does It Take to Learn Programming?

Image
Programming is one of the most sought-after skills in today’s digital world. Whether you're aiming to build apps, design websites, or dive into data science, programming opens countless doors. But the big question that every aspiring programmer asks is: How long does it take to learn programming? The answer isn't as straightforward as you might think. It depends on several factors—your dedication, the language you're learning, your prior experience, and what you aim to achieve. But don’t worry, we’ll break everything down for you, so by the end of this blog, you'll have a clear picture of how long it might take for you to learn programming. Factors That Influence How Long It Takes to Learn Programming 1. The Language You Choose The programming language you start with can have a huge impact on your learning curve. Some languages are designed to be beginner-friendly, while others require a deeper understanding of programming concepts. Here's a quick look:
Read More