( function () {
// Создаем и возвращаем заголовок приложения
function createAppTitle (title) {
let appTitle = document.createElement('h2');
appTitle.innerHTML = title;
return appTitle;
};
// Создаем и возвращаем форму для создания дела
function createTodoItemForm () {
let form = document.createElement('form');
let input = document.createElement('input');
let wrapperButton = document.createElement('div');
let button = document.createElement('button');
input.type = 'text';
input.placeholder = 'Введите название нового дела';
form.classList.add('input-group', 'mb-3');
input.classList.add('form-control');
wrapperButton.classList.add('input-group-append');
button.classList.add('btn', 'btn-primary');
button.disabled = true;
button.textContent = 'Добавить';
form.append(input);
form.append(wrapperButton);
wrapperButton.append(button);
input.addEventListener('input', function(e) {
e.preventDefault();
if (input.value.length > 0) {
button.disabled = false;
} else if (input.value.length == 0) {
button.disabled = true;
}
});
return {
form,
input,
button,
}
};
// Создаем и возвращаем список элементов
function createTodoList () {
ul = document.createElement('ul');
ul.classList.add('list-group');
return ul;
}
// Создаем и возвращаем элементы для создания списка дел
function createTodoItem(name) {
let item = document.createElement('li');
// Кнопки помещаем в элемент, который красиво покажет их в одной группе
let buttonGroup = document.createElement('div');
let doneButton = document.createElement('button');
let deleteButton = document.createElement('button');
// Устанавливаем стили для элемента списка, а так же для размещения кнопок в его правой части с помощью flex
item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center');
item.textContent = name;
buttonGroup.classList.add('btn-group', 'btn-group-sm');
doneButton.classList.add('btn', 'btn-success')
doneButton.textContent = 'Готово';
deleteButton.classList.add('btn', 'btn-danger');
deleteButton.textContent = 'Удалить';
// Вкладываем кнопки в отдельный элемент, чтобы они обьединились в один блок
buttonGroup.append(doneButton);
buttonGroup.append(deleteButton);
item.append(buttonGroup);
// приложению нужен доступ к самому элементу и кнопкам, чтобы обрабатывать события нажатия
return {
item,
doneButton,
deleteButton,
}
}
function createTodoApp(container, title) {
let TodoAppTitle = createAppTitle (title);
let TodoItemForm = createTodoItemForm ();
let todoList = createTodoList ();
container.append(TodoAppTitle);
container.append(TodoItemForm.form);
container.append(todoList);
// Браузер создает событие submit на форме по нажатию на Enter или на кнопку создания дела
TodoItemForm.form.addEventListener('submit', function(e) {
//эта строчка необходима чтобы предотвратить стандартное действие браузера, в данном случае мы не хотим чтобы страница перезагружалась при отправке формы
e.preventDefault();
// игнорируем создание элемента, если пользователь ничего не ввел в поле
if (!TodoItemForm.input.value) {
return;
}
let object = {
name: TodoItemForm.input.value,
done: false,
}
let {name, done} = object
let todoItem = createTodoItem(JSON.stringify(object));
todoItem.doneButton.addEventListener('click', function() {
todoItem.item.classList.toggle('list-group-item-success');
if (todoItem.item.classList.contains('list-group-item-success')) {
console.log('ПРивет')
} else {object.done = 'false';}
});
todoItem.deleteButton.addEventListener('click', function() {
if (confirm('Вы уверены?')) {
todoItem.item.remove();
}
});
todoList.append(todoItem.item);
TodoItemForm.input.value = '';
});
}
window.createTodoApp = createTodoApp;
}) ();
Этап 1
Измените функцию создания дела, чтобы она принимала и корректно обрабатывала объект { name, done }, а не просто название. Это пригодится для преобразования объекта дела в DOM-элемент.(Этот пункт мне сделать удалось, прошу подсказать правильно ли?)
Этап 2
Сделайте так, чтобы у кнопки в форме устанавливался атрибут disabled, когда поле ввода пустое. Не забудьте, что disabled должен устанавливаться и при загрузке приложения, так как изначально поле тоже пустое. (Данный пункт я так же выполнил, прошу проверить правильность выполнения)
Этап 3
Каждое созданное дело должно храниться в массиве дел в виде объекта. При создании нового дела в массив должен добавляться новый объект с тремя параметрами: name — название дела, done — статус дела, который может принимать значения true или false, и id — уникальный числовой параметр.
Чтобы сгенерировать id, вы можете выбрать один из двух способов:
Для каждого нового объекта (дела) можно генерировать id с произвольным, рандомным числом.
Написать функцию, которая будет искать максимальный id в массиве дел и прибавлять к максимальному id число 1.
Пример массива с объектами дел
[
{id: 1, name: ‘Купить хлеб', done: false},
{id: 2, name: ‘Покормить кота’, done: true},
{id: 3, name: ‘Сделать задание по JS’, done: true}
]
Этап 4
Сделайте так, чтобы при нажатии на кнопку «Удалить» удалялся не только DOM-элемент li из DOM-дерева, но и объект в массиве дел. Для решения этой задачи при клике на кнопку «Удалить» необходимо найти в массиве дел объект с таким же id и удалить его. Искать элементы в массиве вы уже умеете.
Так же поступите и с кнопкой изменения статуса. При клике на неё найдите в массиве объектов нужный объект и измените параметр done на противоположный.
Этап 5
Создайте функцию сохранения массива дел в localStorage. Вызывайте функцию сохранения каждый раз, когда вы изменяете список дел, а именно: добавляете новое дело, удаляете дело или изменяете статус.
Перед выполнением этого этапа рекомендуем почитать материалы:
JSON.stringify
JSON.parse
Window.localStorage
Учтите, что список дел разный для каждой страницы, поэтому нужно использовать разные ключи в localStorage. Ключ можно передавать отдельным параметром в createTodoApp.
Добавьте в функцию createTodoApp() третий параметр listName, который поможет вам создать собственный список для каждого пользователя.
Пример запуска приложения на странице пользователя:
document.addEventListener('DOMContentLoaded', function(){
createTodoApp(document.getElementById('todo-app'), 'Мои дела', 'my');
});
Этап 6
Сейчас ваше приложение может сохранять список дел. На данном этапе нужно сделать так, чтобы при запуске приложения в функции createTodoApp() была выполнена проверка на наличие данных в localStorage. Если в localStorage есть данные, то их нужно расшифровать и полученный массив отрисовать на экране в виде DOM-элементов списка.
Критерии оценки
При работе приложения в браузере не должны возникать ошибки в консоли.
Список дел должен сохраняться: при обновлении страницы сохранённый список должен отображаться на экране.
