feb-dain / js-todo-list

📑 To-do List with Vanilla JavaScript

To-do List

📑 To-do List with Vanilla JavaScript

ver 2. (Updated on 24th Sep.)

#Light Mode

#Dark Mode

ver 1.

#Light Mode

#Dark Mode

- 반응형으로 만들어 PC, 태블릿, 모바일, 어디서든 이용할 수 있습니다.

- 설정한 모드(다크 모드/라이트 모드), 사용자의 이름과 할 일을 LocalStorage에 저장하여 새로고침해도 바뀌거나 사라지지 않습니다.

- 사용자 위치 정보는 geolocation을, 날씨 API는 Fetch를 이용해 호출했습니다. 위치 정보를 동의할 경우, 현재 위치한 지역의 온도를 알 수 있습니다. 날씨가 좋을 경우, 왼쪽 상단에 “오늘 날씨가 좋아요”라는 문구가 뜨도록 만들었습니다.

- 오른쪽 상단에는 시계와 다크 모드를 키고 끌 수 있는 버튼을 만들었습니다.

- 하단에는 math 메서드를 이용해 랜덤한 명언이 나오도록 했습니다. 매일 할 일을 완수할 수 있도록 의지를 북돋아 줄 수 있는 명언으로 선정했습니다.

+ ver 2) 목록 옆 휴지통 아이콘 클릭 시 LocalStorage에 저장된 모든 할 일 목록들을 삭제할 수 있도록 했습니다.

+ ver 2) 모든 할 일 목록들을 삭제하기 전에 모달창을 띄워 실수로 모든 할 일 목록들이 사라지는 일을 방지했습니다.

+ ver 2) 왼쪽 상단에 햄버거 아이콘을 추가해 프로필 사진을 업로드/수정할 수 있게 만들었습니다. 나가기 버튼 클릭 시 LocalStorage에 저장된 모든 정보들(이름, 할 일 목록)을 삭제하도록 만들었습니다.

+ ver 2) 나가기 전에 모달창을 띄워 저장된 모든 정보들이 실수로 사라지는 일을 방지했습니다.

- 최대한 깔끔하고 직관적인 디자인으로 만들어 사용자가 이용하기 편하도록 만들었습니다.

- 영어를 몰라도 편하게 사용할 수 있도록 영어를 전혀 쓰지 않고 모두 한글로만 이루어진 To-do List를 만들었습니다.

🔗 해당 사이트로 이동