Roxylife
Roxy 빛나는 새벽
Roxylife
전체 방문자
오늘
어제
  • 분류 전체보기
    • 개발(회고록)현황일기
    • 개발CS지식
    • 알고리즘문제풀기
    • Git
    • 개발언어
      • HTML, CSS
      • JavaScript
    • 프론트엔드
      • React
    • Side Project
      • 혼자Project
      • 팀Project
    • 교육참여
      • [스파르타코딩클럽]
      • [저스트코드]

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 회고록
  • 저스트코드
  • 노마드코더
  • git
  • 팀프로젝트
  • 코딩교육
  • 스터디코드
  • 드림코딩
  • 바닐라JS크롬앱
  • JUSTCODE6기
  • 저스트코드6기
  • JUSTCODE
  • 스파르타코딩클럽
  • 스파르타코딩클럽후기
  • 신년운세코딩패키지
  • 힙한취미코딩이벤트
  • 기업협업
  • 코코아톡클론
  • JavaScript
  • 개발

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Roxylife
Side Project/혼자Project

[혼Project] TO Do List (230706)

[혼Project] TO Do List (230706)
Side Project/혼자Project

[혼Project] TO Do List (230706)

2023. 7. 7. 22:29

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;
}
  • 1. 개요
  • 2. 구현 페이지
  • 3. 느낀 점
Roxylife
Roxylife
꿈나무 FE개발자

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.