欢迎来到这个动手实践的项目——构建你自己的简易天气预报应用。不论你是编程新手还是想扩展你的项目组合，这个项目都是完美的选择。在本教程结束时，你将能够展示一个可以查询全球任意城市天气的应用。
首先，我们需要注册一个Weather API密钥。访问OpenWeatherMap网站（https://openweathermap.org/），创建一个账户并获取一个API密钥。记住，虽然免费版的API对于学习和小型项目来说足够了，但是如果你的应用程序变得流行，你可能需要考虑升级到付费版本以获得更多功能和更高的请求限制。
接下来，创建一个新的HTML文件并设置基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Weather App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Weather Forecast</h1>
<input type="text" id="city-input" placeholder="Enter city">
<button id="search-btn">Search</button>
<div id="weather-info"></div>
</div>
<script src="app.js"></script>
</body>
</html>
然后是添加一些基本的CSS样式，保存为styles.css文件：
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
#city-input, #search-btn {
padding: 10px;
font-size: 1em;
}
#weather-info {
margin-top: 20px;
}
最后，编写JavaScript来实现应用的功能。在你的app.js文件中，加入以下代码：
document.getElementById('search-btn').addEventListener('click', function() {
const city = document.getElementById('city-input').value;
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${
city}&appid=YOUR_API_KEY&units=metric`)
.then(response => response.json())
.then(data => {
document.getElementById('weather-info').innerHTML = `Temperature: ${
data.main.temp}°C`;
// 你可以添加更多的天气信息，比如湿度、风速等。
});
});
记得替换YOUR_API_KEY为你从OpenWeatherMap获得的密钥。
以上代码实现了基础的天气查询功能。用户输入城市名称后点击搜索按钮，应用会显示该城市当前的温度。为了增强应用的实用性，你可以进一步添加更多天气详情，如湿度、风速、未来几天的天气预报等。同时，你还可以考虑增加一个功能，让用户可以看到动态更新的天气情况。
至此，你已经掌握了创建天气预报应用的基本步骤。通过这个项目，你学到了如何使用API、处理异步操作以及简单的DOM操作。现在，发挥你的创造力，给你的应用添加更多的功能和个性化设计吧！
