To Do list 기능추가하기(in JavaScript)(1)

html에 아래 코드 추가해 입력할 창 만듦

        <form id="todo">
            <input type="text" placeholder="Write a To Do and Press Enter" required/>
        </form>
        <ul id="todo-list"></ul>

 

 

엔터를 누를때마다 텍스트창 비우게 하는 함수 만듦(입력한건 newToDo 변수에 저장)

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

 

입력한 newtodo를 그리는 함수 만듦 (+ appendChild함수 이용해 태그안에 태그 추가하기)

function paintToDo(){
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);//li 태그안에 span 태그를 추가
    span.innerText=newToDo;//span태그 안에 innerText=newToDo 추가
}
 

새로운 to do 를 입력할 때마다 li태그안에 span태그있는 태그가 생성됨 

 

 

new to do 들 입력하면 리스트 뜨게하는 종합 코드

const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
// const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");//id가 todolist인 태그
 
function paintToDo(newToDo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);//li 태그안에 span 태그를 추가
    span.innerText=newToDo;//span태그 안에 innerText=newToDo 추가
    toDoList.appendChild(li);//li 태그 붙여줌 html에 최종적으로 들어가게됨
}
 
function handleToDoSubmit(event){
    event.preventDefault();
    const newToDo = toDoInput.value;
    toDoInput.value="";
    paintToDo(newToDo);
  
}
 
toDoForm.addEventListener("submit", handleToDoSubmit);

위 코드 적용된 웹화면

 

그런데 문제1. todo list 지울수 없음 2. 새로고침시 사라짐(저장되지 않음)