Hello friends, today in this blog tutorial we learn how to Make a simple project on / off bulb using JavaScript HTML and CSS. In previous blog tutorial we learn How to Create a Simple Colour Flipper using JavaScript HTML and CSS.
So here is the code and my work. I hope you are love this simple JavaScript On Off Switch Bulb using vanilla JavaScript and share with your friends too. So let's start learning a bulb on off JavaScript using button using JavaScript from scratch, So let's start...
In this tutorial you will learn to create a simple bulb on and off program in JavaScript coding, subscribe E-CODEC channel to watch more like videos on website designing tutorials for beginners.
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel. Thank you..
Video Tutorial
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
Create a new file index.html, Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bulb On/Off Project using JS</title>
</head>
<body>
<div class="container">
<div class="imgBx">
<img src="off_bulb.gif" id="switch">
</div>
<div class="btn_container">
<button id="btn_on">ON</button>
<button id="btn_off">OFF</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
STEP 3: Create a style.css file with CSS extension
Create a new file style.css, Here is the code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'verdana', sans-serif;
}
body{
display: flex;
width: 100%;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
}
.btn_container{
display: flex;
justify-content: center;
align-items: center;
}
.btn_container button{
margin: 10px 20px;
outline: none;
background-color: transparent;
padding: 10px 30px;
cursor: pointer;
}
STEP 4: Create a main.js file with js extension
Create a new filemain.js, Here is the code
//JavaScript File
let on = document.getElementById('btn_on');
on.addEventListener("click", function(){
let imgChange = document.getElementById('switch');
imgChange.src = "on_bulb.gif";
})
let off = document.getElementById('btn_off');
off.addEventListener("click", function(){
let imgChange = document.getElementById('switch');
imgChange.src = "off_bulb.gif";
})
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel on YouTube. Thank you..
You can also learn:- How to Create a Simple Color Flipper using JavaScript HTML and CSS
0 Comments