[혼공JS] 미니 프로젝트 2 - Todo list

chatgpt 선정 입문용 프로젝트 2번째 Todo list를 만들어 볼 시간입니다.

 

아니 근데 이미 DOM객체 조작에서 다 한거 아니냐구요?

맞습니다. 하지만 이번엔 조금더 추가하여 만들어 보려고 합니다.

이름하여 뽀모도르 투두리스트

 

저는 업무나 공부를 하다보면 30분 40분이 넘어가면 집중력이 흩어지고 생각이 어지러워지는데

이번에 만들어내는 Todo로 도움이 되었으면 좋겠습니다.

 

프로젝트명 : TO-DO list & 타이머

기능 정의

입력칸에 Todo를 넣으면 객체 또는 배열에 저장됨

저장된 Todo를 리스트로 출력함

삭제버튼을 누르면 Todo를 삭제함

시작 버튼을 누르면 타이머가 동작함 (30분)

타이머를 이용한 뽀모도르 및 타이머 완료후 todo 완료기능(취소선) 구현

css 는 부트스트랩 대체!

 

분명 책으로 진행할때는 쉬웠는데...

혼자 진행하려고 하니 빡대가리라 어려웠습니다... 

그리고 부트스트랩 너무 좋아요 ! 여러분도 꼭 쓰세요!

CSS너무 싫어...

 

스크립트 코드

<script>
    //이벤트 리스너 
    document.addEventListener('DOMContentLoaded', function () {
        //getElementById 조작준비
        const addTodoBtn = document.getElementById('addTodoBtn');
        const todoInput = document.getElementById('todoInput');
        const todoList = document.getElementById('todoList');
        const timerDisplay = document.getElementById('timerDisplay');
        
        //타이머 와 남은 시간 ,그리고 현재 todo 위치
        let timer;
        let secondsLeft = 30 * 60; // 30분
        let currentTodo = null;
        
        //버튼을 누르면 creatTodo함수 사용
        addTodoBtn.addEventListener('click', createTodo);
        
        function createTodo() {
            //공백 제거 텍스트
            const todoText = todoInput.value.trim();
            
            if (todoText !== '') {
                //현재 todoItem 생성 & 저장
                const todoItem = document.createElement('div');
                //부트스트랩 속성 추가 : list-group-item(리스트로 만들어줌), list-group-item-action(리스트 누르기 가능)
                todoItem.classList.add('list-group-item', 'list-group-item-action');
                //내용물 = todoText(입력한것)
                todoItem.textContent = todoText;
                
                //스타트 버튼 누르면
                const startBtn = document.createElement('button');
                startBtn.classList.add('btn', 'btn-success', 'btn-sm', 'ms-1','float-end');
                startBtn.textContent = 'Start';
                //스타트 버튼 클릭하면
                startBtn.addEventListener('click', function () {
                    //타이머를 다시 리셋
                    clearInterval(timer);
                    secondsLeft = 30 * 60; //30분으로 다시 원복
                    startTimer(todoItem); //현재 todoItem을 스타트타이머 함수에 넘김
                });
                
                //삭제 버튼
                const deleteBtn = document.createElement('button');
                deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm', 'ms-1','float-end');
                deleteBtn.textContent = 'Delete';
                deleteBtn.addEventListener('click', function () {
                    todoItem.remove();
                });
    
                //todo아이템에 버튼 추가 , 아이템 -> 리스트에 추가
                todoItem.appendChild(deleteBtn);
                todoItem.appendChild(startBtn);
                todoList.appendChild(todoItem);
                //인풋 초기화
                todoInput.value = '';
            }
        }

        //스타트 버튼 누르면
        function startTimer(todoItem) {
            //1초마다 반복 함수
            timer = setInterval(function () {
                //남은 시간이 0초일때
                if (secondsLeft === 0) {
                    clearInterval(timer);
                    timerDisplay.textContent = '00:00';
                    // 현재 todo에 취소선을 그어줌
                    todoItem.classList.add('completed');
                } else {
                    //0초가 아니면 남은 시간을 빼면서 계속해서 업데이트 
                    const minutes = Math.floor(secondsLeft / 60);
                    const seconds = secondsLeft % 60;
                    //디지털 시계처럼 00:00으로 만들기
                    timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
                    secondsLeft--;
                }
            }, 1000);
        }
  });
</script>

 

실제 프로젝트

원래는 반으로 나눠서 왼쪽 오른쪽으로 나와야 하지만 블로그 크기로 인해 줄넘김이 되어버렸습니다