Практикуюсь в освоении DOM. На чистом JS написал как будет выглядеть мой ToDoList, но нужно доработать его добавив кнопку редактирования заметки, а также при нажатии на нее, чтоб появлялся input в котором мы перезапишем нашу заметку и чтоб появлялась кнопка сохранить, которая соответственно используя метод edit() сохранит в отредактированную заметку массив. Исходный код:
class Todo {
#items = [];
get items() {
return this.#items;
}
add(value) {
const note = {
id: this.#items.length + 1,
value
};
this.#items.unshift(note);
}
edit(id, value) {
const element = this.#items.find(item => item.id === id);
element.value = value;
}
remove(id) {
const index = this.#items.findIndex(item => item.id === id);
if (index !== -1) {
this.#items.splice(index, 1);
}
}
}
class TodoElement {
constructor(containerEl, todo) {
this.form = this.#createForm();
this.list = this.#createList()
containerEl.prepend(this.list);
containerEl.prepend(this.form);
this.todo = todo;
}
#createForm() {
const $form = document.createElement('form');
const $input = document.createElement('input');
const $submitButton = document.createElement('button');
$input.setAttribute('type', 'text');
$input.setAttribute('name', 'text');
$submitButton.innerText = 'Создать';
$form.style.cssText = 'width: 350px; display: flex; justify-content: space-between; align-content: flex-start;'
$input.style.cssText = 'font-size: 20px; outline: none; margin-right: 20px;';
$submitButton.style.cssText = 'padding: 10px;';
$form.append($input);
$form.append($submitButton);
$form.addEventListener('submit', e => {
e.preventDefault();
this.todo.add($input.value);
this.#renderNotes();
})
return $form;
}
#createList() {
const ul = document.createElement('ul');
ul.style.listStyle = 'none';
ul.style.padding ='10px';
return ul;
}
#renderNotes() {
this.list.innerHTML = '';
this.todo.items.forEach(note => {
const li = document.createElement('li');
const span = document.createElement('span');
const deleteButton = document.createElement('button');
const editButton = document.createElement('button');
const id = note.id;
span.textContent = note.value;
deleteButton.textContent = 'Удалить';
editButton.textContent = 'Редактировать';
li.append(span);
li.append(deleteButton);
li.append(editButton);
li.style.cssText = 'font-size: 24px; display: flex; margin-bottom: 10px;';
span.style.cssText = 'margin-right: 20px';
deleteButton.style.cssText = 'margin-right: 20px;';
deleteButton.addEventListener('click', e => {
e.preventDefault();
this.todo.remove(id);
this.#renderNotes();
})
editButton.addEventListener('click', e => {
e.preventDefault();
const input = document.createElement('input');
const saveButton = document.createElement('button');
// li.replaceWith(input);
// todo.edit(id, input.value)
this.#renderNotes();
})
this.list.prepend(li);
});
}
}
const list1 = new Todo();
const todo = new TodoElement(document.querySelector('body'), list1);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToDoList</title>
</head>
<body>
<script src="src/index.js"></script>
</body>
</html>
P.S. Там где комментарий, туда нужно все писать.