前端开发实战项目：实时天气预报应用

用户输入城市名称显示该城市的当前天气状况显示未来几天的天气预报优雅的用户界面设计。

qq_42120268

1812人浏览 · 2024-06-21 20:56:33

qq_42120268 · 2024-06-21 20:56:33 发布

引言

在本实战项目中，我们将开发一个实时天气预报应用。这个项目将帮助你掌握前端开发的核心技能，包括HTML、CSS、JavaScript，以及如何使用API来获取实时数据。通过这个项目，你将学会如何构建用户界面、处理用户交互、以及与第三方服务进行数据交互。

项目概述

实时天气预报应用将包括以下功能：

用户输入城市名称
显示该城市的当前天气状况
显示未来几天的天气预报
优雅的用户界面设计

技术栈

HTML：构建应用的基本结构
CSS：美化用户界面
JavaScript：实现应用逻辑和与API的交互
OpenWeatherMap API：获取实时天气数据

项目结构

weather-app/
│
├── index.html
├── style.css
└── script.js

获取免费 API Key

在开始项目之前，我们需要从 OpenWeatherMap 获取一个免费的 API Key。以下是获取 API Key 的步骤：

注册账号：访问 OpenWeatherMap 网站，点击右上角的“Sign Up”按钮进行注册。如果你已经有账号，可以直接登录。
生成 API Key：
- 登录后，进入你的账户页面。
- 点击“API keys”选项。
- 点击“Create Key”按钮，为你的应用创建一个新的 API Key。
- 给你的 API Key 取一个名称（例如“weather-app”），然后点击“Generate”按钮。
- 复制生成的 API Key，我们将在项目中使用它。

在这里插入图片描述

第一步：HTML 构建

首先，我们需要创建 index.html 文件，并添加基本的HTML结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时天气预报应用</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>实时天气预报</h1>
        <div class="search">
            <input type="text" id="city-input" placeholder="输入城市名称">
            <button id="search-btn">搜索</button>
        </div>
        <div class="weather">
            <h2 id="city-name">城市名</h2>
            <div id="weather-info">
                <p id="temperature">温度: --℃</p>
                <p id="description">天气状况: --</p>
                <p id="humidity">湿度: --%</p>
                <p id="wind-speed">风速: -- m/s</p>
            </div>
            <div id="forecast">
                <!-- 未来天气预报 -->
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

第二步：CSS 美化

接下来，我们创建 style.css 文件，为应用添加样式。

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
}

h1 {
    margin-bottom: 20px;
}

.search {
    margin-bottom: 20px;
}

#city-input {
    width: 70%;
    padding: 8px;
    margin-right: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#search-btn {
    padding: 8px 16px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}

#search-btn:hover {
    background-color: #0056b3;
}

.weather {
    margin-top: 20px;
}

#weather-info {
    margin-bottom: 20px;
}

#forecast {
    display: flex;
    justify-content: space-around;
}

第三步：JavaScript 实现功能

最后，我们创建 script.js 文件，编写JavaScript代码来实现应用逻辑。

const apiKey = 'YOUR_API_KEY'; // 使用你自己的 API Key
const apiUrl = 'https://api.openweathermap.org/data/2.5/weather?q=';

document.getElementById('search-btn').addEventListener('click', () => {
    const city = document.getElementById('city-input').value;
    getWeather(city);
});

async function getWeather(city) {
    try {
        const response = await fetch(`${apiUrl}${city}&appid=${apiKey}&units=metric`);
        const data = await response.json();
        
        if (data.cod === '404') {
            alert('城市未找到');
            return;
        }
        
        displayWeather(data);
    } catch (error) {
        console.error('Error fetching weather data:', error);
        alert('获取天气数据失败');
    }
}

function displayWeather(data) {
    document.getElementById('city-name').innerText = data.name;
    document.getElementById('temperature').innerText = `温度: ${data.main.temp}℃`;
    document.getElementById('description').innerText = `天气状况: ${data.weather[0].description}`;
    document.getElementById('humidity').innerText = `湿度: ${data.main.humidity}%`;
    document.getElementById('wind-speed').innerText = `风速: ${data.wind.speed} m/s`;
}