Кнопка переключения ВКЛ/ВЫКЛ — пошаговое руководство

HTML

Для HTML у нас есть кружок, который запускает функцию toggle() при клике, и текст «FF», который изменится на «N» и наоборот.

<div class="container">
    <div class="toggle" onclick="toggle()">
        <div class="circle"></div>
    </div>
    <span class="text">FF</span>
</div>

ЯВАСКРИПТ

Для javascript сначала мы создадим переменную, в которой мы будем хранить состояние переключения. Сейчас мы установим для нее значение false.

let active = false

Теперь мы создадим функцию-переключатель, которая будет запускаться при щелчке по кругу. В начале мы выбираем переключатель и текстовый элемент с помощью метода querySelector. Затем мы изменим активный статус на противоположный его текущему значению, установка восклицательного знака («!») перед ним (!active). Если active было true, теперь оно станет false, и наоборот. Теперь, если active равно true, мы добавим активный класс для переключения элемента и изменим текст «FF» на «N». Если это ложь, мы удалим активный класс из элемента переключения и установите текст на «FF».

function toggle() {
    let toggle = document.querySelector('.toggle')
    let text = document.querySelector('.text')
    active = !active
    if (active) {
        toggle.classList.add('active')
        text.innerHTML = 'N'
    } else {
        toggle.classList.remove('active')
        text.innerHTML = 'FF'
    }
}

CSS

Для CSS мы начнем с установки размера и цвета шрифта для текстового элемента.

.text {
    font-size: 23px;
    color: #494949;
}

Элемент Toggle будет расположен относительно с размером 40x20px (вдвое шире круга, который мы установим позже). Мы установим закругленную рамку на темный dray, как если бы переключатель был выключен. Затем мы отобразим все в центре, используя flexbox. Наконец, я устанавливаю курсор на указатель, потому что этот элемент кликабельный, вызывает кнопку включения/выключения, и я добавляю переход, чтобы переключение было приятным и плавным.

.toggle {
    position: relative;
    width: 40px;
    height: 20px;
    border: 2px solid #494949;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

Круг будет позиционирован абсолютно, а левый установлен на ноль. Это выключенный статус. Мы установим ширину и высоту на 20 пикселей (половина ширины родителя). Теперь добавим немного радиуса границы и установим цвет фона на темно-серый. Этот цвет станет зеленым при нажатии переключателя. Не забывайте о переходе.

.circle {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background-color: #494949;
    transition: .3s;
}

Теперь мы стилизуем активный класс. Этот класс добавляется для переключения элемента при активном статусе. Мы просто установим зеленый цвет границы.

.active {
    border-color: rgb(85, 227, 180);
}

Теперь мы выберем брата с помощью селектора «плюс» («+») и установим его цвет на зеленый. Мы говорим о тексте «N» здесь.

.active + .text {
    color: rgb(85, 227, 180);
}

Наконец, мы стилизуем круг, когда он активен. Мы переместим его в правую часть контейнера, установив для свойства left значение 100% и переместив X на -100%. Мы также изменим цвет фона на зеленый и добавить переход.

.active .circle {
    left: 100%;
    transform: translateX(-100%);
    transition: .3s;
    background-color: rgb(85, 227, 180);
}

Вот и все.

Вы можете найти видеоурок и исходный код здесь.

Спасибо, что прочитали. ❤️