📋 To-Do List 만들기

오늘은 3일차 챌린지 중이다.
미션은 내가 할 일을 기록하고 달성 여부를 체크할 수 있는
To-Do 리스트 만들기 !

자바스크립트를 활용하여 DOM 조작 방법 및 CRUD를 익히는 시간이 될 것 !

📌 요청사항

• 할 일을 작성할 수 있는 영역이 존재한다. ✔️
• 할 일의 우선순위를 지정할 수 있다. (낮음 / 보통 / 높음 / 아주 높음) ✔️
• (선택사항) 우선 순위 별 UI 또는 아이콘을 넣어서 강조할 수 있다. ✔️
• 할 일 추가하기 버튼을 클릭하면 할 일 목록에 작성된 내용이 추가된다. ✔️
• 추가된 내용은 수정할 수 있다. ✔️
• 할 일 목록은 해결/미해결을 체크박스를 이용해 처리할 수 있다. ✔️
• 리스트는 전체/해결/미해결로 분리해서 나열할 수 있다. ✔️
• (선택사항) 우선순위 높은순/낮은순으로 정렬할 수 있다. ✔️

차근차근 해보자 !

01. 기본 틀 생성

우선 todo.html 을 생성했다.

그림판으로 어떤 식으로 화면을 구상할 지 틀 그려보기 !

컨테이너 상세 스타일은 내가 자주 쓰는 폼을 긁어 왔다.

이번 컨셉 색상은 그린으로 해보자 🌵

body 태그 안에 제목 + div 태그 지정하기

• body 와 container 영역을 지정하고 제목을 컨테이너 위에 배치했다.
  

02. 할 일 작성 입력폼 생성

할 일을 입력하는 입력폼을 추가해보자

03. 우선순위를 선택할 select 박스 추가

할 일의 우선순위를 지정할 수 있는 select 박스 생성 + add할 버튼 추가

04. 할 일 목록에 작성된 내용이 추가되는 동작 구현

• 할 일 목록을 나타낼 리스트 부분을 목록 태그인 ul로 생성해주기
  

• javascript 작성

document.getElementById("addBtn").addEventListener("click", function () {
            addTask();
        });

        function addTask() {
            // 입력 필드에서 할 일과 우선순위를 가져오기
            var taskInput = document.getElementById("taskInput");
            var priorityCheckbox = document.getElementById("priorityCheckbox");
            var task = taskInput.value;
            var priority = priorityCheckbox.value;

            if (task.trim() === "") {
                alert("할 일을 입력하세요!");
                return;
            }

            // 새로운 리스트 아이템 생성
            var listItem = document.createElement("li");
            listItem.innerHTML = "<strong>" + priority + "</strong>: " + task;

            // 할 일 목록에 추가
            document.getElementById("todoList").appendChild(listItem);

            // 입력 필드 초기화
            taskInput.value = "";
        }

script 동작

++ 추가 설명

• 테스트
  작성한 할 일이 잘 추가 되고 있다 !!
  

05. 우선순위 높은순/낮은순으로 정렬하기

• 우선순위를 비교할 때는 일반적으로 문자열보다는 숫자 값이 더 적합 !
  ➜ 우선순위 값을 숫자로 변경
  

• 우선 순위 정렬 버튼 추가
  

• script 코드를 작성하여 DOM을 조작하자

document.getElementById("sortBtn").addEventListener("click", function () {
    sortTasksByPriority();
});

function sortTasksByPriority() {
            var todoList = document.getElementById("todoList");
            var items = todoList.children;

            // 배열로 변환
            var itemsArray = Array.from(items);

            // 우선순위에 따라 정렬
            itemsArray.sort(function (a, b) {
                var priorityA = getPriorityValue(a.innerText);
                var priorityB = getPriorityValue(b.innerText);

                if (priorityA < priorityB) return 1;
                if (priorityA > priorityB) return -1;
                return 0;
            });

            // 정렬된 목록으로 교체
            todoList.innerHTML = "";
            itemsArray.forEach(function (item) {
                todoList.appendChild(item);
            });
        }

        function getPriorityValue(text) {
            var match = text.match(/\d+/);
            return match ? parseInt(match[0]) : 0;
        }

