To-do list 만들기 2
자바스크립트로 기능 구현 하나씩 추가할 예정
오늘은 리스트를 추가하는 기능을 구현했다.
강의들으면서 했던 내용인데 기억안나는거 실화냐.. 원래 그런거겠지 하며
눈물을 참고 코드를 쳤다.....
리팩토링 전 하나씩 appendchild했던 코드는 기억이 안나고 리팩토링 후 전체 태그를 한꺼번에 appendChild했던 기억만 나서 여러개를 섞어서 코드를 썼다..^^
전에 업로드 해놓은 깃헙들어가서 컨닝도...했다.. ㅎㅎㅎ 조금만!
input의 값을 가져와 li element를 만들어 거기다 넣고, li를 ul에 appenchild 해주었다.
자세한 건 코드로..!
const input = document.querySelector('.todo-input');
const addButton = document.querySelector('.todo-add-button');
const todoBoard = document.querySelector('.todo-list-board');
addButton.addEventListener('click', () => {
let list = input.value;
let lists = document.createElement('li');
lists.classList.add('todo-list-board__data');
lists.innerHTML = `<button><i class="far fa-circle"></i></button>
<span>${list}</span>`;
todoBoard.appendChild(lists);
input.value = '';
input.focus();
})
강의 들으면서 한 플젝 코드 컨닝 살짝 했을 때는 onClick함수를 만들어서 각자 역할을 하는 함수들을 분리했던데.. 모르겠다 일단 강의 때 배웠던 기능 구현 혼자 다 해보고 고쳐봐야지... 의기소침한 하루 끝🤪
Author And Source
이 문제에 관하여(To-do list 만들기 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimconut/To-do-list-만들기-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)