노마드코더 투두리스트 클론코딩 3

3.4 Making a todo list 1

할일을 입력한 후 엔터를 치면 타이핑 했던 것들이 지워지고 할일이 출력되고 옆에 지우는 버튼이 생성되어야 한다.

다시 할일을 입력하면 새로운 할일이 이전 할일 밑에 생성되어야 한다.

지우고 싶은 할일의 지우기 버튼을 누르면 해당 할일이 지워져야 한다.

3.5 Making a todo list 2

local storage에는 자바스크립트 데이터 저장이 불가능하고 스트링만 저장 가능하다. 저장되는 값은 모두 스트링으로 변환된다. 따라서 local storage에 저장할 때는 스트링 형태로 변환 후 저장하고 불러올 때는 객체 형태로 변환 후 사용한다. 

어떤 삭제 버튼이 눌렸는지는 event.path[1].id으로 알 수 있는데 target으로 더 쉽게 알 수 있다.

3.6 Making a todo list 3

삭제 버튼을 누르면 이벤트 리스너가 발동한 후 눌린 버튼에 해당하는 li 태그를 삭제해 버린다. 그리고 filter함수를 사용해서 기존의 todos에 들어있던 li태그의 id와 삭제된 li태그의 id를 비교해서 id가 같지 않은 li태그만 cleanToDos에 저장한다.  

cleanToDos를 만들고 나서 toDos = cleanToDos를 하지 않으면 표시되는 화면상으로는 삭제되지만 브라우저에 cleanToDos를 저장하지 않았으므로 재접속시에 다시 원래대로 돌아가게 된다. 따라서 toDos = cleanToDos 해준다.

const todoForm = document.querySelector('.js-todoForm');
const todoInput = todoForm.querySelector('input');
const todoList = document.querySelector('.js-todoList');

let toDos = [];

function deleteToDo(event) {
    const btn = event.target;
    const li = btn.parentNode;
    todoList.removeChild(li);
    const cleanToDos = toDos.filter(function(toDo) {
        console.log(toDo.id,parseInt(li.id));
        return toDo.id !== parseInt(li.id);
        });
    console.log(cleanToDos);
    toDos = cleanToDos;
    saveToDos();
}

function paintToDo(text) {
    const li = document.createElement('li');
    const Delbtn = document.createElement('button');
    const div = document.createElement('span');
    const newID = toDos.length+1;
    div.innerHTML = text;
    Delbtn.innerHTML = '❌';
    Delbtn.addEventListener('click',deleteToDo);
    li.appendChild(div);
    li.appendChild(Delbtn);
    todoList.appendChild(li);
    li.id = newID;
    const toDoObj = {
        text: text,
        id: toDos.length+1,
    };
    toDos.push(toDoObj);
    saveToDos();
}

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

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = todoInput.value;
    localStorage.setItem('hi',currentValue);
    paintToDo(currentValue);
    todoInput.value='';
}

function loadToDos() {
    const currentToDos = localStorage.getItem("toDos");
    if (currentToDos !==null) {
        const parsedToDos = JSON.parse(currentToDos);
        for(var i = 0;i<parsedToDos.length;i++) {
            paintToDo(parsedToDos[i].text);
        }
    }
}

function init() {
    loadToDos();
    todoForm.addEventListener('submit',handleSubmit);
}

init();

 

 

3.7 Image Background

배경 이미지를 위해 body에 img를 추가한다.

const image = document.createElement('img') 및 body.append(image) 사용

image.src로 이미지 경로를 정의한다.

랜덤한 이미지를 불러오기 위해 랜덤한 수 생성하는 함수 정의한 후 리턴값으로 랜덤한 수를 받아서 그 수를 경로 정의할 때 사용한다.

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

const IMG_NUMBER = 10;

function paintImage(imgNumber) {
    const image = document.createElement('img');
    image.src = `images/${imgNumber}.jpg`;
    image.classList.add('bgimg');
    body.append(image);
}

function getRandom() {
    const number = Math.ceil(Math.random()*IMG_NUMBER);
    return number;
}

function init() {
    const randomNumber = getRandom();
    paintImage(randomNumber);
}

init();