todo

자 이번엔 리스트를 만들어보자.

먼저 html에 todo-form , todo-list를 만들었다.

todo-form은 form 태그를 만들고 id 값으로 todo-form을 만들어둔다.
그리고 안쪽을 input required type="text"를 입력하고,
todo-list는 아래와 같이 만들어둔다.

<ul id="todo-list"></ul>

그리고 todo.js를 만든 후 리스트 작성에 들어가보자

<script>
const toDoForm = document.querySelector("#todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector("#todo-list");
</script>

그 다음 펑션을 제작해보자.
이 기능은 html에 자바스크립트가 직접 element를 추가해주며 Input 값에 입력한 것을 리스트에 넣을 수 있다.

<script>
function paintToDo() {
	const list = document.createElement("li");
    const span = document.createElement("span");
}

</script>

아래는 완성본이다

<script>
const toDoForm = document.querySelector("#todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.querySelector("#todo-list");

let toDos = [];
const TODOS_KEY = "toDos"


function saveToDos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event) {
    const li = event.target.parentElement;
    li.remove();
}

function paintToDo(newToDo) {
    const list = document.createElement("li");
    const span = document.createElement("span");
    span.innerText = newToDo;
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click", deleteToDo)
    list.appendChild(span);
    list.appendChild(button);
    toDoList.appendChild(list);
}

function handleToDoSubmit(event) {
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value = "";
    toDos.push(newToDo)
    paintToDo(newToDo);
    saveToDos();
}

toDoForm.addEventListener("submit", handleToDoSubmit );

function Hey(item){
    console.log("hey~!", item);
} 


const storageToDos = localStorage.getItem(TODOS_KEY);
console.log(storageToDos);
if(storageToDos){
    const parseToDo = JSON.parse(storageToDos);
    toDos = parseToDo;
    parseToDo.forEach(paintToDo);
}
</script>