Portfolio

라이브러리 없이 VanilaJS로 만드는 To-Do Application

Awesome-SH 2020. 11. 6. 11:30

과제로 전달받은 라이브러리 도움 없이 To-Do 리스트를 만들어달라는
요구사항을 토대로 기본 자바스크립트에 충실하여 To-Do 리스트를 만들어 보았다.

1. 진입 (Intro)
: 과제 요구사항에는 없던 내용이었는데
아이폰을 처음 부팅했을때 사용자경험 느낌이 좋아 (네! 여기 앱등이 손..)
비슷하게나마 만들어보고 싶었습니다.



2. 할일목록 추가 (Modal)
: 할일 목록을 추가할때 모달을 만들어 입력창을 표출했고
백그라운드를 클릭할때에는 모달창이 닫히도록 하였습니다.



3. 할일목록
: 미완료를 상단에, 완료목록을 하단에 정렬하였습니다.


4. 할일들은 언제든 미완료 <-> 완료로 전환

5. 완료된 항목에 대해서만 삭제버튼이 활성화

6. 데이터들은 브라우저 로컬스토리지(LocalStorage)에 저장

 

 

7. 라이트 & 다크모드 전환

: CSS를 전부 뒤엎는 노가다....

 

 

 

깃헙 (Github)

github.com/awesome-sh

 

awesome-sh - Overview

Software Developer. awesome-sh has 22 repositories available. Follow their code on GitHub.

github.com

Todo Application ( add Demo )

github.com/awesome-sh/todo-list/

 

awesome-sh/todo-list

To-Do Application by SungHwa. Contribute to awesome-sh/todo-list development by creating an account on GitHub.

github.com