js todo 예제

const pipe =
(...fns) =>
(x) =>
fns.reduce((v, f) => f(v), x);

// app만들기
function App(todoList) {
const inputHTML = InputView();
const todoListHTML = TodoListView(todoList);
return `

<div id="wrapper">${inputHTML} ${todoListHTML}</div>
`;

}

//updateTodoList
function updateTodoList(todoList) {
document.querySelector("#wrapper ul").remove();
const todoListHTML = TodoListView(todoList);
document
.querySelector("#wrapper")
.insertAdjacentHTML("beforeend", todoListHTML);
}

//addTodoList
function addTodoList(todoList) {
const todoValue = document.querySelector("#todo-input").value;
//console.log(todoValue);
//console.log(todoList);
todoList.push({ name: todoValue });
return todoList;
}

//addTodoHandler
function addTodoHandler(todoList) {
//console.log(todoList);
//updateTodoList(todoList);
pipe(addTodoList, updateTodoList)(todoList);
}

//버튼 클릭 이벤트
function onAddTodo(todoList) {
document
.querySelector("#add-button")
.addEventListener("click", addTodoHandler.bind(undefined, todoList));
}

// //$는 그냥 단축으로 만들어논거임.
// const $ = document.querySelector.bind(document);

//InputView 만들기
function InputView() {
return <input type="text" id="todo-input" placeholder="입력하세요."> <button id="add-button">추가</button> ;
}

//TodoListView 만들기
function TodoListView(todoList) {
//console.log(todoList[0].name);
//console.log(todoList); // [{}]
return `

  <ul>
    ${todoList.map((todo) => {
      //console.log(todo); //객체
      //console.log(todo.name); //오늘은 공부하기
      return `<li>${todo.name}</li>`;
    })}
  </ul>
  `;

}

//input, todolist를 보여주는 화면을 렌더링
(function () {
const todoList = [
{
name: "오늘은 공부하기",
},
];

const mainHTML = App(todoList);

document.querySelector("#app").innerHTML = mainHTML;
onAddTodo(todoList);
})();