TODO app #

О проекте #

В этом уроке тебе предстоит создать приложение для управления задачами, написанное на современных технологиях. Ты научишься работать с пользовательским вводом, углубишься в Redux Toolkit и познакомишься с TypeScript.

Чему научишься #

• TypeScript — JavaScript, но с суперспособностями. TypeScript — это улучшенная версия JavaScript, которая помогает избежать ошибок. Он заставляет код быть предсказуемым: если ты где-то допустил опечатку или забыл про ожидаемый тип данных, TypeScript тебе подскажет. Сейчас это стандарт индустрии и реальные проекты пишутся именно на TS
• Redux Toolkit. Redux Toolkit — это более простой и удобный вариант классического Redux
• Как работать с пользовательским вводом. Когда пользователь вводит текст (например, название новой задачи), его нужно правильно обработать и сохранить.
• CSS модули. В этом уроке мы вернемся к классической стилизации. CSS модули решают примерно ту же, проблему, что и БЭМ, но на программном уровне.
• Работа с модальными окнами и диалогами. При удалении задачи важно дать пользователю возможность подтвердить действие. Иначе можно случайно потерять важную задачу.

Материалы для подготовки #

Самостоятельный поиск других источников приветствуется

• TypeScript
  • Основы TypeScript (видео) — простое объяснение с примерами
  • TypeScript документация на русском. Раздели, обязательные к прочтению:
    • “Вступление”
    • “Зачем нужен TypeScript”
    • “JavaScript”
    • “Система типов”
• Redux Toolkit документация. Нас интересует только Redux Toolkit. RTK Query в этом уроке не понадобится
• React Hook Form - библиотека для работы с формами
  • Официальная документация
  • Видео с примером использования
• CSS модули
  • Введение в CSS модули.
  • Работа с CSS модулями в Vite

Техническое задание #

Макет приложения

1. Сделай форк репозитория https://github.com/Ospens/todo-app-template. В нем уже есть все нужные настойки, можно сразу писать приложение.
   1. Перейди по ссылке на репозиторий
   2. В правом верхнем углу нажми кнопку Fork. GitHub создаст копию этого репозитория в твоём аккаунте
   3. Перейди в свой аккаунт на GitHub и открой форкнутый репозиторий
   4. Нажми кнопку Code (зелёная) → выбери HTTPS и скопируй ссылку
   5. Открой терминал (или командную строку) на компьютере и введи команду:

git clone https://github.com/ТВОЙ_АККАУНТ/todo-app-template.git

2. Верстка должна быть выполнена с использованием CSS модулей
3. В проекте должен быть настроен eslint и prettier и код должен соответствовать их конфигурации
4. Поле ввода “Новая задача”. Должен содержать placeholder “Новая задача”.
5. Кнопка “+”. Добавляет контент, который введен в поле “Новая задача”. Кнопка должна быть отключена, если поле пустое. Когда кнопка отключена она должна быть серого цвета, а при наведении на нее курсор должен становиться перечеркнутым.
6. Поле ввода и кнопка “+” должны использовать механизмы React Hook Form (см. материалы).
7. Блок Список дел. После создания задачи она попадает в этот список. Список задач идет в порядке добавления: новые появляется вверху.
   1. Каждый элемент списка должен содержать: чекбокс, название и кнопку “Удалить”
   2. Заголовок должен соответствовать шаблону: “Список дел - X”, где X - количество элементов в списке.
8. Список завершенных дел. При нажатии на чекбокс он должен становиться активным, название должно зачёркиваться и становиться зеленым, а элемент перемещается в начала списка “Завершено”
   1. Заголовок должен соответствовать шаблону: “Завершено - X”, где X - количество элементов в списке.
   2. При нажатии на чекбокс завершенного дела элемент должен вернуться в начало “Списка дел”
9. При нажатии на кнопку “Удалить” должен появляться диалог “Вы действительно хотите удалить {название элемента}?” При выборе “Да” - убрать элемент из списка. При выборе “Нет” - ничего не происходит.

Обратная связь и контакты #

По любым вопросам пиши мне, @i_urKing, и подписывайся на канал @js_is_easy