Понимать свой код: минимум HTML, CSS и JavaScript

Зачем понимать, если пишет нейросеть

Можно ни разу не заглянуть в код — пока всё работает. Но как только нужно что-то найти, поменять мелочь или описать ошибку, понимание устройства файла экономит часы. Учить программирование для этого не нужно: достаточно знать, где что лежит.

Три языка в одном файле

В файле трекера живут три разных языка, и у каждого своя работа:

Если хочется поменять внешний вид — ищите в <style>. Поведение — в <script>. Текст и элементы — в <body>.

Разметка: что есть на странице

<h1>Мои привычки</h1>
<p id="today"></p>
<div id="list"></div>
<form id="add-form">
  <input type="text" id="new-habit" placeholder="Новая привычка" required>
  <button type="submit">Добавить</button>
</form>

Разметка состоит из тегов: <h1> — заголовок, <p> — абзац, <div> — контейнер, <form> — форма с полем <input> и кнопкой <button>.

Обратите внимание на id. Это имя элемента, по которому код его находит. Контейнер id="list" пока пустой: карточки привычек в него нарисует JavaScript.

Стили: как это выглядит

.habit { display: flex; gap: 12px; padding: 12px; border: 1px solid #ddd; border-radius: 12px; }
.habit.done { background: #e8f5e9; border-color: #66bb6a; }

Правило состоит из селектора — к чему применить — и свойств в фигурных скобках. .habit — все элементы с классом habit, то есть карточки. .habit.done — карточки, у которых есть ещё и класс done, то есть отмеченные: у них светло-зелёный фон.

Хотите другой зелёный — поменяйте #e8f5e9 на другой цвет вручную. Для такой мелочи нейросеть не нужна.

Скрипт: как это себя ведёт

Код трекера держится на нескольких частях. Данные — список привычек:

let habits = JSON.parse(localStorage.getItem('habits')) || [
  { name: 'Зарядка', days: [] },
  { name: 'Читать 20 минут', days: [] },
  { name: 'Выпить 2 литра воды', days: [] }
];

У каждой привычки название и список дней, когда она выполнена. Строка читается так: «возьми сохранённые привычки из хранилища браузера, а если их там нет — используй три стандартные».

Сохранение — одна короткая функция:

function save() {
  localStorage.setItem('habits', JSON.stringify(habits));
}

localStorage — хранилище в браузере. save() кладёт туда весь список, а при следующем открытии страницы строчка выше его достанет. Поэтому галочки не пропадают при обновлении.

Остальное устроено так же: функция render() рисует карточки в контейнер list, функция toggle() ставит или снимает отметку за сегодня, а обработчик формы добавляет новую привычку. После любого изменения код вызывает save() и render() — сохранить и перерисовать.

Как найти нужное место

• Поиск по тексту. Нажмите Ctrl + F в Блокноте и ищите видимый текст: «Зарядка», «Добавить». Так вы найдёте и разметку, и данные.
• По id. Нашли в разметке id="list" — ищите 'list' в скрипте: там код, который работает с этим элементом.
• Попросите объяснить. Непонятный кусок вставьте в чат:

Объясни построчно, как новичку, что делает этот фрагмент.
Без терминов, которые не объяснил.

<фрагмент кода>

Ещё полезная просьба при каждом шаге: «Добавь в код короткие комментарии на русском, что делает каждая часть». Комментарии начинаются с // и браузером игнорируются, а вам помогают ориентироваться.