#25 🛑 JavaScript Project 1 : Bulb Project

*****************************Tutorial Start 🔥 ********************************

JavaScript Project 1 : Bulb Project

STYLESHEET SECTION

<style>
    .bulb-control-container {
        margin: 0 auto;
        padding: 10px;
        width: 50%;
        align-items: center;
        justify-content: center;
        border: 1px solid gray
    }
    
    .bulb-control-container img {
        align-items: center;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
        cursor: pointer;
        display: inherit
    }

    .bulb-control-container button {
        background-color: #e3edfe;
        align-items: center;
        justify-content:space-evenly;
        text-align: center;
        border-radius: 10px;
        margin: 5px auto;
        /* display: flex; */
        padding: 10px;
        cursor: pointer;
    }

</style>

HTML SECTION

<div class="bulb-control-container">
<h1>JavaScript Project 1 : Bulb Project</h1>
<img id="bulbControl" onclick="turnOnOffFun()" src="./assets/images/off_bulb.jpg" alt="off_bulb">
<button onclick="turnOnFun()">Turn On</button>
<button onclick="turnOffFun()">Turn Off</button>
<button id="onOffButon" onclick="turnOnOffFun()">On</button>

SCRIPT SECTION

   /* 2 function use hoga turnOn function and turnOff function and aik toggle function for default on and off button*/
  //TurnOn Function()
  const turnOnFun = () => {
  //turnOn bulb with the help of set attribute function
  let turnOnImgObj = document.getElementById("bulbControl");
 let turnOnRes = turnOnImgObj.setAttribute("src", "./assets/images/on_bulb.jpg");
 console.log(turnOnRes);
 }

 //turn off function()
 const turnOffFun = () => {
 //turnOff bulb with the help of set attribute function
 let turnOffImgObj = document.getElementById("bulbControl");
 let turnOffRes = turnOffImgObj.setAttribute("src", "./assets/images/off_bulb.jpg");
 console.log(turnOffRes);
 }

 //turnOnOff function

 const turnOnOffFun = () => {
let turnOnImgObj = document.getElementById("bulbControl");
let attSrcValue = turnOnImgObj.getAttribute("src");
console.log(attSrcValue);
/* current state bta dega aapko ki src ki
value kya hai abhi off hai on hai, getAttribute() function */
/* humko button ka state bhi nikalna padega and then value change karna padega */
let buttonObj = document.getElementById("onOffButon");
let buttonStateFind = buttonObj.innerHTML;
console.log(buttonStateFind);
//if condition apply 
if (attSrcValue == "./assets/images/off_bulb.jpg") {
    //call the turn on function here
    turnOnFun();
    buttonObj.innerHTML = "Off";
    // console.log(turnOnFun);
} else {
    turnOffFun();
    buttonObj.innerHTML = "On";
    // console.log(turnOffFun);
}

}

***************************** Tutorial End 🚀 ********************************