반응형
2. 날씨 API를 이용한 날씨 앱 만들기
프로젝트 개요
이번 프로젝트에서는 JavaScript와 외부 날씨 API를 사용하여 날씨 정보를 제공하는 간단한 날씨 애플리케이션을 만들어보겠습니다. 사용자는 도시 이름을 입력하여 해당 도시의 현재 날씨 정보를 확인할 수 있습니다.
준비물
- HTML
- CSS
- JavaScript
- OpenWeatherMap API (https://openweathermap.org/api)
단계 1: OpenWeatherMap API 키 발급
- OpenWeatherMap 웹사이트(https://openweathermap.org/api)에 가입합니다.
- API 키를 발급받습니다.
단계 2: 기본 HTML 구조 만들기
먼저, 날씨 앱의 기본 HTML 구조를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<form id="weather-form">
<input type="text" id="city-input" placeholder="Enter city name">
<button type="submit">Get Weather</button>
</form>
<div id="weather-result"></div>
</div>
<script src="script.js"></script>
</body>
</html>단계 3: 기본 CSS 스타일링
날씨 앱의 기본 스타일을 정의합니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: space-between;
}
input[type="text"] {
width: 70%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
border: none;
background-color: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#weather-result {
margin-top: 20px;
}단계 4: JavaScript로 기능 구현하기
이제 JavaScript를 사용하여 날씨 정보를 가져오는 기능을 구현합니다.
// script.js
document.addEventListener('DOMContentLoaded', function() {
const weatherForm = document.getElementById('weather-form');
const cityInput = document.getElementById('city-input');
const weatherResult = document.getElementById('weather-result');
const apiKey = 'YOUR_API_KEY'; // OpenWeatherMap에서 발급받은 API 키를 여기에 입력합니다.
weatherForm.addEventListener('submit', function(event) {
event.preventDefault();
const city = cityInput.value.trim();
if (city !== '') {
getWeather(city);
}
});
function getWeather(city) {
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
fetch(apiUrl)
.then(response => response.json())
.then(data => {
if (data.cod === 200) {
displayWeather(data);
} else {
weatherResult.innerHTML = `<p>City not found. Please try again.</p>`;
}
})
.catch(error => {
weatherResult.innerHTML = `<p>Error fetching weather data. Please try again later.</p>`;
});
}
function displayWeather(data) {
const { name, main, weather } = data;
weatherResult.innerHTML = `
<h2>Weather in ${name}</h2>
<p>Temperature: ${main.temp} °C</p>
<p>Weather: ${weather[0].description}</p>
<img src="http://openweathermap.org/img/wn/${weather[0].icon}.png" alt="${weather[0].description}">
`;
}
});결론
이로써 간단한 날씨 애플리케이션을 완성했습니다. 사용자는 도시 이름을 입력하여 해당 도시의 현재 날씨 정보를 확인할 수 있습니다. 이 프로젝트를 통해 JavaScript와 API를 사용하여 데이터를 가져오고 표시하는 방법을 배울 수 있습니다.
다음 글에서는 간단한 게임 개발: 틱택토에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'JavaScript 프로젝트 시리즈' 카테고리의 다른 글
| [JavaScript 프로젝트 시리즈] 6일차: JavaScript로 RESTful API 연동하기 (0) | 2024.08.06 |
|---|---|
| [JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기 (0) | 2024.08.05 |
| [JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기 (0) | 2024.08.04 |
| [JavaScript 프로젝트 시리즈] 3일차: JavaScript로 간단한 틱택토 게임 만들기 (0) | 2024.08.03 |
| [JavaScript 프로젝트 시리즈] 1일차: JavaScript로 간단한 To-Do 리스트 애플리케이션 만들기 (0) | 2024.08.01 |