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>

6 comments:

  1. Hello
    Bro Image kaha he. I Need a Image. plz Give Me Image

    ReplyDelete
  2. both images saved in public folder but image not displaying on page.

    ReplyDelete
  3. Good project

    Best 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

    ReplyDelete
  4. 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

    ReplyDelete
  5. amazing article https://www.techvaccine101.com/

    ReplyDelete