项目：使用 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 = "";
}

登录后复制