專案：使用 JavaScript 和天氣 API 建立天氣應用程式-js教程-PHP中文網

專案：使用 JavaScript 和天氣 API 建立天氣應用程式

Linda Hamilton

發布： 2024-12-27 04:02:13

原創

515 人瀏覽過

專案：使用 JavaScript 和天氣 API 建立天氣應用程式

日期：2024 年 12 月 18 日

建立天氣應用程式是鞏固您對 JavaScript、DOM 操作、事件處理和 API 整合理解的絕佳方法。該專案將教您如何從 API 獲取資料並將其動態顯示在網頁上。

專案概況

天氣應用程式的功能

從天氣 API（例如 OpenWeatherMap）取得即時天氣資料。
輸入功能：使用者可以輸入城市名稱來搜尋天氣詳細資料。
動態UI更新：動態顯示溫度、濕度和天氣狀況。
錯誤處理無效城市名稱或 API 問題。

分步指南

1.設定您的物品

為您的專案建立必要的檔案：

HTML：建置佈局。
CSS：應用程式樣式（基本功能可選）。
JavaScript：新增互動性並整合天氣 API。

2.取得天氣 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 = "";
}

登入後複製