[혼Project] TO Do List (230706)

1. 개요

• 프로젝트 이름 : To Do List
• Github : https://github.com/Roxy100/to-do-list
• 배포주소 : https://roxy100.github.io/to-do-list/
• 사용한 기술스택 : HTML5, CSS3, JavaScript

2. 구현 페이지

전체 페이지

• input칸에 텍스트 입력(Enter) 하게 되면, 파란색칸으로 생성되는 칸!
• 완료한 것을 체크하고 싶을 때, 파란색 칸이 -> 회색칸으로 바뀜!
• 리스트가 많아질 때, 오른쪽 스크롤바 css 생성 (-webkit-scrollbar 이용)
• 삭제하고 싶을 때, 빨간색 x 버튼 누름!

3. 느낀 점

• 기본적인 포트폴리오 컨셉을 먼저 TodoList로 진행하고 싶었다.
  아이템 생성 및 삭제는 강의에서 배운 북마크 추가 프로젝트로 인해 복습한 느낌으로 익숙해져 있는 코드였고,
  아이템 선택시 바탕색깔이 변한 것 및 내가 css로 만든 체크표시 되게끔 만드는 classList.toggle 함수를 이용하는 걸 새로이 알게 되었다.

classList.toggle(String [, force]) :

하나의 인수 값의 경우 -> 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.

let addItem = (inputBox) => {
  let listItem = document.createElement("li");
  listItem.innerHTML = `${inputBox}<i></i>`;

  // 아이템 선택시 '완료체크' 및 색깔 바뀜 
  listItem.addEventListener("click", function (e) {
    this.classList.toggle("done");
  });

  listItem.querySelector("i").addEventListener("click", function (e) {
    listItem.remove();
  });

  list.appendChild(listItem);
};

• 그리고 기본적인 스크롤바 모양이 기본 배경에 어울리지 않아서 직접 css하는 것으로 선택함.
  그러기 위해서는 계속 궁금해왔던 ::-webkit-scrollbar 이용을 해야했다.

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background: #fff;
}