Проект "Канбан-доска"

Канбан-доска в соответствии с макетом (предоставлен школой SkillFactory по курсу Frontend-разработка)

Попробовать

Используемый стек:

• HTML5,
• CSS3,
• JS,
• React, React-router-dom

Функциональность:

Исходное состояние:

Исходная Канбан-доска имеет 4 блока с задачами:

• Backlog (задачи, которые требуют уточнения перед тем, как брать их в работу);
• Ready (задачи, которые могут быть взяты в работу);
• In progress (задачи, которые уже в работе);
• Finished (законченные задачи).

1. Добавление новой задачи

Первоначально каждая задача всегда размещается в бэклоге — для анализа. При клике на кнопку «+ Add task» в карточке Backlog появляется поле ввода в конце списка, между последней задачей и кнопкой. При этом кнопка «+ Add task» меняется на «Submit».

Алгоритм добавления задачи:

→ нажали кнопку «+ Add task»
→ появилось поле для редактирования
→ ввели название
→ нажали кнопку «Submit» — задача появилась в бэклоге.

2. Перемещение задач между списками

Задачи для списка Ready берутся из Backlog. При клике на «+ Add task» в карточке Ready, в конце списка появляется дропдаун с задачами из списка Backlog. После клика на задачу из дропдауна она появляется в списке Ready последней, при этом эта задача удаляется из Backlog.

Если Backlog пустой (в списке нет задач), то кнопка «+ Add task» в списке Ready неактивна. Активная и неактивная кнопки отличаются визуально.

Остальные списки (In progress и Finished) работают по тому же принципу.

3. Удаление задач

Каждая задача имеет кнопку (красный крестик у правого края блока задачи), при нажатии на которую задача будет удалена.

4. Детальная страница задачи

Осуществлена возможность перехода на отдельную страницу какой-либо задачи в списке при клике на её заголовок.

Страница с задачей имеет:

• URL, отличный от того, который используется для главной страницы,
• название задачи и её описание. Если описания нет, выводится фраза "This task has no description",
• возможность редактировать детали задачи: заголовок, статус, описание,
• возможность удалить задачу,
• при клике на крестик в правом верхнем углу осуществляется переход обратно на главную страницу без сохранения изменений.

5. Сохранение внесенных изменений

Любые изменения, внесенные в приложение (добавление новых задач, перемещение задач между списками, изменение описания задачи), сохраняются в localStorage.

При загрузке приложения отображаются задачи, записанные в localStorage (или пустые списки, если в localStorage ничего нет). Если внести изменения и обновить страницу, то изменения сохраняются.

6. Вывод количества задач в футер

В футере выводится количество активных(Backlog) и завершенных задач(Finished).

7. Выпадающее меню пользователя

Реализован выпадающий список, который будет появляться при клике на блок в правом верхнем углу страницы — аватар пользователя со стрелкой.

При клике на пункты меню ничего не происходит, но добавлено выделение пунктов при наведении курсора.