[2주차 기본/생각 과제] Todolist, Velog #3
Conversation
| const target = e.target; | ||
| switch (target.id) { | ||
| case 'today_button' : | ||
| $('.right').classList.add('hidden'); | ||
| $('.left').classList.add('full'); | ||
| $('.left').classList.remove('hidden'); | ||
| $('.right').classList.remove('full'); | ||
| break; | ||
| case 'tomorrow_button' : | ||
| $('.left').classList.add('hidden'); | ||
| $('.right').classList.add('full'); | ||
| $('.right').classList.remove('hidden'); | ||
| $('.left').classList.remove('full'); | ||
| break; | ||
| case 'both_button' : | ||
| $('.right').classList.remove('hidden'); | ||
| $('.left').classList.remove('full'); | ||
| $('.left').classList.remove('hidden'); | ||
| $('.right').classList.remove('full'); | ||
| break; | ||
| } |
There was a problem hiding this comment.
swich문을 이용해서 상태 변경하는거 너무 멋지다!!
근데 case 안에 매개변수를 제외한 같은 로직들이 반복되기 때문에, classList를 변경하는 함수를 만들어서 사용해도 좋을 것 같아요!!
There was a problem hiding this comment.
switch문으로 쓸 수 있다는 생각은 안해봤는데,
이렇게 제이쿼리로도 사용할 수 있겠다!
| left_form_button.addEventListener("click", (e) => { | ||
| e.preventDefault(); |
There was a problem hiding this comment.
form 에서 이벤트가 일어날 때 새로고침을 방지해주는 로직 멋져!
근데 input 태그를 사용하면 e.preventDefault() 사용하지 않아도 되는데 form태그를 쓴 이유가 궁금해요!
| function onAddRight(right_input) { | ||
| const currentLi = document.createElement('li'); | ||
| currentLi.innerHTML = right_input.value; | ||
|
|
||
| //delete 아이콘 만들어서 리스트에 추가하기 | ||
| const currentDeleteBtn = document.createElement('span'); | ||
| currentDeleteBtn.innerHTML = "delete"; | ||
| currentDeleteBtn.classList.add('material-symbols-outlined'); | ||
| currentLi.appendChild(currentDeleteBtn); | ||
|
|
||
| currentLi.classList.add('grid'); | ||
|
|
||
| return currentLi; | ||
| } |
There was a problem hiding this comment.
이 함수도 onAddLeft 함수랑 같은 로직을 갖고있어서, 함수를 하나로 합칠 수 있지 않을까요!?
매개변수를 left, right로 다르게 주면 될 것 같아요🌟
| left_list.addEventListener("click", (e) => { | ||
| e.stopPropagation(); | ||
| const target = e.target; | ||
| switch (target.nodeName) { | ||
| case 'SPAN': | ||
| const n = e.target.parentNode; | ||
| left_list.removeChild(n); | ||
| break; | ||
| } | ||
|
|
||
| } | ||
| ) |
There was a problem hiding this comment.
전체 section 안에서 모든 click 이벤트를 감지한 뒤에, 그게 삭제버튼인지 아닌지 판단하는건 불필요하게 이벤트를 감지할 수 있을 것 같아요!!
delete 버튼을 생성할 때, 바로 그 버튼에 click이벤트를 달아주면 불필요한 로직을 없앨 수 있어요!!
| const tag_list = $('.tagList'); | ||
| const lists = $$('li'); | ||
|
|
||
| input.addEventListener("keypress", (e) => { |
There was a problem hiding this comment.
keypress이벤트는 키보드를 누르는 시간동안(내내) 이벤트를 감지하기 때문에, 한번 엔터를 누르는 이벤트를 감지하려면 keydown이나 keyup 이 더 적절하지 않을까요!?
그리고 keypress의 사용이 지양되는것 같아요 헤헤
https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event
| for (let node of tag_list.childNodes){ | ||
| if (node.innerText === currentLi.innerText){ | ||
| count++; | ||
| break; |
There was a problem hiding this comment.
현재 있는 태그를 for문으로 돌면서 태그가 중복되었는지 확인하는 것도 좋지만 태그를 생성할때마다 태그를 담아두는 배열에 추가하고 그 배열에서 중복을 확인해보는 방법도 있어요!!
| const target = e.target; | ||
| switch (target.id) { | ||
| case 'today_button' : | ||
| $('.right').classList.add('hidden'); | ||
| $('.left').classList.add('full'); | ||
| $('.left').classList.remove('hidden'); | ||
| $('.right').classList.remove('full'); | ||
| break; | ||
| case 'tomorrow_button' : | ||
| $('.left').classList.add('hidden'); | ||
| $('.right').classList.add('full'); | ||
| $('.right').classList.remove('hidden'); | ||
| $('.left').classList.remove('full'); | ||
| break; | ||
| case 'both_button' : | ||
| $('.right').classList.remove('hidden'); | ||
| $('.left').classList.remove('full'); | ||
| $('.left').classList.remove('hidden'); | ||
| $('.right').classList.remove('full'); | ||
| break; | ||
| } |
There was a problem hiding this comment.
switch문으로 쓸 수 있다는 생각은 안해봤는데,
이렇게 제이쿼리로도 사용할 수 있겠다!
✨ 구현 기능 명세
🎁 PR Point
😭 소요 시간, 어려웠던 점
10h😎 구현 결과물