[RESAT] 4일차 미션 - ToDo List 만들기

 

오늘은 RESAT 파밍 챌린지 4일 차다.

어제 미션은 타이머를 만드는 미션이었는데, 그렇게 어렵거나 하지는 않았다.

다만 역시나 블로커는 바닐라 자바스크립트...

앞으로 더더 복잡해질 것 같은데 시간만 너무 오래 안 걸렸으면 좋겠다...

 

아무튼 오늘 미션은 [To Do List 만들기]다.

 

---

미션 내용

- 할 일을 작성하는 영역 구현
- 할 일 별로 우선순위를 지정하도록 구현
- 할 일과 우선순위를 지정하고 추가 버튼을 누르면 할 일 리스트가 생성
- 생성된 할 일은 수정이 가능하도록 구현
- 할 일 리스트를 했는지 안 했는지는 리스트 앞 체크박스로 확인
- 할 일 리스트를 전체 / 완료 / 미완료로 정렬하도록 구현

 

이번 미션은 여러 가지 요구 조건이 많았다.

 

우선 To-Do List에서 가장 기본이 되는 기능은 아무래도

- [ 할 일을 작성하고 추가 버튼을 누르면 할 일 리스트가 생성되는 것 ]

- [ 리스트에서 해결한 일과 안 한 일의 구분 ]

이게 가장 핵심이 되는 기능이 아닐까 싶다. 그 외 추가 사항으로는

할 일별 우선순위 지정 / 리스트 정렬이 되겠다.

 

여기서 요구하는 조건 외에 나중에 추가하면 좋을 기능을 리스트업 해보면

 

- 할 일 리스트 삭제
- 할 일 별로 날짜 지정
- 정렬 방식 : 시간, 우선순위

 

중간중간 생각나는 대로 추가해 보고 기능 구현할 때마다 새로운 글을 써봐야겠다.

 

728x90

구현 중점 사항

const showList = (arr) => {
  todoListBox.innerHTML = "";
  arr.forEach((list) => {
    const todoListWrap = document.createElement("li");
    todoListWrap.classList.add("todoListWrap");

    const todoCheckBox = document.createElement("input");
    const todoList = document.createElement("input");
    const priorityLabel = document.createElement("span");

    todoCheckBox.classList.add("todoCheckBox");
    todoList.classList.add("todoList");
    priorityLabel.classList.add("priorityLabel");

    todoCheckBox.setAttribute("type", "checkbox");
    if (list.complete) {
      todoCheckBox.setAttribute("checked", "");
    }

    todoList.setAttribute("type", "text");

    todoList.value = list.title;
    priorityLabel.innerText = list.priority;

    todoListBox.appendChild(todoListWrap);
    todoListWrap.appendChild(todoCheckBox);
    todoListWrap.appendChild(todoList);
    todoListWrap.appendChild(priorityLabel);

    todoCheckBox.addEventListener("click", () =>
      handleCheckBox(list.id, todoCheckBox.checked)
    );
  });
};

 

 

일단 기본적으로는 할 일을 적고 등록을 하면 할 일이 쌓이는 기능이 기본인데,

거기에 우선순위를 표시하는 것도 있고, 한 일과 아직 안 한 일을 필터링해서 보여주는 것도 필요해서

할 일을 생성하는 로직에서 이것저것 많은 옵션이 들어가게 됐었다.

 

근데 사실 로직의 절반은 UI와 관련된 부분이라서 기능적인 부분은 크게 많지는 않지만

이것도 JS로 구현하는 기능의 묘미가 아닐까..!

 

구현 화면

이번에는 그래도 어제 작업한 거보다는 UI에 조금 더 신경을 썼다(?)

색도 넣어보고 나름 미관을 신경 쓴다고 썼는데, 다른 사람들이 제출한 내역을 보니까

내껀 진짜 그냥 뼈대만 있는 수준이었다.

일단 기능 구현에 집중을 하는 게 더 좋다고 애써 자기 위안을 해보지만 그래도 욕심이 있어서

이 챌린지 기간이 끝나면 반드시 리팩토링 해볼 생각이다..

 

현재 상금 현황

현재 시간 기준 4일 차 과제 제출 기간이 종료됐다.

일차별 제출 인원을 조사해 본 결과 아래와 같이 확인이 되었다.

 

일차	제출 인원 (총 34명)	현재 상금	1인당 상금
1	31	15,000원	약 500원
2	12	110,000원	약 9천원
3	12	110,000원	약 9천원
4	12	110,000원	약 9천원

 

2일 차 미션이었던 미니인턴 메인 페이지 클론 코딩에서 드롭될 사람들은 드롭된 것 같다.

사실 이게 주말에도 하루, 하루 제출이었으면 주말에도 뭔가 기대를 걸어볼 수 있을 것 같은데

주말 포함 월요일까지 어떤 미션을 하는 과제라서 아마 꾸준히만 한다면 이대로 상금 배분이 될 것 같다.

아쉽지만 그럼에도 불구하고 나쁘지 않다! 돈 때문은 아니니까..!

 

---

 

배포 링크

▶ [RESAT] To Do List