안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다.
OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다.
api키를 발급 받은 후
index.html 파일에 다음과 같이 코드를 작성해줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>5일 날씨 예보</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
<div class="container mx-auto p-8">
<h1 class="text-2xl font-bold mb-6">5일 날씨 예보</h1>
<input type="text" id="city-input" class="border p-2 w-full" placeholder="도시 이름 입력...">
<button onclick="fetchForecast()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-3">
예보 조회
</button>
<div id="forecast-result" class="mt-6">
<!-- 날씨 예보가 여기에 표시됩니다 -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다.
async function fetchForecast() {
let city = document.getElementById('city-input').value.trim();
if (city) {
let apiKey = '발급받은 자신의 API 키'; // OpenWeatherMap API 키
let url = `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}&units=metric&lang=kr`;
try {
let response = await fetch(url);
let data = await response.json();
displayForecast(data);
} catch (error) {
console.error('날씨 예보 정보를 가져오는데 실패했습니다.', error);
}
}
}
function displayForecast(data) {
let forecastDiv = document.getElementById('forecast-result');
forecastDiv.innerHTML = '<h2 class="text-xl mb-4">3시간 간격 날씨 예보</h2>';
data.list.forEach(item => {
forecastDiv.innerHTML += `
<div class="mb-3">
<p><strong>${new Date(item.dt_txt).toLocaleString()}</strong></p>
<p>온도: ${item.main.temp}°C</p>
<p>상태: ${item.weather[0].description}</p>
</div>
`;
});
}
그러면 다음과 같은 결과물을 얻을 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [Javascript] 다운로드 이미지 미리보기 만들기 (0) | 2024.03.05 |
|---|---|
| [JavaScript] 마우스 이펙트 만들기 (0) | 2024.02.25 |
| [JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 (0) | 2024.02.12 |
| [JavaScript] 블록 익스플로러에 비트코인 조회 기능 추가하기 (0) | 2024.01.09 |
| [JavaScript] DeepLink 사용해서 유튜브 앱 열기 (0) | 2024.01.06 |
