Главная / Программирование и IT / Генератор списка задач (Todo App) на HTML/CSS/JS

Генератор списка задач (Todo App) на HTML/CSS/JS

Описание промпта

Создай современный, адаптивный список задач с использованием HTML5, CSS3 и чистого JavaScript. Приложение должно включать полный CRUD-функционал, категоризацию, приоритеты, поиск, фильтрацию, drag-and-drop, локальное хранение данных и переключение тем.

Что делает этот промпт

Генерирует код для полнофункционального списка задач с современным UI, адаптивностью, локальным хранением данных, drag-and-drop и управлением приоритетами.

Преимущества

Помогает быстро создать прототип или готовое приложение для управления задачами без зависимости от фреймворков. Учитывает лучшие практики UX и доступности.

Для кого подходит

Фронтенд-разработчики, студенты, изучающие JavaScript, и создатели прототипов, которым нужен быстрый старт для CRUD-приложений.

Инструкция по использованию промпта

Скопируйте сгенерированный код в файл index.html и откройте его в браузере. Для расширения функционала (например, push-уведомления) потребуется дополнительная настройка.

Что нужно предоставить

Требуется поддержка современных браузеров для работы CSS Grid, Flexbox и HTML5 Drag and Drop API. Для уведомлений в реальном времени может потребоваться Service Worker, но базовая версия работает на localStorage.

Что ожидать в результате

Рабочий одностраничный HTML-файл с встроенными стилями и скриптом, реализующий все описанные функции списка задач.

Рекомендации

Приложение сохраняет данные локально. Очистка кэша браузера удалит список задач. Для продакшена рекомендуется добавить серверную синхронизацию.

Ограничения

Не включает бэкенд, аутентификацию или облачную синхронизацию. Функционал уведомлений ограничен визуальными индикаторами в рамках одного файла.

Промпт открыт для всех. Зарегистрируйтесь, чтобы копировать одним кликом, сохранять промпты, оценивать их и подписываться на авторов.

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли опытного фронтенд-разработчика. Создай полностью функциональное веб-приложение «Список задач» (Todo List), используя только HTML5, CSS3 и ванильный JavaScript (без внешних библиотек).

Требования к функционалу:
1. CRUD: Добавление, редактирование, удаление и отметка задач как выполненных.
2. Интерфейс: Современный, чистый UI с использованием CSS Grid или Flexbox. Интуитивно понятные элементы управления.
3. Категоризация и приоритеты: Добавь возможность присваивать задачам категории с цветовой кодировкой и уровни приоритета (низкий, средний, высокий).
4. Даты и напоминания: Реализуй выбор даты (date-picker) для каждой задачи. Добавь визуальные индикаторы просроченных задач.
5. Хранение данных: Используй localStorage для сохранения состояния между сессиями.
6. Поиск и фильтры: Добавь строку поиска и фильтры по статусу, категории и диапазону дат.
7. Drag-and-Drop: Реализуй перетаскивание задач для изменения порядка их отображения с использованием HTML5 Drag and Drop API.
8. Адаптивность: Обеспечь полную отзывчивость дизайна с помощью media queries для мобильных устройств и десктопов.
9. Темы: Добавь переключатель темной/светлой темы, который по умолчанию уважает системные настройки пользователя.
10. UX: Внедри плавные анимации, микро-взаимодействия и переходы для улучшения пользовательского опыта.

Напиши код в одном HTML-файле (включая и ), готовом к запуску в браузере. Убедись, что код чистый, модульный и хорошо прокомментирован.

Генератор списка задач (Todo App) на HTML/CSS/JS

Поделитесь в социальных сетях

Комментарии