JS

Blitz test

by Nikita Ahenbrenner

HTML

<!-- 
Напишите JS-скрипт (без использования jQuery и других фреймворков) который позволит по нажатию на кнопку "Change color" сделать однократное изменение цвета всех квадратов с синего на красный.

Для выполнения задания:
- Напишите код в поле "JavaScript + No-Library (pure JS)"
- если необходимо - внесите изменения в HTML
- Проверьте результат, нажав кнопку "Run", а потом "Change color"
- Cохраните результат - кнопка "save"
- скопируйте ссылку на выполненное задание из адресной строки и приложите её в качестве ответа на задание на сайте hh.ru
-->

<!DOCTYPE html>
<html>
<body>

<h1>Change the color of squares</h1>

<button type="button" style="display: block;">Change color</button>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

</body>
</html>

CSS

.square {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  display: inline-block;
}

JavaScript

document.querySelector('button').addEventListener('click', () => {
	let squares = document.getElementsByClassName('square');
  for (i = 0; i < squares.length; i++) {
    squares[i].style.backgroundColor = "red";
  }
})