Домашка.
Оживи свою страницу

Дедлайн: 26 июня, 23:59 МСК

Ожидает проверки

Что сделаешь

Возьмёшь свою страницу index.html из прошлой домашки и добавишь в неё немного JavaScript: кнопку, которая считает.

Результат: на странице есть кнопка — нажимаешь, и число «скилла» растёт. Это твой первый интерактив на JS.

Шаги

1 Открой свой index.html в редакторе

Тот самый файл из прошлой домашки. Правый клик по index.html → «Открыть с помощью» → «Блокнот».

Двойной клик откроет файл в браузере — а нам сейчас нужен редактор, чтобы менять код.

Можно удобнее, чем Блокнот. Задание делается и в Блокноте, но проще поставить VS Code — бесплатный редактор кода. Он подсвечивает код цветом, сразу подчёркивает опечатки и незакрытые теги и подсказывает по ходу набора — ошибку видно ещё до запуска.

Скачать: code.visualstudio.com (установи — и открывай index.html уже в нём).

2 Добавь кнопку и число

Внутри <body> добавь два элемента — место для числа и саму кнопку. У каждого свой id, по нему JS их найдёт:

<p>Мой скилл в вайбкодинге: <span id="skill">0</span></p>
<button id="levelup">Прокачать +1</button>

id — это имя, по которому JS обращается к элементу.

3 Добавь JavaScript

Перед закрывающим </body> вставь тег <script> с кодом. Он находит число и кнопку, заводит счётчик и на каждый клик увеличивает его на 1:

<script>
  let skill = 0;
  const skillText = document.getElementById("skill");
  const button = document.getElementById("levelup");

  button.addEventListener("click", () => {
    skill = skill + 1;
    skillText.textContent = skill;
  });
</script>

Что здесь что:

let skill = 0 — счётчик. let, потому что значение будет расти.
const skillText и const button — находим элементы по id через getElementById.
addEventListener("click", () => { ... }) — «при клике по кнопке выполни это».
skillText.textContent = skill — обновляем число на странице.

4 Сохрани

В Блокноте: «Файл» → «Сохранить» (или Ctrl+S). Файл уже .html — просто перезаписываем.

Если вдруг открылось «Сохранить как» — снова выбери «Тип файла: Все файлы», имя index.html, кодировка UTF-8.

5 Открой в браузере и проверь

Дважды кликни по index.html. Нажми кнопку несколько раз — число должно расти. Растёт на клик — готово.

Не работает? Открой консоль: клавиша F12 → вкладка Console. Если там красная ошибка — сделай скриншот и кинь в чат ИИ.

По желанию (если зашло)

Тут можно потренировать главный навык: мелочь поправить руками, а на большее — попросить нейросеть и проверить, что вышло.

Шаг побольше. Найди в коде skill + 1 и впиши skill + 5 — кнопка станет прибавлять по 5. Это можно прямо руками.
Кнопка «Сбросить». Попроси нейросеть: «добавь вторую кнопку, которая обнуляет счётчик скилла до нуля». Вставь её код, нажми — проверь, что работает.
Реакция на 10. Попроси: «когда счётчик дойдёт до 10, пусть на странице появится надпись Готово!». Проверь — а если не сработало, открой F12, скриншот ошибки и снова к нейросети.

Проверь себя

Открой страницу в браузере и отметь пункты.

На странице есть кнопка и число рядом с ней.

У числа прописан id="skill", у кнопки — id="levelup".

Перед </body> есть тег <script> с кодом.

При клике по кнопке число увеличивается.

В консоли (F12 → Console) нет красных ошибок.

Файл сохранён как .html в UTF-8 и открывается в браузере.

Если что-то пошло не так

Кнопка не реагирует — проверь, что id в HTML (id="levelup", id="skill") совпадают с теми, что в getElementById. Любая опечатка — и JS не найдёт элемент.
В консоли ошибка Cannot read properties of null — JS не нашёл элемент. Либо опечатка в id, либо <script> стоит выше кнопки. Он должен быть перед </body>, после элементов.
Число не меняется — проверь, что внутри обработчика есть строка skillText.textContent = skill;.

Как сдать

Дедлайн: 26 июня, 23:59 МСК.

Отправь обновлённый файл index.html в папку «Домашки» в Telegram.

Куратор проверит и поставит статус «Проверено» — на странице он обновится сам.

Сдать в папку «Домашки» →