본격적으로 BootCamp를 시작하기까지 한달정도의 여유기간이 있다
(입학 시험을 통과한다는 전제하에)

한 달 동안 혼자 이것저것 만들어보고 공부하는 시간을 가져보고자 한다.
가장 기본적인 것이 To-do List를 만드는 것이라고 하여 예시를 좀 찾아봤는데,
간단하지만 나름 여러 기능들이 있어서 남은시간 공부하기에 적절한 난이도라고 생각한다.
가능하다면 매주 하나씩 무언가를 만들어 볼 계획이다.

JavaScript에서 <li class ="className"> 이런식으로 html에 추가 할수도 있다고 하는데,
도무지 이해가 되지 않아서 익숙한 createElement를 활용했다.

let elList = document.createElement('li');
let elContent = document.createElement('div');

elList.appendChild(elContent);
elContent.className = "content";
elContent.innerHTML = elWrite.value;

이런식으로 해야 할 리스트들을 만들어주고,
나중에 추가할 delete button과 todolist의 내용을 구분하기 위해 list의 childElement로 content라는 class를 따로 만들었다.
내용이 입력되면 input box는 자동으로 초기화되어 새로운 내용이 입력되기를 기다린다.

let elClose = document.createElement('span');
elClose.className = "close";
elClose.innerHTML = "delete";

elList.appendChild(elClose);
elDisplay.appendChild(elList);

elClose.onclick = function () {
    let whatToDelete = this.parentElement;
    whatToDelete.style.display = "none";
}

elList.addEventListener('click', function() {
    let words = elContent.innerHTML
    let newWords = words.strike();
    elContent.innerHTML = newWords;
});

취소 버튼을 만들고, 새로 만들어 낼 li에 취소버튼을 추가했다.
취소 버튼을 누르면 해당 리스트가 사라지고, 리스트를 클릭할 경우 해당 todo 내용을 완료한 것으로 판단하여 내용에 취소선이 그어지도록 했다.

elWrite.onkeydown = function(event) {
    if (event.keyCode == 13) {
        newElement();
    }
}

추가로 엔터를 누르면 todo stuff이 추가되도록 하고싶어서
검색을 통해 keydown / keyup이라는 기능과 enter key가 keyCode 13이라는 것을 찾아서, enter key가 눌릴 경우 새로운 리스트를 만드는 함수를 invoke하도록 했다.