THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

HTML CSS & JavaScript Mini Project with Source Code 2019

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>