할 일 목록 만들기 4일차(完)

나도 내가 이걸 해낼 줄은 몰랐는데, 어찌됐든 To Do List 페이지 작성을 완료했다! 사실 처음 내가 구성했던 것과는 좀 다른 모습인지라 썩 만족스럽지는 않지만, 지금 내가 해낼 수 있는 범위에서 최선을 다했다고 말할 수 있다. 

 

먼저 본 페이지를 작성함에 앞서서 간단하게 구성한 코드와 페이지에서 버튼으로 함수가 실행되는 구조를 한 번 완성시켰다. 수정-완료-삭제의 3가지 구성으로 만들었는데, 수정 기능이 많이 어설프지만 일단 같은 기능을 본 페이지에도 구성했다. 

 

To Do List - Chrome 2024-07-12 17-47-41.mp4

16.70MB

간단한 구성의 to do list 페이지

풀어서 설명하자면

각 인풋 박스에 내용을 입력

=>등록 버튼으로 등록하고 인풋 박스 내용은 초기화

=>카드 생성

 

완료 기능

녹색 '완료!' 버튼을 누르면 내용에 줄이 그어짐

 

삭제 기능

'x' 버튼을 누르면 해당 카드'만' 삭제됨

 

수정 기능(개선 많이 필요)

인풋 박스에 다시 내용을 입력하고

=>카드의 수정 버튼을 누르면

=>해당 카드가 인풋 박스 내용으로 수정됨

 

그래도 오늘의 성과는 여태까지 ``내의 코드를 append로 붙여넣기 했던 것과 달리 이를 풀어서 적용할 수 있게 되었다는 것이다.

 

const addbutton = document.querySelector("#addbutton")

const dateinput = document.querySelector("#dateinput")

const titleinput = document.querySelector("#titleinput")

const contentinput = document.querySelector("#contentinput")

const cardlist = document.querySelector("#cardlist")

addbutton.addEventListener('click', function () {

    let createlist = document.createElement('div');

    let cardhead = document.createElement('div');

    let deletebtn = document.createElement('button');

    let editbtn = document.createElement('button');

    let creatbody = document.createElement('div');

    let cardtitle = document.createElement('h5');

    let cardcontent = document.createElement('p');

    let combtn = document.createElement('button');

    cardlist.appendChild(createlist);

    createlist.appendChild(editbtn);

    createlist.appendChild(cardhead);

    createlist.appendChild(creatbody);

    creatbody.appendChild(cardtitle);

    creatbody.appendChild(cardcontent);

    createlist.appendChild(combtn);

    createlist.appendChild(deletebtn);

    cardhead.innerText = dateinput.value;

    cardtitle.innerText = titleinput.value;

    cardcontent.innerText = contentinput.value;

    combtn.innerText = '완료!';

    deletebtn.innerText = 'X';

    editbtn.innerText = '수정';

    createlist.className = "card text-bg-light mb-3"

    createlist.style="max-width: 18rem;"

    cardhead.className="card-header"

    deletebtn.id="deletebtn"

    deletebtn.className="btn btn-outline-danger"

    editbtn.className="btn btn-primary"

    editbtn.id="editbtn"

    creatbody.className="card-body"

    cardtitle.className="card-title"

    cardcontent.className="card-text"

    combtn.id="complete"

    combtn.className="btn btn-outline-success"

    cardlist.style.wordBreak = 'keep-all';

   

   

    combtn.addEventListener('click', function () {

        cardhead.style.textDecoration = "line-through";

        cardtitle.style.textDecoration = "line-through";

        cardcontent.style.textDecoration = "line-through";

    })

    deletebtn.addEventListener('click', function () {

        cardlist.removeChild(createlist);

    })

    editbtn.addEventListener('click', function() {

        cardhead.innerText = dateinput.value;

        cardtitle.innerText = titleinput.value;

        cardcontent.innerText = contentinput.value;

    })

    dateinput.value = '';

    titleinput.value = '';

    contentinput.value = '';

})

 

``을 풀다보니 이렇게 코드도 길어져서 js 파일을 분리할 때의 이점 또한 톡톡히 느꼈다. 특히 실감했던 것은 Ctrl+F로 찾기 기능을 사용할 때 필요한 것만 찾아서 보기가 편리했다는 것이다. 

 

어쩌면 이 코드 또한 썩 좋은 코드가 아닐지도 모르지만, 그래도 코드를 이해하고 다른 방식으로도 만들어볼 수 있는 능력을 길렀다는 것에 의의를 두고 싶다. 이제는 본캠프에 들어간다. 내가 여태껏 키워온 능력들이 잘 사용될 수 있기를 바란다.