زر الاضائة - YarTechnology

رجوع

معاينة الكود المباشر

قسم الاكواد

HTML +

Tailwind CSS

HTML Code

<div class="boss">
  <div class="btn-end"></div>
  <button>ON</button>
  <div id="bulb"></div>
</div>

CSS Code

.boss {
    margin-top: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; 
}

#bulb {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: grey;
    border: 2px solid rgb(61, 61, 61);
    position: absolute;
}

button {
    position: absolute;
    padding: 20px 12px;
    margin-top: 124px; 
    background-color: silver;
    font-size: large;
    border: 2px solid gray;
    cursor: pointer;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.btn-end {
    margin-top: 189px;
    height: 11px;
    width: 18px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: rgb(63, 63, 61);
}

JS Code

var bulb  = document.querySelector("#bulb");
var switchButton = document.querySelector("button")

var current = 0;

switchButton.addEventListener("click", ()=>{
    if (current == 0){
        switchButton.innerHTML = "OFF",
        switchButton.style.padding = "20px 7.5px"
        bulb.style.backgroundColor = "yellow"
        document.querySelector('body').style.backgroundColor = "rgb(250, 252, 234)";
        current = 1;
    }else{
        switchButton.innerHTML = "ON",
        switchButton.style.padding = "20px 12px"
        bulb.style.backgroundColor = "grey"
        document.querySelector('body').style.backgroundColor = "black";
        current = 0;
    }
})

المشاهدات : 257