투두투두

투두 리스트를 만들건데 노션처럼 drag n drop 으로 만들거다일단 디자인은 맨 왼쪽만 완성했다.

디자인이 어느 정도 마무리 된 듯 하다.내일부터 기능 구현에 들어가야지1\. 인풋에 입력해서 엔터 누르면 to do 항목에 추가되게 하기2\. 인풋에 있는 div를 드래그&드롭해서 finished 항목에 들어가게 하기

인풋에 입력하고 엔터를 누르면 to-do에 추가되도록 했다. 새로 추가된 것은 약 0.5초 정도 보라색을 유지하여 새로 추가된 div가 잘 보이도록 했다. 인풋 값에 trim 처리한 후에 빈 값으이면 그냥 리턴하는 것을 추가하지 않았더니 새로 발견한 것이 있다. 한글로

이렇게 드래그하여 드롭하는 것을 구현했다.다만 문제는 드래그하다가 취소할 수도 있는데, 현재는 드래그 하던 요소가 finished에 한 번 들어가면 다시 물릴 수 없다는 것이다. Finished 영역에 딱 드롭되면 그제서야 자식 요소로 추가되도록 바꾸면 되려나?아무튼

todo와 finished 사이에서 드래그 앤 드롭이 가능하도록 수정하였다. 그리고 드롭하지 않았는데 드래깅 하던 요소가 바로 붙어버리는 것도 수정했다. 이렇게 dragover와 drop 이벤트 핸들러를 추가하여 구현했다. 완벽히 이해하진 못했는데 일단 구글링하여 알아

로컬 스토리지에 key값을 'todo'와 'finished'로 분류해서 저장하였다. 맨 처음 todo를 입력하면 'todo' 키 값으로 로컬 스토리지에 저장된다. todo에 있던 것을 finished로 드래그 앤 드롭해서 옮기면 로컬 스토리지에도 그에 맞게 업데이트가

삭제 버튼 추가했다. 원래 그냥 span 태그로 처리하려다가, 그래도 버튼의 역할을 하는 요소이기 때문에 button 태그로 했다.삭제 버튼을 누르면 remove()로 DOM에서 삭제하고, 로컬 스토리지에도 업데이트 한다. 다만 하나 발견한 새로운 문제가 있었다. 저

로컬 스토리지에 저장된 내용이 있으면 불러와서 화면에 보여주도록 했다.그리고 화면이 작아지면 레이아웃을 바꿔서 보여주려고 했는데, 디자인 상 레이아웃을 바꾸면 사용하기 불편하고, 디자인도 예쁘지 않아서 화면이 작아지면 경고 화면을 보여주도록 했다.이제 라이트/다크 모드

갑자기 제목이 왜 이런 모양이 되었는지는 모르겠지만...? todo-dragndrop.surge.sh에 간단하게 배포하였다. 바닐라 자바스크립트로 된 미니 프로젝트는 surge가 배포하기 제일 편한 것 같다. 커맨드 창에서 surge 명령어만 날리면 되니까. 드디어