Теория
Теория

Кекстаграм: репетируем переключение

Отлично, у нас есть первый фильтр и первый переключатель.

Давайте добавим заготовку для ещё одного переключателя. Класс для второго фильтра будет называться toaster.

Затем «отрепетируем» переключение фильтра без использования JavaScript. Для этого пока будем менять HTML-код вручную. При переключении фильтра происходят два события:

Первое. В переключателе класс active перемещается на текущий фильтр:

Было:
<div class="toggle-controls">
  <button class="filter1 active" type="button"></button>
  <button class="filter2" type="button"></button>
</div>

Стало:
<div class="toggle-controls">
  <button class="filter1" type="button"></button>
  <button class="filter2 active" type="button"></button>
</div>

Второе. У блока с большим фото меняется класс текущего фильтра:

Было:  <div class="photo filter1"></div>
Стало: <div class="photo filter2"></div>

index.html
style.css
script.js

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Кекстаграм: репетируем переключение</title> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="style.css"> </head> <body class="keksta"> <div class="photos"> <div class="photo walden"></div> </div> <div class="toggle-controls"> <button class="walden active" type="button">walden</button> </div> <script src="script.js"></script> </body> </html>

CSS

.photo { background-image: url("img/spb-4.jpg"); } .walden { filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4); }

JavaScript

ЗадачиВыполнено

В блок .toggle-controls добавьте вторую кнопку с текстом toaster и с классом toaster.
Затем удалите класс active у первой кнопки и добавьте его второй.
У большой фотографии замените класс walden на toaster.

Кекстаграм: репетируем переключение

Вход

Регистрация

Восстановление доступа