/momentum

바닐라 JS로 크롬 앱 만들기

Primary LanguageJavaScript

Momentum

Momentum은 사용자의 위치를 기반으로 실시간 날씨 정보와 온도를 제공하며, 현재 시간을 표시하고 사용자의 이름을 입력하면 해당 사용자를 환영하는 기능을 제공합니다. 또한 Todo 리스트를 작성하고 관리할 수 있어 일정을 효율적으로 관리할 수 있는 웹 애플리케이션입니다.

기능

1. 날씨 정보 표시

Momentum은 사용자의 현재 위치를 기반으로 OpenWeatherMap API를 통해 날씨 정보를 가져와 화면에 표시합니다. 사용자가 위치 서비스에 동의하면, 해당 위치의 날씨와 온도가 실시간으로 업데이트됩니다.

2. 현재 시간 표시

웹 페이지의 상단 중앙에는 현재 시간이 표시됩니다. JavaScript를 사용하여 실시간으로 시간이 업데이트되며, 사용자의 로컬 시간대에 따라 표시됩니다.

3. 사용자 이름 입력 및 환영 메시지 표시

웹 페이지 최초 접속 시, 사용자는 자신의 이름을 입력할 수 있는 로그인 폼이 제공됩니다. 사용자 이름을 입력하고 '로그인' 버튼을 클릭하면, 환영 메시지와 함께 사용자의 이름이 화면에 표시됩니다. 이후에는 이름 입력 없이도 사용할 수 있습니다.

4. Todo 리스트 관리

사용자는 웹 페이지 하단에 위치한 Todo 리스트에 할 일을 추가할 수 있습니다. 각 항목에는 할 일 내용과 삭제 버튼이 포함되어 있으며, 사용자가 할 일을 완료하면 해당 항목을 삭제할 수 있습니다.

5. 새로 고침 시 데이터 유지

웹 페이지를 새로 고침하거나 페이지를 닫았다가 다시 열어도, 사용자의 이름과 Todo 리스트가 유지됩니다. 이를 로컬 스토리지를 사용하여 구현하였습니다.

6. 랜덤 배경화면 및 명언 표시

Momentum은 사용자 경험을 더 풍부하게 만들기 위해 랜덤으로 선택된 배경화면과 명언을 제공합니다. 각 새로고침 시마다 새로운 배경화면과 명언이 화면에 표시되어, 사용자에게 새로운 시각적인 경험을 제공합니다.

사용 방법

  1. 웹 페이지에 접속하여 사용자 이름을 입력합니다.
  2. 할 일을 추가하고 완료한 항목은 삭제합니다.
  3. 새로 고침하거나 페이지를 닫은 후에도 데이터가 유지되는지 확인합니다.
  4. 다양한 배경화면과 명언이 표시되는지 확인합니다.

설치 및 실행

  1. 이 저장소를 클론합니다.
  2. index.html 파일을 웹 브라우저에서 엽니다.

개발 환경 설정

Momentum은 HTML, CSS, JavaScript로 작성되었습니다. 별도의 개발 환경 설정이 필요하지 않습니다.

기여 방법

  1. 이 저장소를 포크합니다.
  2. 새로운 기능이나 버그 수정을 위한 브랜치를 생성합니다.
  3. 변경 사항을 커밋하고 푸시합니다.
  4. 풀 리퀘스트를 생성합니다.