RARRIT

기억을 너무 믿지 말자

:ledger: JavaScript으로 ToDoList 기능을 만들어 보자!

:one: 요구 사항

  1. 할 일을 추가 할 수 있는 투두 리스트를 만듭니다.
  2. HTML로 기본 구조를 만듭니다.
  3. 자바스크립트로 할 일 추가 기능을 구현합니다.
    • 입력 필드와 “추가” 버튼을 통해 새로운 할 일을 추가합니다.
  4. (선택 사항) CSS로 간단한 스타일을 적용합니다.
  5. (선택 사항) 할 일 항목의 완료 표시, 삭제 기능을 구현합니다.

:two: 사용 언어 및 폴더 구조

  • HTML5, CSS3, JavaScript
  • 📦todoList
    ┣ 📂assets
    ┃ ┣ 📂css
    ┃ ┃ ┗ 📜todoList.css
    ┃ ┗ 📂js
    ┃ ┃ ┗ 📜todoList.js
    ┗ 📜todoList.html

:three: 작성 코드

  • HTML 파일

    <div class="container">
  <div id="todoBox" class="todoBox">
    <h1>To Do List</h1>
    <div class="inputBox">
      <input type="text" id="todoInput" placeholder="할 일을 입력하세요.">
      <button type="button" id="btnAdd">추가</button>
    </div>
    <ul id="todoList">

    </ul>
    <div class="btnBox">
      <button type="button" id="btnDelete">삭제</button>
    </div>
  </div>
</div>

  • JS 파일

    document.addEventListener("DOMContentLoaded", () => {
  const todoList = document.getElementById('todoList');
  const todoInput = document.getElementById('todoInput');
  const todoAddBtn = document.getElementById('btnAdd');
  const todoDeleteBtn = document.getElementById('btnDelete');
  
  // 할일 추가 
  const handleTodoAdd = () => {
    const todoInputVal = todoInput.value; // input의 value를 저장함
    const todoAddHtml = `
      <li class='todoListItem'>
        <input type='checkbox' id='todo-${todoInputVal}'>
        <label for='todo-${todoInputVal}'>${todoInputVal}</label>        
      </li>
    `;
    // console.log(todoAddHtml);
  
    todoList.innerHTML += todoAddHtml; // todoList 에 추가함
    todoInput.value = ""; // 값 초기화    
  }
  
  // 할일 삭제
  const handleTodoDelete = () => {
    const todoListItems = document.querySelectorAll('.todoListItem'); // 현재 생성된 리스트를 찾음
    todoListItems.forEach(target => {
      const valueChk = target.querySelector('input').checked;
      if (valueChk == true) target.remove(); // 리스트 안의 체크박스가 체크되어있으면 해당 li를 삭제한다.
    })
  }
  
  todoAddBtn.addEventListener('click', handleTodoAdd);
  todoDeleteBtn.addEventListener('click', handleTodoDelete);
})

:four: 풀이 과정

  1. 변수 선언
    • todoList : todo 등록 시 list 노출되어야 할 영역
    • todoInput : todo 작성 값
    • todoAddBtn : todo 추가 버튼
    • todoDeleteBtn : todo 삭제 버튼
  2. handleTodoAdd todo 추가 버튼 클릭 시 실행되는 함수
    • 함수가 실행되면, todoInputVal 변수를 통해 현재 input의 값을 변수에 담는다.
    • 등록 할 html 코드를 todoAddHtml 변수에 담은 후 todoList에 뿌려준다.
    • todoInput의 value 값을 초기화한다.
  3. handleTodoDelete todo 삭제 버튼 클릭 시 실행되는 함수
    • 삭제할 todoListItem 중 checkbox 에 checked 된 리스트를 todoListItems변수에 담아준다.
    • forEach문을 통해 todoListItems의 input의 value가 체크되었는지 valueChk변수에 담아준다.
    • if문을 통해 체크가 된 li(todoListItems)를 remove(삭제)해준다.
  4. 완료표시는 css 에서 적용했다.
    체크된 리스트는 폰트를 기울이고 중앙에 라인을 넣어주엇다. 
    #todoList li input:checked + label {
  font-style: italic;
  color: #979595;
  text-decoration: line-through;
}

:pushpin: 적용한 코드

깃헙 링크: ToDoList

:fire: 마무리

투두리스트를 처음 제작 후 다른 사람들이 만든 것을 찾아보았다.
생각보다 더 많은 기능을 제작해서 만든 사람들이 많아서 추후 기능들을 추가해서 업그레이드 해볼 예정!

:pushpin: 기능 추가 예정

  1. 현재 추가된 리스트에 체크 후 삭제 버튼을 클릭해야 체크된 리스트가 삭제되는데, 리스트마다 우측에 삭제 버튼을 추가해서 버튼 누를 시에 삭제되게 적용
  2. todoList를 작성 후 등록하면 리스트 형식으로 날짜별로 리스트 노출

참고