바닐라 자바스크립트로 구현한 크롬 앱 Momentum 클론
전체적으로 로컬 스토리지(localStorage)를 활용해 새로 고침 시에도 데이터가 유지되도록 기능 구현
-
시계
new Date()에서 '시간:분' 가져와서setInterval로 1초씩 실행
-
인사말
input에 사용자 이름을 입력하면form을 통해localStorage에 사용자 이름 저장
-
배경 사진
- Unsplash API 활용
- 최초에
fetch를 통해json형식의 random 사진 데이터 받아오기 localStorage에 사진 정보, 만료 시간 저장- 만료 시간이 지나면 사진 데이터를 새로 받아와서 변경하기
-
할 일
- 추가, 삭제, 불러오기:
localStorage활용 - 추가: 할 일(toDo)을 입력하면 toDos
Array에 넣어주기 - 삭제: 버튼을 클릭하면
id에 해당하는 toDo만 삭제하고 새로운 배열 return - 불러오기:
localStorage에 key, value 있으면 불러오기
- 추가, 삭제, 불러오기:
-
위치 기반 날씨
- Open Weather API 활용
- 사용자 위치(브라우저 권한 필요) 가져온 후,
localStorage에 저장 - 가져온 위치(Geolocation) 좌표값(
longitude,latitude)을 이용해 날씨 데이터 가져오기