프로젝트: JavaScript와 Weather API를 사용하여 날씨 앱 구축-JS 튜토리얼-php.cn

프로젝트: JavaScript와 Weather API를 사용하여 날씨 앱 구축

Linda Hamilton

풀어 주다： 2024-12-27 04:02:13

원래의

515명이 탐색했습니다.

프로젝트: JavaScript와 Weather API를 사용하여 날씨 앱 구축

날짜: 2024년 12월 18일

날씨 앱을 구축하는 것은 JavaScript, DOM 조작, 이벤트 처리 및 API 통합에 대한 이해를 확고히 하는 훌륭한 방법입니다. 이 프로젝트에서는 API에서 데이터를 가져와 웹페이지에 동적으로 표시하는 방법을 알려드립니다.

사업개요

날씨 앱의 기능

날씨 API(예: OpenWeatherMap)에서 실시간 날씨 데이터를 가져옵니다.
입력 기능: 사용자는 도시 이름을 입력하여 날씨 정보를 검색할 수 있습니다.
동적 UI 업데이트: 온도, 습도, 날씨 조건을 동적으로 표시합니다.
잘못된 도시 이름이나 API 문제에 대한 오류 처리

단계별 안내

1. 프로젝트 설정

프로젝트에 필요한 파일 만들기:

HTML: 레이아웃을 구조화합니다.
CSS: 앱 스타일을 지정합니다(기본 기능의 경우 선택 사항).
JavaScript: 대화형 기능을 추가하고 날씨 API를 통합합니다.

2. Weather API 키 받기

OpenWeatherMap에 가입하고 API 키를 받으세요. API를 사용하여 날씨 데이터를 가져옵니다.

예제 API URL:

https://api.openweathermap.org/data/2.5/weather?q={city}&appid={API_KEY}&units=metric

로그인 후 복사

3. 기본 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>




<hr>

<h3>
  
  
  <strong>4. Styling (Optional)</strong>
</h3>

<p>Add some CSS to make your app visually appealing.<br>
</p>

<pre class="brush:php;toolbar:false">#weather-app {
  text-align: center;
  font-family: Arial, sans-serif;
  margin: 50px auto;
  width: 300px;
}

input, button {
  padding: 10px;
  margin: 10px 0;
}

#weather-result {
  margin-top: 20px;
}

로그인 후 복사

5. JavaScript 코드 작성

DOM 조작 및 이벤트 처리

JavaScript를 사용하여 사용자 입력을 캡처하고 API에서 데이터를 가져와 결과를 표시합니다.

// JavaScript code for the weather app
const API_KEY = "your_api_key_here"; // Replace with your actual API key

document.getElementById("search-btn").addEventListener("click", () => {
  const city = document.getElementById("city-input").value;
  if (city) {
    fetchWeather(city);
  } else {
    displayError("Please enter a city name.");
  }
});

function fetchWeather(city) {
  const apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  fetch(apiURL)
    .then(response => {
      if (!response.ok) {
        throw new Error("City not found");
      }
      return response.json();
    })
    .then(data => displayWeather(data))
    .catch(error => displayError(error.message));
}

function displayWeather(data) {
  document.getElementById("error-message").textContent = "";
  document.getElementById("city-name").textContent = `Weather in ${data.name}`;
  document.getElementById("temperature").textContent = `Temperature: ${data.main.temp}°C`;
  document.getElementById("description").textContent = `Condition: ${data.weather[0].description}`;
  document.getElementById("humidity").textContent = `Humidity: ${data.main.humidity}%`;
}

function displayError(message) {
  document.getElementById("error-message").textContent = message;
  document.getElementById("city-name").textContent = "";
  document.getElementById("temperature").textContent = "";
  document.getElementById("description").textContent = "";
  document.getElementById("humidity").textContent = "";
}

로그인 후 복사