项目：使用 JavaScript 和天气 API 构建天气应用程序

**日期：2024 年 12 月 18 日**

构建天气应用是巩固您对 JavaScript、DOM 操作、事件处理和 API 集成的理解的绝佳方式。此项目将教您如何从 API 获取数据并将其动态显示在网页上。

项目概况

天气应用程序的功能

循序渐进指南

1. 设置你的项目

为您的项目创建必要的文件：

2. 获取天气 API 密钥

在 OpenWeatherMap 注册并获取 API 密钥。您将使用他们的 API 来获取天气数据。

**示例 API URL**：

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

3.基本HTML结构

创建一个简单的布局，其中包含一个输入字段和一个显示天气信息的部分。

  
  
  
  


  

    
Weather App
    
    Search
    

      

      

      

      

      

    
  
  

4. 造型（可选）

添加一些 CSS 使您的应用更具视觉吸引力。

#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.测试应用程序

我的 GitHub Repo 请点击这里

7. 后续添加的功能（可选增强功能）

项目摘要

构建天气应用程序需要集成许多重要的 JavaScript 技能，例如：

通过完成这个项目，您将有信心构建更复杂的 JavaScript 应用程序。

**下一步**：明天，我们将重点关注**JavaScript 中的错误处理和调试**，探索有效识别和解决问题的技术。敬请关注！