Привет всем! Доработайте приложение TODO, добавив к нему следующее:
Сделайте так, чтобы у кнопки в форме устанавливался атрибут disabled, когда поле ввода пустое. Не забудьте, что disabled должен устанавливаться и при загрузке приложения, так как изначально поле тоже пустое.
Добавьте к функции createTodoApp третий опциональный аргумент с массивом дел, которые должны быть в списке сразу после загрузки приложения. Каждое дело должно быть объектом вида { name: 'Название дела', done: false/true }. Измените код функции таким образом, чтобы список дел сразу добавлялся в DOM.
У меня получилось добавить в localstorage данные, но не получается реализовать появление на странице после перезагрузки этого массива из localstorage
Заранее всем спасибо за ответы!
(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');
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 = 'Список дел', arayCases) {
let todoAppTitle = createAppTitle(title);
let todoItemForm = createTodoItemForm();
let todoList = CreateTodoList();
let tasks;
!localStorage.tasks ? tasks = [] : tasks = JSON.parse(localStorage.getItem('tasks'))
container.append(todoAppTitle);
container.append(todoItemForm.form);
container.append(todoList);
function Task1(description) {
this.description = description;
this.completed = false;
}
const createTemplate = (Task1, index) => {
return
}
const fillHtmlList = () => {
todoItemForm.innerHTML = '';
if (tasks, length > 0) {
tasks.forEach((item, index) => {
todoItemForm.innerHTML += createTemplate(item, index)
})
}
}
fillHtmlList()
const updateLocal = () => {
localStorage.setItem('task', JSON.stringify(tasks));
}
todoItemForm.form.addEventListener('submit', () => {
tasks.push(new Task1(todoItemForm.input.value));
updateLocal();
})
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('are your sure?') && todoItem.item.remove) {
todoItem.item.remove();
}
});
todoList.append(todoItem.item);
todoItemForm.input.value = '';
})
}
window.createTodoApp = createTodoApp;
})();
