- 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"></div>
</div>
<div class="toggle-controls">
<button class="walden" type="button">walden</button>
<button class="toaster" type="button">toaster</button>
<button class="kelvin" type="button">kelvin</button>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
.photo {
background-image: url("img/spb-3.jpg");
}
.walden {
filter: contrast(0.9) brightness(1.2) hue-rotate(-20deg) saturate(1.7) sepia(0.4);
}
.toaster {
filter: contrast(0.67) saturate(2.5) hue-rotate(-30deg) sepia(0.4);
}
.kelvin {
filter: contrast(1.1) brightness(1.3) saturate(2.4) sepia(0.4);
}
JavaScript
var filterName = 'filterName';
var control = document.querySelector('selector');
if (control) {
control.classList.add('active');
}
var photo = document.querySelector('.photo');
if (photo) {
photo.classList.add('class');
}
Вы перешли на другую страницу
Консоль
ЗадачиВыполнено
0
- Измените значение переменной
filterName
наkelvin
. - Замените значение
'selector'
в методе поиска активного переключателя на'button.' + filterName
. - Затем замените значение
'class'
в методе добавления класса для большого фото на переменнуюfilterName
.
После этого можете поиграть с переключением фильтров, меняя значение переменной filterName
.