[JS] 바닐라 JS로 구글 크롬앱 만들기 #3 Make your first JS App - 2

#3.5 ~ 3.7 Making a To Do List - 2

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

const todo_ls = 'toDos';

let toDos = [];

function saveToDos() {
    localStorage.setItem(todo_ls, JSON.stringify(toDos));
    // localStroage에는 javascript의 data를 저장할 수 없고, 오직 string 형태만 저장 가능
    // 우선 JSON.stringify를 사용해 객체를 string 형태로 저장 
}

function deleteToDo(event) {
    const btn = event.target;
    const li = btn.parentNode;
    toDoList.removeChild(li); 
    const cleanToDos = toDos.filter(function(toDo) {
        return toDo.id !== parseInt(li.id);
        // parseInt : string을 넣으면 특정 진수의 정수를 반환하는 메서드. 옵션을 주지 않으면 10진수가 기본.
    });
    toDos = cleanToDos;
    saveToDos();
    // array.filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드. forEach와 마찬가지고 array 요소 각각에게 실행됨.
}

function paintToDo(text) {
    const li = document.createElement('li');
    const delBtn = document.createElement('button');
    delBtn.innerText = '😣';
    delBtn.addEventListener('click', deleteToDo);
    const span = document.createElement('span');
    const newId = toDos.length + 1;
    span.innerText = text;
    li.id = newId;
    toDoList.appendChild(li);
    li.appendChild(delBtn);
    li.appendChild(span);
    const toDoObj = {
        text: text,
        id: newId
    }
    toDos.push(toDoObj);
    saveToDos();
}

function handleSubmit(event) {
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = '';
}

function loadTodos() {
    const loadedToDos = localStorage.getItem(todo_ls);
    if(loadedToDos !== null) {
        const parseToDos = JSON.parse(loadedToDos);
        // JSON.parse를 이용해 string으로 바꾸어 저장했던 localStorage의 정보를 다시 원 data 형태로 가져 옴.
        // JSON : Javascript Object Notation
        parseToDos.forEach(function(toDo){
            paintToDo(toDo.text);
        });
        // forEach : 주어진 함수를 array 요소 각각에 실행하는 메서드
    }
}

function init() {
    loadTodos();
    toDoForm.addEventListener('submit', handleSubmit);
}
init();

드디어 To Do List까지 완료!

기능을 하나하나 구현할 때마다 참 재밌다.
역시 이론형 강의보다 실습형 강의가 흥미를 붙이기엔 더 좋은듯 😊

#3.8 Image Background

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

const img_num = 3;

function paintImg(imgN) {
    const image = new Image;
    image.src = `images/img0${imgN}.jpg`;
    image.classList.add('bg-img');
    body.prepend(image);
};

function genRandom() {
    const num = Math.floor(Math.random() * img_num) + 1;
    return num;
};

function init() {
    const randomNumber = genRandom(); 
    paintImg(randomNumber);
};

init();

오늘 들은 강의부턴 github에 버젼 관리 시작.

출근 길에 강의 듣고, 집에 와서 정리하는 방법 괜찮은 것 같다.

#3.9 ~ 3.11

Github Commit

완료! 아래는 완료하고 받은 수료증 ☺️