Vanila Javascript Chrome-Momentum Clone Coding

작업 개요

작업 기간

2023.01.23. ~ 2023.02.05

작업 멤버

강의를 들으며 1인 프로젝트로 진행

작업물

클론의 모멘텀을 클론 코딩한 페이지를 제작 컨셉은 책으로, 사용자가 책을 펼쳐 내용을 기재하는 느낌을 의도함

챌린지

노마드 코더 사이트에서 진행하는 바닐라 JS 챌린지를 통해 제작했음.

챌린지 졸업 조건 및 구현 여부

1. 실시간 시계: YYYY년 MM월 DD일 HH시 MM분 SS초 형식의 시계 구현
2. 로컬 스토리지를 사용한 로그인: key:"user" 을 이용한 로그인 구현
3. 로컬 스토리지를 사용한 투두리스트:

• 작성한 투두는 key:${User === null? "unknown-user" : User }Todos 에 저장되도록 함
• 완료 체크한 투두는 원래 있던 로컬 스토리지 키에서 지워지고 key:${User === null? "unknown-user" : User }Done에 저장되도록 구현함
• 완료 체크한 투두는 색이 변하고 내용에 가로줄이 그어지도록 함
• 삭제 버튼을 누른 투두는 완료 체크 여부와 관계없이 로컬 스토리지에서 삭제되도록 함
• 페이지가 리로드 돼도 로컬 스토리지의 key:"user"에 저장된 이름에 따라 내용과 체크(완료 체크) 여부가 저장되도록 함

4. 랜덤 배경 이미지: 컨셉을 지키고 싶어서 배경 대신에 책의 삽화처럼 넣음. 10초마다 바뀜
5. 날씨와 위치 (geolocation): 날씨, 위치, 온도 정보를 가져오는 기능을 구현함. 정보를 가져올 수 없는 경우 미지의 날씨, 위치, 온도로 표시함
6. 여러분의 CSS 실력을 뽐내주세요💖: 최선을 다했습니다만...

구현한 기능

1. 밤/낮 모드: 버튼 클릭을 통해 낮과 밤 모드를 오갈 수 있음. 배경화면 색, 배경화면 이미지, 텍스트 색, 스크롤 색, 버튼 색 등에 변화가 나타남
2. 로그인: 로컬 스토리지를 이용
3. 투두리스트: 로컬 스토리지를 이용한 투두리스트. 유저 정보에 기반해 내용, 완료 체크 사실을 저장함
4. 실시간 시계: 초 단위로 제공하는 실시간 시계
5. 날씨, 위치, 온도: 유저의 위치정보를 받아 제공함
6. 삽화(랜덤 이미지): 랜덤으로 10초마다 이미지를 바꿈
7. 문장: 10초마다 랜덤 문장, 문장에 해당하는 책 제목을 제공. 책 제목에는 애니메이션 적용
8. 사이트: 아이콘을 누르면 해당 사이트로 이동함

학습한 기능

HTML

CSS

JAVASCRIPT