Bulb On/Off Effect using JavaScript
In this tutorial, we will be using JavaScript to create a bulb on/off effect in a webpage. The following source code uses two identical bulb images one in on state while the other in off state.
You can use the following images for the bulb :
Full Source Code :
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:#000;
}
.bulb-wrapper{
display: flex;
align-items: center;
justify-content: center;
}
.switch{
right: 10px;
cursor: pointer;
position: absolute;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
.onoff-on {
background-color: #00a65a!important;
border-color: #008d4c;
color: #fff;
padding: 5px 5px;
text-align: left;
border-radius: 5px;
border-right: 70px solid #ddd;
width: 70px;
-webkit-box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
-moz-box-shadow: inset 0 3px 5px rgba(99,0,0,.125);
box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
text-align: center;
cursor: pointer;
}
.onoff-off {
background-color: #f56954!important;
border-color: #f4543c;
color: #fff;
padding: 5px 5px;
text-align: right;
border-radius: 5px;
border-left: 70px solid #ddd;
width: 70px;
text-align: center;
-webkit-box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
-moz-box-shadow: inset 0 3px 5px rgba(99,0,0,.125);
box-shadow: inset 0 3px 5px rgb(99 0 0 / 13%);
}
#on,#off{
width: 38%;
}
</style>
</head>
<body>
<div id="switch" class="switch onoff onoff-off">Off</div>
<div class="bulb-wrapper">
<img id="off" src="off.png">
<img id="on" style="display:none;" src="on.png">
</div>
<script>
var bulb_on = document.getElementById('on');
var bulb_off = document.getElementById('off');
var switch_btn = document.getElementById('switch');
function toggleOnOff(){
if (window.getComputedStyle(bulb_on).display === "none") {
bulb_on.style.display = 'block';
bulb_off.style.display = 'none';
switch_btn.innerHTML = 'On';
}else{
bulb_on.style.display = 'none';
bulb_off.style.display = 'block';
switch_btn.innerHTML = 'Off';
}
toggleSwitch();
}
function toggleSwitch(){
switch_btn.classList.toggle("onoff-on");
switch_btn.classList.toggle("onoff-off");
}
switch_btn.addEventListener('click',function(){
toggleOnOff();
});
</script>
</body>
</html>
Follow this video for complete guidance :
Welcome to YouthsForum.com, a dynamic online space designed for the vibrant and diverse voices of today’s youth. At YouthsForum.com, we believe in the power of the younger generation to shape the future, drive positive change, and create a world that reflects their values and aspirations.
