Нужна помощь в редактирование текста в mvc todo list javascript
помогите написать функцию, чтобы можно было редактировать текст. Я даже не знаю, с чего начать.
class Model{
constructor(){
this.todos = JSON.parse(localStorage.getItem('list')) || [];
}
addTodo(text){
const todo = {
id: Date.now().toString(),
text: text
}
this.todos.push(todo);
localStorage.setItem('list', JSON.stringify(this.todos));
}
deleteTodo(id){
this.todos = this.todos.filter(todo => todo.id !== id);
localStorage.setItem('list', JSON.stringify(this.todos));
}
}
class View{
constructor(){
this.root = document.getElementById("root");
this.input = document.createElement("input");
this.addBtn = document.createElement("button");
this.showBtn = document.createElement("button");
this.render();
}
render(){
this.root.innerHTML = "";
this.addBtn.innerHTML = "Add";
this.showBtn.innerHTML = 'SHOW'
this.root.append(
this.input,
this.addBtn,
this.showBtn
)
}
}
class View2 {
constructor(){
this.root = document.getElementById("root");
this.todoList = document.createElement("ul");
this.backBtn = document.createElement("button");
}
render() {
this.root.innerHTML = "";
this.backBtn.innerHTML = 'BACK';
this.root.append(
this.todoList,
this.backBtn
)
}
renderTodos(todos){
this.todoList.innerHTML = "";
if(todos.length){
todos.forEach(todo => {
const li = document.createElement("li");
const editBtn = document.createElement("button");
const deleteBtn = document.createElement("span");
const inputEdit = document.createElement('input');
li.dataset.id = todo.id;
inputEdit.value = todo.text;
deleteBtn.innerHTML = "×";
deleteBtn.className = "deleteBtn";
editBtn.innerHTML = "Change";
editBtn.className = "EditBtn"
inputEdit.className = 'inputEdit';
li.appendChild(inputEdit)
li.appendChild(editBtn);
li.appendChild(deleteBtn);
this.todoList.appendChild(li);
})
}
}
}
class Controller{
constructor(model, view, view2){
this.model = model;
this.view = view;
this.view2 = view2;
this.view.addBtn.addEventListener("click", this.handleAdd.bind(this))
this.view.showBtn.addEventListener("click", this.handleShow.bind(this))
this.view2.backBtn.addEventListener("click", this.handleBack.bind(this))
// this.view2.editBtn.addEventListener("click", this.handleEdit.bind(this))
}
// VIEW1
handleAdd(){
const value = this.view.input.value;
if(value.trim()){
this.model.addTodo(value);
this.view.input.value = "";
}else{
alert("Поле пустое")
}
}
handleShow(event){
this.view2.render();
this.view2.renderTodos(this.model.todos);
this.view2.todoList.addEventListener("click", this.handleDelete.bind(this));
}
// VIEW2
handleDelete(event){
const deleteBtn = event.target.closest(".deleteBtn");
if(deleteBtn){
const id = deleteBtn.parentElement.dataset.id;
this.model.deleteTodo(id);
this.view2.renderTodos(this.model.todos);
}
}
handleBack(event){
this.view.render();
}
handleEdit(event){
const value = this.view2.inputEdit.value;
const editBtn = event.target.closest(".EditBtn");
const id = editBtn.parentElement.dataset.id;
this.model.updateTodo(id,value);
}
}
const model = new Model();
const view = new View();
const view2 = new View2();
const controller = new Controller(model, view, view2);
помогите закончить этот todo list