[노마드코더] 바닐라 JS로 크롬앱 만들기 8일차 (todo)

 

 

 

todo.js

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

const TODOS_LS='toDos';

let toDos = [];

function deleteTodo(event){
    const btn = event.target;
    const li = btn.parentNode; //버튼에 대한 부모 요소 
    toDoList.removeChild(li); //쟈식 li태그 제거 
    const cleanToDos = toDos.filter(function(toDo){
        return toDo.id !== parseInt(li.id); // li에 없는 id인 toDo를 체크
    }); // 모든 toDos가 li의 id와 같지 않을 때 
    toDos = cleanToDos;
    saveToDos();
}

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

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="❌";
    delBtn.addEventListener("click", deleteTodo);
    span.innerText=text;
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId;
    toDoList.appendChild(li);
    const toDoObj = {
        text: text,
        id: newId
    };
    toDos.push(toDoObj);
    saveToDos();
}
function handleSubmit(event){
    event.preventDefault();
    const currentValue=toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value=""; //submit했을때 안을 비워줌
}
function loadToDos(){
    const loadedToDos=localStorage.getItem(TODOS_LS);
    if(loadedToDos !== null){
        const parsedToDos = JSON.parse(loadedToDos);
        parsedToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });

    }
}
function init(){
    loadToDos();
    toDoForm.addEventListener("submit",handleSubmit);
}
init();

 

 

 

 

paintToDo

 

할 일 목록을 toDos 배열로 만들어 해야할 일을 생성할 때마다 toDos 배열에 추가되게 한다. 이를 위해 toDoObj 오브젝트를 만들어 text(key)- text(value)와

id(key)-숫자(value)를 준다. 이 id의 숫자는 (배열길이+1)로 맨 처음엔 배열이 비어있으므로 id값은 1이다.

push를 이용해 toDos 배열안에 toDoObj를 넣는다.

 

 

 

 

 

saveToDo 

 

toDos배열을 로컬스토리지에 저장한다. 

 

이 때, local storage에는 자바스크립트의 data를 오직 string으로만 저장할 수 있다. 

그래서 object가 string이 되도록 만들어야 한다.

 

JSON.stringify(Javascript Object Notation)

는 자바스크립트 object를 string으로 바꿔준다.(string->object도 가능)

 

 

 

 

 

loadToDos

 

로컬 스토리지에서 값을 가져오고, 그게 null이 아니라면

화면에 띄운다. 

이 때, 가져온 loadedToDos가 string이기 때문에 json을 사용해 object로 바꿔준다.

 

 

forEach()

기본적으로 함수를 실행하는데, array에 담겨있는 것들 각각에 한번씩 함수를 실행시켜 주는것.

forEach함수를 사용해 parsedToDos 배열을 돌면서 모두 화면에 띄운다.

이 때 인자에 .text가 붙는 이유는 배열안 오브젝트 형식으로 되어있기 때문에 text에 해당하는 값을 가져온것!

 

 

 

 

deleteToDo

 

event.target

자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법.

 

event.target으로 클릭한 버튼을 가져오고 그 버튼에 대한 부모 요소인 li를 가져온다.

그리고 그 li 태그를 remove한다.

 

 

filter()

forEach에서 함수를 실행하는 것 같이 array의 모든 아이템을 통해 함수를 실행하고

함수 안 return 값이 true인 아이템들만 가지고 새로운 array를 만든다.

 

filter함수를 사용해 toDos 배열의 요소들을 모두 돌면서 제거하는 li의 id와 같지 않은 id를 가진 요소들을

return해 배열을 다시 만든다.

(제거하는 li 빼고 나머지 li들만 있는 배열이 탄생)

이 배열을 toDos배열로 업데이트를 시켜주고, 로컬스토리지에 저장한다.

 

=> html뿐만 아니라 로컬스토리지에서도 삭제가 되고, 새로고침 했을때도 삭제한게 반영이 됨 

 

 

 

 

 

 

 

 

bg.js

const body = document.querySelector("body");

const IMG_NUMBER = 3;

function handleImgLoad(){
    console.log("finished loading");
}

function paintImage(imgNumber){
    const image = new Image();
    image.src = `images/${imgNumber+1}.jpg`;
    image.classList.add('bgImage');
    body.prepend(image);
}
function genRandom(){
    const number = Math.floor(Math.random() * IMG_NUMBER);
    return number;
}
function init(){
    const randomNumber = genRandom();
    paintImage(randomNumber);
}
init();

 

 

 

Math.random()

 

자바스크립트에 있는 math란 모듈에 random하면 임의적인 숫자가 생성된다.

 

ex ) 1~5사이의 임의의 숫자를 얻고 싶다면 Math.random() * 5

 

Math.floor() : 소수점 아래의 수들을 다 버린다. (2.3, 2.6 ->2)

Math.ceil() : 소수점 아래의 수들을 모두 올린다. (2.3, 2.7 ->3)

 

 

 

 

 

 

 

 

---