Смена цвета блока по клику
Решение https://colorrect.github.io/
Приятное и не очень сложное задание, в котором нужно изменить цвет блока при клике по вложенному в него элементу. Цвет элемента указывает атрибут data-color
Общий вид кода:
var a = document.querySelectorAll('li a');
var container = document.querySelectorAll('.container');
var animateAll = document.querySelector('.animate-all');
for (var i = 0; i < a.length; i++) {
a[i].addEventListener('click', function () {
this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor = this.dataset.color;
});
}
animateAll.addEventListener('click', function () {
var l;
for (l = 0; l < a.length; l++) {
setTimeout(function (l) {
for (var j = 0; j < container.length; j++) {
container[j].style.backgroundColor = a[l].dataset.color;
a[l].style.transform = "scale(1.1)";
};
}, 2000 * l + 1, l);
}
});
Сложным показалось менять цвет элемента каждые две секунды, решение нагуглила здесь http://www.cyberforum.ru/javascript/thread1963560.html