В рабочей папке есть список из трёх задач. Вы разобрались, где хранятся данные и как обновляется страница. Теперь добавим фильтр «Только незавершённые». Пройдём постановку и реализацию; принятие результата будет отдельным шагом.
Задача кажется очевидной, пока не спросишь, что значит «фильтр». Он должен скрывать выполненные задачи или удалять их? Сохранится ли выбор после перезагрузки? Что останется на экране, когда завершено всё? Эти решения принимает человек до того, как оценивает код.
Опишите наблюдаемое поведение
В нашем упражнении фильтр временный. Он влияет на отображение списка, но не удаляет записи и не меняет статус задачи сам по себе. Начальное состояние — все три задачи, фильтр выключен. Перезагрузка возвращает исходный список и выключенный фильтр, как и раньше сбрасывала статусы.
Если пользователь отметил задачу при включённом фильтре, она должна исчезнуть из текущего вида. Когда незавершённых не осталось, покажем текст «Незавершённых задач нет». При выключении фильтра вернутся все задачи с текущими статусами. Это уже достаточно точная постановка, чтобы заметить неверное решение.
Передайте задачу агенту
Добавим в текущий список фильтр «Только незавершённые».
Сначала предложи короткий план по существующим файлам, без правок.
Приёмка:
- исходно видны все три задачи, фильтр выключен;
- при включении видны только задачи с done=false;
- выключение возвращает все задачи с теми же статусами;
- отметка задачи при активном фильтре убирает её из вида;
- если незавершённых нет, виден текст «Незавершённых задач нет»;
- переключение и отметка доступны клавишами Tab и пробел;
- при исчезновении пункта клавиатурный фокус остаётся управляемым;
- перезагрузка по-прежнему сбрасывает состояние.
Используй текущие HTML/CSS/JS, без зависимостей, сервера и хранилища.
Не меняй исходные задачи. Объясни, как проверишь отсутствие потери данных.
Если проверка браузером тебе недоступна, обозначь это явно.Это не универсальный шаблон промпта. Здесь каждая строка привязана к нашему примеру. В своей задаче сохраняйте принцип: видимый результат, ограничения, проверка. Длинный список общих пожеланий вроде «делай качественно» не объясняет, какое поведение нужно.
Проверьте предложенный план
Ожидаемый небольшой план затрагивает index.html и app.js: добавить подписанный checkbox, прочитать его состояние, вычислить видимые задачи перед отрисовкой, перерисовать список при переключении. В исходнике уже есть стили checkbox и блок пустого состояния. Агенту стоит проверить их пригодность, прежде чем добавлять оформление.
Ключевой вопрос: где останется полный набор задач? В выбранном подходе tasks сохраняет все объекты, а локальная переменная visibleTasks определяет, какие из них сейчас показать. Если план содержит «перезаписать tasks отфильтрованным массивом», остановите его здесь: выключать фильтр будет уже не на чем.
Если предлагается новая библиотека, спросите, какое условие приёмки нельзя выполнить существующим кодом. Для этого стенда такой необходимости нет. Ответ «так масштабируемее» не объясняет пользу для текущего изменения.
Разрешите правку с понятной границей
Когда подход понятен, дайте явное продолжение:
Подход подходит. Реализуй фильтр в рабочей копии.
Полный массив tasks сохраняется; фильтрация меняет только видимый список.
После правки перечисли изменённые файлы и фактически выполненные проверки.
Не называй ручные сценарии пройденными, если только предложил их мне.Не нужно подтверждать каждое чтение уже согласованного файла. Но если по ходу появилось новое решение — например, сохранять настройки фильтра, — вернитесь к условиям задачи. Оно может быть полезным для другого продукта, однако в этом упражнении изменит ожидаемый результат.
Перед просмотром эталона дайте своему решению пройти проверки. Варианты кода могут отличаться. Мы принимаем поведение и понятность реализации, а не буквальное совпадение с completed/app.js.
Первый взгляд после изменения
Откройте именно work/index.html. При включении должны остаться «Составить план» и «Проверить результат». Выключите фильтр: «Открыть проект» возвращается и остаётся выполненной. Этот второй щелчок важнее первого впечатления.
Если страница не изменилась, проверьте путь открытого файла и сохранение редактора. Если список пропал, посмотрите ошибку в консоли браузера и передайте её агенту вместе с действием, после которого она появилась. Не просите сразу переписать приложение целиком.
Пока это только быстрая проверка. Не завершайте задачу после двух удачных щелчков: остаются пустой результат, смена статусов, клавиатура и diff. Пройдём их в статье «Как проверить код, который написал агент».
