HTML CSS & JavaScript Mini Project with Source Code 2019
Welcome, Light bulb On-OFF #JavaScript Mini Project with Source Code in 2019. LIGHT BULB ON-OFF & TEXT CHANGE ALL IN ONE USING TOGGLE BUTTON using javascript in Hindi.
Source Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
<style>
*{ margin: 0; padding:0; font-family: 'Josefin Sans', sans-serif;}
h1{
text-align: center;
margin-top: 40px;
text-transform: uppercase;
}
.lightapp{
width: 100%;
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
figcaption{
text-align: center;
}
.onoffbtn{
width: 100%;
margin-top: -50px;
display: flex;
justify-content: center;
align-items: center;
}
.switch {
position: relative;
display: inline-block;
width: 100px;
height: 50px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: brown;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 41px;
width: 40px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
</style>
</head>
<body>
<h1 id="bulbdata"> Lights ON OFF </h1>
<br>
<main class="lightapp">
<figure class="lightstyle">
<img src="lightoff.jpg" id="lightid1" >
<figcaption>
<p> Light ON OFF </p>
</figcaption>
</figure>
<figure class="lightstyle">
<img src="lightoff.jpg" id="lightid2">
<figcaption>
<p> Light ON OFF </p>
</figcaption>
</figure>
<figure class="lightstyle">
<img src="lightoff.jpg" id="lightid3">
<figcaption>
<p> Light ON OFF </p>
</figcaption>
</figure>
<figure class="lightstyle">
<img src="lightoff.jpg" id="lightid4">
<figcaption>
<p> Light ON OFF </p>
</figcaption>
</figure>
<figure class="lightstyle">
<img src="lightoff.jpg" id="lightid5">
<figcaption>
<p> Light ON OFF </p>
</figcaption>
</figure>
</main>
<div class="onoffbtn">
<label class="switch">
<input type="checkbox"> <span class="slider"
onclick="tubelight()" > </span>
</label>
</div>
// Please if you want me to make such awesome videos then Subscribe to my channel.
//DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
//Believe me, all this money will be used to make more quality videos and to make my channel grow. So //that I can always provide you awesome free videos :)
<script>
const tubelight = () =>{
let btext = document.getElementById('bulbdata');
for(x=1; x<6; x++){
let bid =document.getElementById('lightid'.concat(x));
console.log(bid.src);
if(bid.src.match('lighton')){
bid.src="lightoff.jpg";
btext.innerHTML = "Light OFF";
btext.style.color = "black";
}else{
bid.src="lighton.jpg";
btext.innerHTML = "Light ON";
btext.style.color = "red";
}
}
}
</script>
</body>
</html>
