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="fetchWeatherAndRecommend()" 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 fetchWeatherAndRecommend() {
let city = document.getElementById('city-input').value.trim();
if (city) {
let apiKey = 'b26388c916731ef666906f88bd0ee641'; // 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);
let data = await response.json();
displayWeatherAndRecommendation(data);
} catch (error) {
console.error('날씨 정보를 가져오는데 실패했습니다.', error);
}
}
}
function displayWeatherAndRecommendation(data) {
let weatherDiv = document.getElementById('weather-result');
let temp = data.main.temp;
let recommendation = getRecommendation(temp);
weatherDiv.innerHTML = `
<h2 class="text-xl">${data.name}의 현재 날씨</h2>
<p>온도: ${temp}°C</p>
<p>추천: ${recommendation}</p>
`;
}
function getRecommendation(temp) {
if (temp > 25) {
return '반팔, 반바지, 선크림을 준비하세요!';
} else if (temp > 15) {
return '얇은 긴팔, 긴바지가 좋습니다.';
} else if (temp > 5) {
return '자켓이나 가디건을 챙기세요.';
} else {
return '따뜻한 코트와 모자를 권장합니다.';
}
}
그러면 다음과 같은 결과물을 얻을 수 있습니다.
