[JS] Todo-List

목표

1. 할 일 클릭 시, 완료체크표시하기

2. 삭제 버튼 클릭 시, 해당할 일만 삭제

3. todo 할일 내용 localStorage에 저장/삭제하기

4. todo 할일은 객체로 저장해서 관리하기

메인 화면

<body>
  <div class="container">
    <h1 class="title">TO DO LIST</h1>

    <ul class="todo-list"></ul>

    <form id="todo-form">
      <input type="text" placeholder="TO DO..." name="todo" id="todo" autocomplete="off">
      <button class="add-btn" type="submit" value="추가">추가</button>
    </form>
  </div>
</body>

todo main

.todo-list{
  width: 100%;
  height: 630px;
  padding: 15px 20px;

  background-color:#d1ccc0;

  overflow-y: scroll;

  display: flex;
  flex-direction: column;
  align-items: end;
}
/* 스크롤바 css */
.todo-list::-webkit-scrollbar{width: 10px;}
.todo-list::-webkit-scrollbar-thumb{background-color: #9e9696;}
.todo-list::-webkit-scrollbar-track{background-color: #d1ccc0;}

스크롤바를 처음부터 표시되게 해서 스크롤바가 생성될 때 화면이 옆으로 이동되는 것을 방지함

todo li

/* 말풍선 */
ul > li{
  width: 300px;
  height: auto;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px 20px;
  margin-bottom: 10px;
  /* 길어진 글자 줄바꿈 */
  word-break: break-all;

  list-style-type: none;
  cursor: pointer;

  position: relative;
}
ul > li::after{
  content: "";
  position: absolute;
  top: 10px;
  right: -10px;
  width: 0;
  height: 0; 
  border-bottom: 16px solid transparent;
  border-left: 16px solid rgb(255, 255, 255);
}

::after 로 todo의 마지막 말풍선꼬리를 생성했습니다.
: 선택한 element(s) 뒤에 가상 콘텐츠 삽입

todo 생성

//추가 될 할일 객체 리터럴
const toBeAdded = {
  todoText: todoForm.todo.value,
  todoId: new Date().getTime(),
  todoDone: false
}
todoArr.push(toBeAdded);

객체에 todo 저장
new Date().getTime() 으로 고유한 ID값 생성
단점으로는 new Date()로 반환하는 타임스탬프는 시간 값의 또 다른 형태이므로
여러 사용자가 이용하는 서비스에서 동시에 ID가 생성될 경우 중복된 값이 발생할 수 있다.

todo 삭제

// 할일 삭제하기
function handleDeleteBtnClick(clickedId){
  //클릭된 ID에 해당되는 요소만 삭제
  //배열에서 내가 클릭한 하나만 빼고 나머지를 filtering 해서 남겨야한다
  todoArr = todoArr.filter(function(aTodo){
    console.log(`Todo: ${aTodo.todoId}`);
    console.log(`선택한 ID: ${clickedId}`);
    
    //클릭한 item이랑 달라야지 true
    return aTodo.todoId !== clickedId
  })
  displayTodo();
  saveTodos();
}

배열에 filter로 선택한 todo item을 제외하고 나머지는 남기기

삭제 버튼

//삭제버튼
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('delete-btn');
deleteBtn.title = '클릭하면 삭제됨';
deleteBtn.textContent = '❌';
todoItem.appendChild(deleteBtn);

삭제버튼 생성

//삭제버튼 클릭시
deleteBtn.addEventListener('click', function(){
  handleDeleteBtnClick(aTodo.todoId);
})

삭제버튼 클릭 시

todo 수정

.done{
  background-color: #afaeae;
  text-decoration: line-through;
  color: rgb(93, 93, 93);
}
.done::after{
  border-left: 16px solid rgb(175, 174, 174);
}

완료상태의 todo style 변경

//할일 수정하기
function handleTodoItemClick(clickedId){
  todoArr = todoArr.map(function(aTodo){
    if(aTodo.todoId === clickedId){
      return {
        //기존의 aTodo내용에다가 todoDone을 반전시켜서 줘라(! False를 True를.True를 False로)
        ...aTodo, todoDone: !aTodo.todoDone
      }
    }
    else{
      return aTodo;
    }
  })
  displayTodo();
  saveTodos();
}

선택한 todo item의 id를 check 해서 일치하면 todoDone 상태 변화하기
... 문법 (= spread operator = 펼침연산자)
: ...은 [] 괄호를 제거해 주는 문법

var text = 'abcd';
console.log(...text); // a b c d

사용하는 곳

1. Array 합치기

var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b];

console.log(c); // [1,2,3,4,5]

2. Array 복사

var a = [1,2,3];
var b = [...a];

console.log(a); //[1,2,3]
console.log(b); //[1,2,3]

a = [1,2,3,4];

console.log(a); //[1,2,3,4]
console.log(b); //[1,2,3]

3. Object를 합치기거나 복사할 때

var item1 = { a : 1, b : 2 };
var item2 = { c : 3, ...item1 };
console.log(item2); // {c : 3, a : 1, b : 2}

var item1 = { a : 1, b : 2};
var item2 = { a : 3, ...item1 };
console.log(item2); //{a: 1, b: 2}

*하지만 만약 위의 코드처럼 key값이 겹쳐진다면 뒤에 오는 item1의 a가 이긴다

localStorage 에 save/load

//로컬스토리지에 저장
function saveTodos(){
  //배열에 객체가 저장되있으면 stringify 해줘야 저장이 된다
  const todoString = JSON.stringify(todoArr);
  localStorage.setItem('myTodos', todoString);
}

배열에 객체가 저장돼있으면 stringify 해줘야 저장이 된다

//로컬스토리지에서 가져오기
function loadTodos(){
  const myTodos = localStorage.getItem('myTodos');
  if(myTodos !== null){
    //가져온 item을 parse 해서 저장하기
    todoArr = JSON.parse(myTodos);
    displayTodo();
  }
}
loadTodos();

마무리

추후 공부가 필요한 개념

1. {,,,} 문법 공부하기

2. document.getElementById / querySelector / querySelectorAll / getElementsByClassName 개념 다시 공부하기

3. 고유 ID 만드는 다양한 방법

'DEVELOPMENT > JavaScript' 카테고리의 다른 글

[JS] 정규표현식 (RegExp) (0)	2024.06.21
[JS] let,const 와 var (2)	2024.05.22
[JS] 견종 정보 페이지 (3)	2024.05.03
[JS] Random Number Game (0)	2024.04.30
[JS] 로또 추첨 (1)	2024.04.30