天氣查詢應用程式

2024 iThome 鐵人賽

DAY 5

自我挑戰組

自主學習系列第 5 篇

16th鐵人賽

john0411

2024-09-15 15:36:49

392 瀏覽

分享至

這次的實作專案，我選擇了創建一個簡單的天氣查詢應用程式，並使用了網路 API 來獲取實時天氣數據。這個應用程式的主要功能是讓使用者輸入城市名稱後，透過調用 OpenWeatherMap API，返回當前該城市的天氣情況，如溫度、天氣狀況、濕度等。該應用程式使用了 JavaScript、HTML 和 CSS 技術，並結合了 AJAX 調用來進行 API 數據的獲取。

程式碼說明
HTML 部分
HTML 用來構建基本的網頁結構，頁面中有一個輸入框讓使用者輸入城市名稱，並附有一個按鈕用來觸發查詢。查詢結果會顯示在一個預定的區域中，像是天氣描述、氣溫以及濕度等資訊。

CSS 部分
為了讓網頁更加美觀，我使用了簡單的 CSS 來設計頁面的樣式，並且透過背景圖像來強化整體的視覺效果。按鈕、輸入框等也設計成使用者友好的樣式，確保使用者在不同設備上都有良好的體驗。

JavaScript 部分
這是應用程式的核心邏輯所在。使用者在輸入城市名稱後，JavaScript 會透過 AJAX 發送 HTTP 請求至 OpenWeatherMap API，取得 JSON 格式的天氣資料。接著，程式會解析這些資料，並將所需資訊顯示在網頁上。具體流程如下：

使用 fetch() 函數進行非同步請求。
成功獲取數據後，更新 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>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      background: linear-gradient(to right, #1e90ff, #87ceeb);
    }
    .container {
      margin-top: 100px;
    }
    input {
      padding: 10px;
      width: 250px;
    }
    button {
      padding: 10px 20px;
      cursor: pointer;
    }
    #result {
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city name">
    <button onclick="getWeather()">Get Weather</button>
    <div id="result"></div>
  </div>

  <script>
    async function getWeather() {
      const city = document.getElementById('city').value;
      const apiKey = 'your_api_key'; // 請從 OpenWeatherMap 取得 API key
      const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

      try {
        const response = await fetch(url);
        const data = await response.json();

        if (data.cod === 200) {
          const temp = data.main.temp;
          const description = data.weather[0].description;
          const humidity = data.main.humidity;
          
          document.getElementById('result').innerHTML = `
            <h2>${city}</h2>
            <p>Temperature: ${temp}°C</p>
            <p>Weather: ${description}</p>
            <p>Humidity: ${humidity}%</p>
          `;
        } else {
          document.getElementById('result').innerHTML = `<p>City not found. Please try again.</p>`;
        }
      } catch (error) {
        console.error('Error:', error);
        document.getElementById('result').innerHTML = `<p>There was an error retrieving the data.</p>`;
      }
    }
  </script>
</body>
</html>