Условие
На доке DockPick уже есть маяк, кнопки, буи и сигналы. В script.js получите их пятью методами DOM и чуть подкрасьте. HTML и CSS не трогайте. Сверьте с вкладкой «Результат».
Что нужно сделать
getElementById("dock")→ текст Сигнал OK.getElementsByTagName("button")→ циклfor, фон#0f766e.getElementsByClassName("buoy")→for...of, размер 40px и фон#c2410c.querySelectorAll(".ping")→forEach, цвет#be185d; затемquerySelector(".ping")→#b91c1c.
Подсказка для новичка
В getElementsByClassName точку не ставят. В querySelector / All точка нужна: ".ping". HTMLCollection без forEach - берите for.
Стартовый код
Пишите только в script.js. «Помощник» подставит решение по шагам.
Вот так должно получиться
На превью после скрипта должно быть так:
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Один элемент
getElementById и querySelector сразу дают один узел - с ним можно работать без индекса.
Коллекции
getElementsByTagName / ByClassName → HTMLCollection (цикл). querySelectorAll → NodeList (есть forEach).
Порядок с .ping
Сначала покрасьте все через forEach, потом перекрасьте первый через querySelector - иначе первый снова станет розовым.
Коротко: id · tag+for · class+for…of · All+forEach · Selector.