Мини-приложение: логика, данные и проверка

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Трекер привычек</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 480px; margin: 40px auto; padding: 0 16px; }
    .habit { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border: 1px solid #ddd; border-radius: 12px; }
    .habit.done { background: #e8f5e9; border-color: #66bb6a; }
    .habit .name { flex: 1; }
    .habit .count { color: #777; font-size: 14px; }
    form { display: flex; gap: 8px; margin-top: 16px; }
    form input { flex: 1; padding: 8px; }
  </style>
</head>
<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>

  <script>
    // Сегодняшняя дата в виде 2026-10-20 — по местному времени
    const now = new Date();
    const today = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0');
    document.getElementById('today').textContent = 'Сегодня: ' + now.toLocaleDateString('ru-RU');

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

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

    function render() {
      const list = document.getElementById('list');
      list.innerHTML = '';
      habits.forEach((habit, index) => {
        const row = document.createElement('label');
        row.className = habit.days.includes(today) ? 'habit done' : 'habit';

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.checked = habit.days.includes(today);
        checkbox.addEventListener('change', () => toggle(index));

        const name = document.createElement('span');
        name.className = 'name';
        name.textContent = habit.name;

        const count = document.createElement('span');
        count.className = 'count';
        count.textContent = 'дней: ' + habit.days.length;

        row.append(checkbox, name, count);
        list.append(row);
      });
    }

    function toggle(index) {
      const days = habits[index].days;
      if (days.includes(today)) {
        habits[index].days = days.filter(day => day !== today);
      } else {
        days.push(today);
      }
      save();
      render();
    }

    document.getElementById('add-form').addEventListener('submit', event => {
      event.preventDefault();
      const input = document.getElementById('new-habit');
      const name = input.value.trim();
      if (!name) return;
      habits.push({ name: name, days: [] });
      input.value = '';
      save();
      render();
    });

    render();
  </script>
</body>
</html>