Bulb on/off project using html, css and javascript with source code

Bulb on or off project using html, css and js

In this Article, we will learn how to create Bulb on/off project using html, css and javascript with source code. Creating Bulb on/off project using html, css and javascript becomes simple with the given tutorial, which provides a simple step-by-step process to design Bulb on/off project using html, css and js. So, let's go and follow the given steps carefully.

Steps to create Bulb on/off project using html, css and js

Here are the Steps to create Bulb on/off project using html, css and javascript as given below :-

1) Creating File on VS CODE :

Open VS Code, Create a new folder to add html, css and js file.

2) Adding HTML :

Add the .html file in the project folder and give it the name as - index.html.

3) Copy and Paste HTML code :

copy the following code and paste it in index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bulb on-off</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <img src="https://i.postimg.cc/KjK1wL3c/bulb-off.png" id="bulb" width="200">
        <div class="btn_container">
            <button id="on" class="bulb_btn" onclick="bulb_on()">on</button>
            <button id="off" class="bulb_btn" onclick="bulb_off()">off</button>
        </div>
    </section>
    <script src="script.js"></script>
</body>
</html>

4) Adding CSS :

Add the .css file in the project folder and give it the name as - style.css.

5) Copy and Paste CSS code :

copy the following code and paste it in style.css file.

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: cursive;
}
header{
    height: 100px;
    width: 100%;
    background: #34dab4;
    color: #3f3f3f;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
section{
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.btn_container{
    margin-top: 50px;
}
.bulb_btn{
    font-family: sans-serif;
    width: 150px;
    height: 50px;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 30px;
    border-radius: 100px;
}
#on{
    background-color: rgb(0, 255, 0);
}
#off{
    background-color: rgb(255, 8, 0);
}

6) Adding Javascript :

Add the .js file in the project folder and give it the name as - script.js.

7) Copy and Paste JS code :

copy the following code and paste it in script.js file.

function bulb_on(){
    document.getElementById('bulb').src='https://i.postimg.cc/6QyTynzr/bulb-on.png';
}
function bulb_off(){
    document.getElementById('bulb').src='https://i.postimg.cc/KjK1wL3c/bulb-off.png';
}

About the project -

In this code, we used html to create a Bulb on/off project with its structure. we've added a bulb image and buttons to on or off the bulb in html, given a position and designed buttons with css, added a functions in javascript to do action after clicking on or off button.