자바스크립트로 ToDoList를 만들어보자 - 아이템 필터링

 

 안녕하세요. 진득 코딩입니다.

 

 저번 시간에는 버튼 로직을 만들고 간단한 버튼 스타일을 입혀주었습니다.

 

 이번 시간에는 아이템 필터링하는 기능을 만들고 여러 스타일들을 적용하여 프로젝트를 마무리하는 과정을 살펴보도록 하겠습니다.

 

HTML

 

 

 먼저 HTML을 살펴보도록 하겠습니다.

 

 이번에도 HTML은 거의 변화가 없습니다.

 

 일단 <input> 태그를 살펴보게 되면 placeholder 속성을 추가하여 사용자로 하여금 해당 input 박스에 무엇을 입력해야 하는지 알려주는 기능을 추가하였습니다.

 

 이번 프로그래밍에서는 아이템 필터링을 하여 탭 별로 상태를 알아야 하기 때문에 각 탭에 id를 부여하였습니다.

 

 마지막으로 <input> 태그에 아무 것도 입력하지 않았을 때의 예외처리를 위한 Alert 창을 위해 <div> 태그를 추가하였고 해당 <div>에 있는 클릭에 onclick 이벤트를 추가해 주었습니다.

 

css

 

 

 다음으로 CSS 변경사항을 살펴보도록 하겠습니다.

 

 위에 추가된 스타일들은 추가되는 할 일들을 카드 형식으로 만들어주는 스타일입니다.

 

 또한 각각의 할 일과 탭에 hover 효과도 추가해 주었습니다.

 

 

 다음은 + 버튼 관련 스타일입니다.

 

 +버튼의 크기와 위치를 조절해 주고 hover 시 확대 효과를 추가해 주었습니다.

 

 너무 커지면 부담스러워서 1.1로 설정하여 살짝만 커지도록 처리해 주었습니다.

 

 

 다음은 under-line 관련 스타일입니다.

 

 해당 under-line의 위치는 계속해서 출력 화면을 확인하면서 조절해 주었습니다.

 

 transition을 0.5s로 하여 해당 요소가 다른 탭으로 넘어갈 때 부드럽게 넘어갈 수 있도록 처리해 주었습니다.

 

 

 다음은 alert 관련 css입니다.

 

 해당 스타일의 기본 틀은 구글링을 통해서 가져왔고 해당 틀에서 조금씩 설정해 주었습니다.

 

 alert창은 가장 위에 위치해야 하기 때문에 z-index를 1000으로 설정하여 가장 밖에 나올 수 있도록 처리하였습니다.

 

 다른 코드들은 주석으로 설명을 적어 다음에 봤을 때도 해당 코드의 쓰임새를 알 수 있도록 해주었습니다.

 

 

 다음은 모바일 버전을 위한 미디어쿼리입니다.

 

 데스크톱 버전의 화면에서는 input 박스를 왼쪽에 위치하며 80%만 차지하도록 하였고 모바일 버전에서는 꽉 찬 input 박스를 제공하여 공간을 활용해 주었습니다.

 

JS

 

 

 다음은 JavaScript 코드를 살펴보도록 하겠습니다.

 

 선언하는 구역만 봐도 JS 코드는 변화가 많은 것을 확인할 수 있습니다.

 

 우선 tab을 특정해야 하고 tab은 여러 가지이기 때문에 SelectorAll을 사용하여 모든 탭들을 가져왔습니다.

 

 또한 under-line의 위치도 자바스크립트로 조절해야 하기 때문에 ID를 통해 가져와서 변수에 담았습니다.

 

 filter 처리된 아이템들을 담는 filterList가 새로 생겼습니다.

 

 웹페이지가 실행되면 '모두' 탭이 선택되도록 mode라는 변수를 allTask로 초기화해 주었습니다.

 

 

 +버튼을 눌렀을 때 input 박스가 초기화되도록 처리하여 사용자의 편의성을 높였습니다.

 

또한 taskInput 리스너에 enter 버튼으로도 +버튼을 누른 효과를 줄 수 있도록 처리해 주었습니다.

 

 처음 웹 페이지가 실행되면 for문을 이용하여 모든 탭들에 대해 event를 부여해 주었습니다.

 

 마지막으로 페이지 로드 후 자동으로 '모두' 탭을 클릭한 상태로 설정해 주었습니다.

 

 

 addTask() 함수에는 아무것도 입력하지 않았을 때 알림 창이 뜰 수 있도록 if문으로 처리해 주었습니다.

 

 또한 filter() 함수를 추가해 주어 아이템이 추가되면 filter 기능이 작동될 수 있도록 설정해 주었습니다.

 

 

 HTML에 그림을 그려주는 render() 함수에서는 무조건 taskList를 띄워주는 것이 아니라 탭의 위치에 따라 사용하는 list를 선택하여 처리하도록 바꿔주었습니다.

 

 

 다음으로 toggleComplete() 함수와 deleteTask() 함수에서 filter() 함수를 호출하도록 코드를 작성해 주었습니다.

 

toggleComplete() 함수에서는 어떤 list를 사용해야 할지 모르기 때문에 if문을 이용하여 선택한 tab에 따라 아이템을 넣을 list를 결정해 주었습니다.

 

 deleteTask() 함수는 삭제하는 함수이기 때문에 따로 if문을 사용하지 않았습니다.

 

 

 이번 업데이트에서 가장 메인인 filter 함수입니다.

 

 매개변수에는 event = null로 처리하여 null이 들어와도 될 수 있도록 설정해 주었습니다.

 

 그리고 if문을 사용하여 event가 존재할 경우 해당 이벤트를 mode에 추가해 주도록 코드를 작성해 주었습니다.

 

 해당 함수에서는 선택한 tab에 따라 list에 넣는 아이템들을 다르게 해 주어 각각의 탭에 해당하는 아이템만 리스트에 담아주는 역할을 합니다.

 

 

 다음은 under-line의 위치를 조정해 주는 함수인 indicator() 함수입니다.

 

 underLine.style을 사용하여 해당하는 탭에 맞는 위치에 underLine이 갈 수 있도록 코드를 작성해 주었습니다.

 

 

 다음은 alert 관련 함수입니다.

 

 보여줄 때는 부드럽게 보여주도록 하고 창을 닫을 때는 바로 사라지도록 함수를 설정해 주었습니다.

 

 

완성된 to-do-list 시연 영상입니다.

 

 직접 해당 웹페이지를 방문해보고 싶으시면 아래 링크를 통해 확인하실 수 있습니다.

 

https://jongtodolist.netlify.app/

To-Do-List

 

---

 

 이렇게 프로그래밍을 배우는 사람들에게 기본적인 미니 프로젝트인 to-do-list를 완성하였습니다.

 

 처음에 만들 때는 굉장히 간단해 보이는 웹 사이트였지만 생각보다 생각할 부분도 많고 많은 스킬을 사용해야 해서 인상적이었습니다.

 

  이번 포스팅은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글에 남겨주시면 성실히 답글 달도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