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;
}