js11 [크롬 앱 만들기] navigator, 날씨 API + 완성 기능 - 사용자의 현재 위치를 표시한다. - 현재 위치의 날씨와 온도를 표시한다. 기술 - navigator의 geolocation을 이용하여 현재의 위도, 경도를 알아낸다. - 알아낸 위도, 경도를 기반으로 API를 이용해 날씨, 온도, 지역 이름 정보를 불러온다. https://openweathermap.org/api - 정보를 불러온 후 html에서 미리 마련한 요소에 정보를 표시한다. - API key는 .gitignore로 감추어서 깃헙에 업로드한다. https://github.com/soaringwave/html-JS-css/tree/main/momentum GitHub - soaringwave/html-JS-css: Studying clone coding Studying clone codin.. 2023. 1. 25. [크롬 앱 만들기] 할 일 목록 만들기 기능 - 할 일을 입력할 수 있다. - 각각 할 일 옆의 버튼을 누르면 해당 할 일을 지울 수 있다. 기술 - 입력 칸에 할 일을 입력받아 localStorage에 저장한다. - localStorage에 저장할 때 특정 모양으로 저장하고 활용할 수 있도록 JSON.stringify(), JSON.parse()를 활용한다. - 할 일을 입력 칸 아래에 표시한다. (forEach()로 할 일을 화면에 표시하는 함수 실행) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach - 할 일 옆의 버튼을 누르면 event를 이용해 해당 요소의 정보를 가져온다. (event.target.parentEl.. 2023. 1. 21. [크롬 앱 만들기] 시계, 명언, 배경 이미지 나타내기 기능 - 실시간 시분초를 나타냈다. - 여러가지 명언과 인물을 저장해 두고 새로고침할 때마다 랜덤으로 표시하도록 했다. (인물과 명언을 구분하기 위해 임시로 인물은 skyblue로 표현했다.) - 무료 이미지를 저장해 두고 새로고침할 때마다 랜덤으로 표시하도록 했다. 기술 - 객체 Date를 이용했다. - Math를 이용하여 저장된 배열에서 랜덤으로 원소를 선택하도록 했다. - JS에서 html에 요소를 추가할 수 있도록 createElement(), appendChild()를 활용했다. 아이디어 사진이나 명언은 사용자가 직접 추가하고 삭제할 수 있도록 만들 계획이다. https://github.com/soaringwave/html-JS-css/commit/c8c1006dd3c42f9fac3f0f279d.. 2023. 1. 20. 이전 1 2 3 다음
