[Project] Momentum 클론 코딩 -(4) ToDo List

자바스크립트로 만든 투두리스트 !

아직 쪼질이라서 코드가 더럽다

 

localStorage 를 사용해서 새로고침을 해도 데이터가 남아있다는 엄청난 사실 !

 

완성된 투두리스트 모습

 

HTML 코드

<form class='js-toDoForm'>
        <h2>What is your Main Focus for Today ?</h2>
        <input class='underline' type="text" style='width :350px'; >
    </form>
    <ul class='js-toDoList'>
    </ul>

 

 

자바스크립트 코드

const toDoForm=document.querySelector('.js-toDoForm');
const toDoInput=toDoForm.querySelector('input');
const toDoList=document.querySelector('.js-toDoList');

const TODOS_LS='toDos';


let toDos=[]; //empty array to save todo


function deletToDo(event){
    //How to know which button is clicked? USE TARGET
    //use parentNode to know parent's target
    const btn=event.target;
    const li=btn.parentNode;
    toDoList.removeChild(li);
    const cleanToDos=toDos.filter(function(toDo){
        return toDo.id !==parseInt(li.id);
    });
    //filter 은 array 안의 요소들이 filterFn 을 실행해 true 인것을 반환하여
    //새로운 array를 만들어낸다(cleanToDos 라는 array)
    toDos=cleanToDos;
    //새로운 cleanToDos 를 원래의 toDos 에 저장 (let 이 되어야함)
    saveToDos();

}

function saveToDos(){
    localStorage.setItem(TODOS_LS,JSON.stringify(toDos));
}//localstorage can save with string
//change object->string JSON.stringify

function paintToDo(text){
    const li=document.createElement("li");
    const delBtn=document.createElement('button');
    const span=document.createElement('span');
    const newId=toDos.length+1;
    delBtn.innerText="X";
    delBtn.addEventListener("click",deletToDo);
    span.innerText=text;
    li.appendChild(span);
    li.appendChild(delBtn);
    li.id=newId; //insert id from li
    toDoList.appendChild(li);
    const toDoObj={ //shape of localstorage
        text: text,
        id: newId //array's length
    };
    toDos.push(toDoObj);//push into Array
    saveToDos();
}

function handleSubmit(event){
    event.preventDefault();
    const currentValue=toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value="";//init input
}
function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS);//call toDos from localStorage
    if(loadedToDos!==null){ //nothing in ls
        //string->obj
        const parsedToDos=JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });//parse ToDo 에 있는 애들에게 한번씩 function 을 실행
         //parseToDo 엔 local 에있는 애들이 저장되어있음
         //forEach 는 array를 위한 함수이다
    }
}
function init(){
    loadToDos();
    toDoForm.addEventListener('submit',handleSubmit);
};

init();