Todo app javascript
Я сделал так, чтобы при загрузке страницы у меня выводился дефолтный список задач из массива (name: 'Сходить в магазин', done: false) в local storage. Я сделал проверку, которая в зависимости от того выполнена ли задача выставляет li правильный класс. У меня вывелись мои дефолтные задачи и помечены они все как выполненные, так же перестали работать кнопки "удалить" и "готово" + при каждой перезагрузке страницы список дефолтных дел увеличивается в 2 раза, подскажите, в чем ошибка? Мне нужно чтобы при загрузке страницы выводились мои дефолтные задачи + при добавлении нового дело оно тоже сохранялось при перезагрузке.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script defer src="todo-app.js"></script>
<script>
let defaultTasks = [{name: 'Сходить в магазин', done: true}, {name: 'Купить хлеб', done: false}]
document.addEventListener('DOMContentLoaded', function() {
createTodoApp(document.getElementById('todo-app'), 'Мои дела', defaultTasks);
})
</script>
<title>TODO</title>
</head>
<body>
<div class="container mb-5">
<nav class="nav">
<a class="nav-link" href="index.html">Мои дела</a>
<a class="nav-link" href="mom.html">Дела мамы</a>
<a class="nav-link" href="dad.html">Дела папы</a>
</nav>
</div>
<div id="todo-app" class="container"></div>
</body>
</html>
(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 buttonWrapper = document.createElement('div');
let button = document.createElement('button');
form.classList.add('input-group', 'mb-3');
input.classList.add('form-control');
input.placeholder = 'Введите название нового дела';
buttonWrapper.classList.add('input-group-append');
button.classList.add('btn', 'btn-primary');
button.textContent = 'Добавить дело';
button.disabled = true;
buttonWrapper.append(button);
form.append(input);
form.append(buttonWrapper);
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() {
let list = document.createElement('ul');
list.classList.add('list-group');
return list;
}
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);
let todoItems = JSON.parse(localStorage.getItem('todoItems'));
let todoItem = {name: 'Сходить за хлебом', done: false};
todoItems.push(todoItem);
localStorage.setItem('todoItems', JSON.stringify(todoItems));
if (todoItem.done = true) {
item.classList.add('list-group-item-success');
} else {
return item;
}
// Приложению нужен доступ к самому элементу и кнопкам, чтобы обрабатывать события нажатия
return {
item,
doneButton,
deleteButton,
};
}
function createTodoApp(container, title = 'Список дел', arrayCases) {
let todoAppTitle = createAppTitle(title);
let todoItemForm = createTodoItemForm();
let todoList = createTodoList();
if (localStorage.getItem('todoItems') == null) {
localStorage.setItem('todoItems', JSON.stringify(arrayCases));
}
todoItemsDefault = JSON.parse(localStorage.getItem('todoItems'));
container.append(todoAppTitle);
container.append(todoItemForm.form);
container.append(todoList);
for (let todoItem of todoItemsDefault) {
let todoItemElem = createTodoItem(todoItem.name, todoItem.done);
todoList.append(todoItemElem.item);
}
// Браузер создаёт событие submit на форме по нажатию на Enter или на кнопку создания дела
todoItemForm.form.addEventListener('submit', function(e) {
// Эта строчка необходима, чтобы предотвратить стандартное действие браузера
// В данном случае мы не хотим, чтобы страница перезагружалась при отправке формы
e.preventDefault();
// Игнорируем создание элемента, если пользователь ничего не ввел в поле
if (!todoItemForm.input.value) {
return;
}
let todoItem = createTodoItem(todoItemForm.input.value);
// Добавляем обработчики на кнопку
todoItem.doneButton.addEventListener('click', function() {
todoItem.item.classList.toggle('list-group-item-success');
});
todoItem.deleteButton.addEventListener('click', function() {
if (confirm('Вы уверены?')) {
todoItem.item.remove();
}
});
// Создаём и добавляем в список новое дело с названием из поля для ввода
todoList.append(todoItem.item);
// Обнуляем значение в поле, чтобы не пришлось стирать его вручную
todoItemForm.input.value = '';
});
}
window.createTodoApp = createTodoApp;
})();