Домашка.
Добавь инвентарь на свою страницу

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

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

Что сделаешь

Возьмёшь свою страницу index.html и добавишь на неё инвентарь: кнопки собирают предметы в список на экране. Нажимаешь — предмет добавляется к собранным.

Под капотом — массив из лонгрида: .push() кладёт предмет, .join(' ') выводит список без запятых. Предметы выбираешь под свой проект — что в нём собирают.

Шаги

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

Тот же файл, что и раньше. Удобнее в VS Code: правый клик по index.html → «Открыть с помощью». Можно и в Блокноте.

2 Добавь место для инвентаря и кнопки

Внутри <body> добавь место, куда попадут собранные предметы, и кнопки. У места — id="slots", каждая кнопка передаёт свой предмет в takeItem:

<p>Собрано: <span id="slots"></span></p>

<button onclick="takeItem('🔑')">🔑</button>
<button onclick="takeItem('📕')">📕</button>

<span id="slots"> — сюда выводятся собранные предметы.
каждая <button> — предмет. В takeItem('...') впиши свой (эмодзи или текст).
нужно больше предметов — добавь ещё <button> по тому же шаблону.

Предмет в onclick — в одинарных кавычках, потому что двойные заняты самим onclick="...".

3 Добавь JavaScript

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

<script>
  let backpack = [];

  function takeItem(item) {
    backpack.push(item);
    document.getElementById('slots').textContent = backpack.join(' ');
  }
</script>

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

let backpack = [] — пустой список (массив), куда складываются предметы.
function takeItem(item) — кнопка передаёт сюда свой предмет, он попадает в item.
backpack.push(item) — кладёт предмет в конец списка.
document.getElementById('slots').textContent = backpack.join(' ') — находит место вывода по имени slots и выводит туда список, склеив предметы через пробел. 'slots' не меняй, даже если предметы у тебя свои: это имя связано с id="slots" выше, а не с эмодзи.

Что меняешь под себя: только предметы в кнопках — takeItem('свой предмет'). Что не трогаешь: id="slots" и getElementById('slots') — это пара, по имени slots код находит, куда писать.

Если на странице уже есть <script> из прошлых домашек — этот добавь отдельным тегом, ниже. Друг другу они не мешают.

4 Сохрани

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

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

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

Дважды кликни по index.html. Нажми кнопки — предметы должны появляться в списке рядом с «Собрано». Появляются на клик — готово.

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

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

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

Счётчик предметов. Попроси нейросеть: «покажи рядом, сколько предметов собрано» (подсказка — у массива есть .length). Проверь, что число растёт с каждым предметом.
Кнопка «Очистить». Попроси: «добавь кнопку, которая очищает инвентарь». Вставь код, нажми — список должен опустеть.
Без повторов. Попроси: «не добавляй предмет, если он уже есть в инвентаре». Проверь на одном и том же предмете.

Проверь себя

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

На странице есть место для инвентаря с id="slots" и кнопки.

Кнопки зовут takeItem('...') со своим предметом.

Перед </body> есть <script> с массивом, .push() и .join().

Клик по кнопке добавляет предмет в список на экране.

Предметы — твои, под проект.

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

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

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

takeItem is not defined — функция takeItem не объявлена или <script> с ней не попал на страницу. Проверь, что тег <script> есть и внутри — function takeItem.
Cannot read properties of null — JS не нашёл место для вывода. Проверь id="slots" и что <script> стоит ниже кнопок, перед </body>.
Предметы не появляются — проверь строку с .join(' ') и textContent, и что имя slots в HTML и в getElementById('slots') совпадает.
В getElementById() стоит эмодзи-предмет вместо 'slots' — там должно быть имя места вывода: getElementById('slots'), а не getElementById('🔑'). Предметы туда не пишут.
Кнопка ничего не добавляет — в onclick="takeItem('...')" впиши предмет в кавычках.

Как сдать

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

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

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

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