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

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

日期：2024 年 12 月 18 日

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

---

專案概況

天氣應用程式的功能

1. 從天氣 API（例如 OpenWeatherMap）取得即時天氣資料。
2. 輸入功能：使用者可以輸入城市名稱來搜尋天氣詳細資料。
3. 動態UI更新：動態顯示溫度、濕度和天氣狀況。
4. 錯誤處理無效城市名稱或 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 結構

建立一個簡單的佈局，其中包含輸入欄位和顯示天氣資訊的部分。

  <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">


  <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 = "";
}

---

6.測試應用程式

1. 在瀏覽器中開啟 HTML 檔案。
2. 輸入城市名稱（例如“倫敦”）並點擊“搜尋”。
3. 驗證天氣詳細資料是否顯示在頁面上。
4. 測試無效城市和空輸入，以確保錯誤訊息正確顯示。

---

點選我的 GitHub Repo

7.稍後新增的功能（選購增強功能）

1. 地理位置：自動偵測使用者的位置並顯示天氣。
2. 天氣圖示：使用 API 回應中的天氣圖示。
3. 樣式：為行動用戶添加動畫或響應式設計。
4. 天氣預報：顯示 5 天的天氣預報。

---

專案總結

建立天氣應用程式整合了許多重要的 JavaScript 技能，例如：

• 取得和處理 API 資料。
• 動態操作 DOM。
• 互動處理使用者輸入並顯示結果。

透過完成此項目，您將獲得建立更複雜的 JavaScript 應用程式的信心。

---

後續步驟：明天，我們將重點放在JavaScript 中的錯誤處理和調試，探索有效識別和解決問題的技術。敬請期待！