안녕하세요
오늘은 간단하게 날씨를 알려주는 어플리케이션을 만들어 보았습니다.
날씨 API를 이용해서
- 현재 온도
- 현재 위치
- 날씨정보
- 날씨 아이콘
등을 통해서 사용자에게 날씨를 알려주는 간단한 어플을 만들려고 했습니다.
다음으로 코드작성을 해보겠습니다.
1. HTML 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>now weather?</title>
</head>
<body>
<div class="container">
<h1>지금 날씨는</h1>
<span class="weatherInfo"></span>
<img class="weatherIcon">
</div>
</body>
<script src="app.js"></script>
</html>
2. CSS 파일
* {
padding: 0;
margin: 0;
}
body {
background: linear-gradient(45deg, #4fc3f7, #0093c4 );
}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container * {
margin: 10px;
color: #fce4ec;
}
.container h1 {
font-size: 3em;
}
.weatherInfo {
font-size: 1.5em;
}여기서 포인트는
- 첫번째로 linear-gradient를 사용해서 그라데이션을 할 수 있다는 것입니다.
- 두번째로 height: 100vh로 설정하고 flex를 이용해서 container클래스의 div태그를 정중앙으로 옮길 수 있었습니다.
추가적으로 Color Tool 이라는 사이트를 사용하니 정말 간단하게 마음에 드는 색상을 고를 수 있었습니다.
https://material.io/resources/color/#!/?view.left=0&view.right=0
3. Javascript 파일
const API_KEY = "#"; //add your API KEY
const COORDS = 'coords'; //좌표를 받을 변수
//DOM객체들
const weatherInfo = document.querySelector('.weatherInfo');
const weatherIconImg = document.querySelector('.weatherIcon');
//초기화
function init() {
askForCoords();
}
//좌표를 물어보는 함수
function askForCoords() {
navigator.geolocation.getCurrentPosition(handleSuccess, handleError);
}
//좌표를 얻는데 성공했을 때 쓰이는 함수
function handleSuccess(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude
};
getWeather(latitude, longitude); //얻은 좌표값을 바탕으로 날씨정보를 불러온다.
}
//좌표를 얻는데 실패했을 때 쓰이는 함수
function handleError() {
console.log("can't not access to location");
}
//날씨 api를 통해 날씨에 관련된 정보들을 받아온다.
function getWeather(lat, lon) {
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric&lang=kr`).then(function(response) {
return response.json();
})
.then(function(json) {
//온도, 위치, 날씨묘사, 날씨아이콘을 받는다.
const temperature = json.main.temp;
const place = json.name;
const weatherDescription = json.weather[0].description;
const weatherIcon = json.weather[0].icon;
const weatherIconAdrs = `http://openweathermap.org/img/wn/${weatherIcon}@2x.png`;
//받아온 정보들을 표현한다.
weatherInfo.innerText = `${temperature} °C / @${place} / ${weatherDescription}`;
weatherIconImg.setAttribute('src', weatherIconAdrs);
})
.catch((error) => console.log("error:", error));
}
init();
API KEY 얻는 방법
1. https://openweathermap.org/ 해당 날씨 api사이트에서 회원가입을 합니다.
2. 그리고 화면 상단에서 My API Keys로 가서 API KEY를 얻을 수 있습니다.
완성한 모습
깔끔하게 날씨가 뜨는 것을 알 수 있습니다.
몰랐던 점 & 해결법
- css - flex로 div태그 정중앙에 배치하기
- api 사용하기 - JS fetch함수 - https://www.daleseo.com/js-window-fetch/
- 날씨 api 사용법 - https://openweathermap.org/current#data
- 섭씨,화씨
- 언어
- 아이콘 사용법 - https://openweathermap.org/weather-conditions
- 컬러는 어디서?
- https://material.io/resources/color/#!/?view.left=0&view.right=0
- 해당 사이트에서 컬러를 고를 수 있다.
- 현재 위치 가져오는 법 - navigator - https://csdrive.tistory.com/17
참고한 사이트
