Задание: Управление списком задач

Задание

Реализовать следующие пользовательские истории:

Пользовательская история

Пользовательская история — это способ описания возможностей приложения с точки зрения пользователя. То есть того, что он может или хочет сделать в приложении, какой результат ожидает и какую пользу это ему должно принести. Такой подход позволяет концентрироваться на решении потребностей пользователя с учетом контекста, зачем ему нужна это возможность.

0 of 5

1. Я могу удалить задачу из списка
2. Я могу отметить задачу как завершенную
3. Я могу открыть задачу (снять отметку о завершении)
4. Я могу скрыть выполенные задачи
5. Я могу просмотреть все задачи, включая выполненные

Нюансы реализации

0 of 3

1. Элемент выбор режима просмотра (все / только открытые) четко дает понять, какой режим активен и/или какой будет активирован по клику
2. Удаленная задача не появляется в списке после смены режима просмотра
3. В режиме "только открытые" отмеченная как выполненная задача пропадает из списка

Як ховати та показувати виконані задачі

1. Приховуємо виконані задачі по замовчуванню

.done {

display: none;

}

Якщо задача виконана, додаємо на кореневий елемент задачі клаc done. В цьому в нагоді стане метод classList.toggle з другим опціональним параметром. Він визначає, чи повинен вказаний клас бути присутній.

function renderTask(task) {

let taskNode = document.createElement('div');

taskNode.classList.toggle('done', task.done);

// ще код наповнення задачі датою та описом

return taskNode;

}

2. Опціонально показуємо виконані задачі

Коли включена опція "показати виконані задачі", нам потрібно перекрити дефолтний стиль виконаної задачі. Для цього ми використаємо клас-маркер show-done який будемо додавати до елементу tasksContainer.

<div id="tasks-container show-done">

<div class="task done">...</div>

<div class="task done">...</div>

<div class="task">...</div>

</div>

.show-done .done {

display: block;

}

Селектор .show-done .done буде застосовуватись до задач з класом done, якщо контейнер (або один з предків) має на собі клас show-done. Він матиме вищій пріоритет за селектор .done, тому виконані задачі отримають властивість display: block.

Тепер нам потрібно додавати або видаляти клас show-done відповідно до стану чекбоксу "показати виконані задачі".

showDoneOption.onchange = function () {

tasksContainer.classList.toggle('show-done', showDoneOption.checked);

}

Узгоджуйте початкові стани

Початкові стани елементів showDoneOption та tasksContainer мають бути узгоджені. Не обрано чекбокс показувати виконані задачі - відповідно класс show-done теж відсутній.