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>
Hello
ReplyDeleteBro Image kaha he. I Need a Image. plz Give Me Image
both images saved in public folder but image not displaying on page.
ReplyDeleteGood project
ReplyDeleteBest 40+ Javascript Projects For Beginners With Source Code
https://javascriptprojectsforbeginners.blogspot.com/2020/04/javascript-projects-for-beginners-with-source-code.html?m=1#point0
Good 👍
ReplyDeletehttps://javascriptprojectsforbeginners.blogspot.com/2020/04/javascript-projects-for-beginners-with-source-code.html?m=1#point0
If you want to host your website but do not want to pay the full price you can opt for web hosting coupon codes. wecouponer.com
ReplyDeleteamazing article https://www.techvaccine101.com/
ReplyDeleteIf you are going to desire routine updates to your web design denver colorado this will certainly additionally be shown in the cost you pay either month-to-month or at the start.
ReplyDeleteFilter Box Project With Great UI
ReplyDeletehttps://www.thecodesignblog.com/building-the-filter-box-using-the-vanilla-javascript-project-with-free-source-code/
it comes pre-mixed, there is no risk involved with mixing. The heating pads last for 10 hours, so you can heat them several times in case of delays. Besides the heating pads, Quick Luck also comes with heat activator powder. When you are under a time constraint, this powder will heat up the synthetic urine in seconds and you will be more than ready to take the test hassle-freely. Cost And Customer Support: At $100, some may find the price to be high. It isn’t the most appealing thing, but you can heat up your fake urine using a microwave Visit: https://www.urineworld.com/
ReplyDeleteThanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. source: https://reptileprofy.com/zoo-med-511-review/
ReplyDelete