💥 테스트
버튼을 누르면 우선순위가 높은 순으로 정렬된다 !

06. 우선 순위 구분하기

여기까지 하면 option 값을 숫자로 변환했기 때문에 보기에는 우선 순위를
판별하기 어려우므로 바꿔보자 !!

• style 태그 안에 각 우선순위에 대한 클래스와 색상을 추가
  

• 해당 클래스를 listItem에 추가하기

수정 전

listItem.innerHTML = "<strong>" + priorityText + "</strong>: " + task;

수정 후

	listItem.innerHTML = "<strong class='priority-" + priority + "'>" + priorityText + "</strong>: " + task;  

• 테스트

너무 찐한가 ?.. 덜 찐한 버전

추후 아이콘으로 변경해주자 !

07. 할 일 목록 체크박스 추가 / 리스트 분리 나열

• 할 일 목록은 해결/미해결을 체크박스를 이용해 처리할 수 있다.
• 리스트는 전체/해결/미해결로 분리해서 나열할 수 있다.

전체 / 해결 / 미해결 버튼 추가

++ 동작 설명 추가

• 테스트
  리스트가 체크 유무에 따라 분리되어 나열되어 나타난다 !!

ui 수정 필요 !!

🧊 과정

어?? 리스트를 추가할 때마다 요상하게 들쑥 날쑥한다

이리 저리 만지다가 뭔가 잡히긴 했는데 수평이 되긴 했는데 음 !
이번엔 짧게 글을 쓰면 한 라인에 2개의 글이 들어가기도 한다 옴마이갓

이번엔 한 줄에 글 하나만 나오게는 됐는데 왼쪽 정렬해도 이렇게 요란하게 나타난다.

🧊 해결

align-items: flex-start; 속성이 #todoList 내의 각 아이템을 왼쪽으로 정렬해준다 !!

이제 한 라인에 하나의 글만 나오고 왼쪽으로 정렬되어 나타나고 있다.

고치고 싶은 부분은
1. 체크박스가 우선순위 값 왼쪽에 위치 했으면 좋겠고
2. 수정,삭제 버튼이 텍스트 길이에 상관 없이 오른쪽에 고정되면 어떨까싶은데

해보자 !!

💡 체크박스 왼쪽 배치
checkbox를 listItem에 추가할 때 우선순위와 할 일 앞에 추가하여 li 요소에 맨처음으로 들어가게 된다 !

💡 텍스트 길이 상관 없이 버튼 고정

createListItem 함수에 추가 코드
수정과 삭제 버튼을 감싸는 div 요소를 생성한 후 이를 listItem에 담아 반환

css 수정 -> 수정과 삭제 버튼이 텍스트에 상관 없이 배치된다.

결과

++ 이렇게 하면 체크박스 체크했을 때 버튼까지 같이 선 그이고
미완료/완료에 이상하게 구분되어 들어가고
그걸 고치면 또 정렬이 바뀌고 하나를 고치면 다른게 바뀐다...
무한 굴레 하다가 빠져 나옴 !!

gpt샘이랑도 계속 무한굴레에 빠져 있다가
머릿속에 지나간 속성 하나 position : fixed !!!!

위에 버튼 감싸고 했던 코드들 싹 지우고 입력폼에 글자 수 제한 걸고
수정,삭제 각 버튼에 fixed 로 고정값을 넣어서 고정해주었다.
이것보다 더 좋은 방법이 있을지도 모르지만
우선 계속 헤매다가 좀 더 깔끔해지고 체크 선 그이는 것도 잘 된다 !!

08. 작성한 할 일 수정

수정 구현 js

모달 창 생성

결과