Skip to content

2sumin2/Chrome-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Chrome-App

Vanilla JS로 Chrome-App 만들기

1. Login Page

2. Main Page 1 - weekly to do

3. Main Page 2 - monthly to do


  1. 로컬 스토리지를 사용한 로그인
    • 사용자 이름 입력받기
      • 로컬 스토리지에 사용자 이름이 저장되어 있지 않다면 입력받음
    • 사용자 이름 표시하기
      • 로컬 스토리지에 사용자 이름이 저장되어 있다면 로그인 하지 않고 사용자 이름 불러와서 출력하기

  2. 실시간 시계
    • 오늘 날짜 표시
    • 현재 시간 표시, 매초마다 업데이트
  3. 디데이
    • 로컬 스토리지에 저장되어 있는 디데이가 있으면 출력

  4. 메모
    • 로컬 스토리지에 저장되어 있는 메모가 있으면 출력

  5. 날씨와 위치 (geolocation)
    • 현재 위치한 도시와 현재 기온 표시
    • 현재 날씨 아이콘 표시

  6. 배경 색상 변경
    • 배경 색상 랜덤 출력
    • Color버튼으로 원하는 배경색 선택 후 출력

  7. 로컬 스토리지를 사용한 투두리스트
    1. 주간 투두 리스트
      • 요일별로 할일 입력받기
        • 빈칸은 입력되지 않음
        • 할 일 목록에 출력
        • 로컬 스토리지에 저장
      • 할일 삭제
        • x 버튼으로 목록과 로컬 스토리지에서 삭제
      • 완료된 일은 체크
        • 빈칸 버튼을 체크표시로 변경
        • 로컬 스토리지에 완료된 일으로 업데이트
      • 목록 전체 삭제
        • 주간 할일 목록 내용 전체 삭제
    2. 월간 투두 리스트
      • 이번 달의 달력 출력
        • 오늘 날짜에 해당하는 날은 배경책 채워짐
        • 왼쪽 화살표 버튼 누르면 이전 달의 달력 표시
        • 오른쪽 화살표 버튼 누르면 다음 달의 달력 표시
      • 날짜별로 할일 입력받기
        • 빈칸은 입력되지 않음
        • 할 일 목록에 출력
        • 로컬 스토리지에 저장
      • 할일 삭제
        • x 버튼으로 목록과 로컬 스토리지에서 삭제
      • 완료된 일은 체크
        • 빈칸 버튼을 체크표시로 변경
        • 로컬 스토리지에 완료된 일으로 업데이트
      • 목록 전체 삭제
        • 월간 할일 목록 내용 전체 삭제

  8. 창 크기에 따른 이벤트

About

Vanilla JS로 Chrome App 만들기 + 투두리스트, 캘린더

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published