728x90
안녕하세요 오늘은 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>날씨 정보 대시보드</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">날씨 정보 대시보드</h1>
<input type="text" id="city-input" class="border p-2 w-full" placeholder="도시 이름 입력...">
<button onclick="fetchWeather()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-3">
날씨 조회
</button>
<div id="weather-result" class="mt-6">
<!-- 날씨 정보가 여기에 표시됩니다 -->
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다.
async function fetchWeather() {
console.log('fetchWeather')
let city = document.getElementById('city-input').value.trim();
if (city) {
let apiKey = '발급받은 내 API 키'; // OpenWeatherMap API 키
let url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=kr`;
try {
let response = await fetch(url);
console.log(response)
let data = await response.json();
console.log(data)
displayWeather(data);
} catch (error) {
console.error('날씨 정보를 가져오는데 실패했습니다.', error);
}
}
}
function displayWeather(data) {
let weatherDiv = document.getElementById('weather-result');
weatherDiv.innerHTML = `
<h2 class="text-xl">${data.name}의 날씨</h2>
<p>온도: ${data.main.temp}°C</p>
<p>상태: ${data.weather[0].description}</p>
`;
}
그러면 다음과 같은 결과물을 얻을 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 마우스 이펙트 만들기 (0) | 2024.02.25 |
|---|---|
| [JavaScript] OpenWeatherMap API 사용하여 입력한 도시의 향후 5일 동안의 날씨 예보 정보 가져오기 (0) | 2024.02.21 |
| [JavaScript] 블록 익스플로러에 비트코인 조회 기능 추가하기 (0) | 2024.01.09 |
| [JavaScript] DeepLink 사용해서 유튜브 앱 열기 (0) | 2024.01.06 |
| [JavaScript] 이더리움 익스플로러에 조회 기능 추가하기 (2) | 2024.01.04 |
