使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
今天我将使用 Weather 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序
⛅ Weather.io ☔
很高兴又见面了！😊
今天我将制作一个很棒的🌦天气应用程序🌧，我们可以在其中搜索任何城市🗺、地区🌎或国家/地区，并使用Weather API 获取其当前天气。此外，为了给它添加一些修饰，我还使用了 Unsplash API 作为网站的背景图片🖼，这将基于您输入的位置。我为卡片添加了倾斜效果和玻璃化外观。我们将在这个项目中使用的编程语言是 HTML、CSS 和 JS。🤩
看看我们将要实现的最终样子。👇
注意：我在文中只提到了您应该/可能在代码中使用的几个关键点和步骤。因为，这是一个博客，而不是代码库，所以我想保持简洁。如果您想参考整个代码可见文章末尾，去看看吧！
⚓ 第 1 步 - 设置环境并收集所有资源
使用您喜欢的代码编辑器，创建一个名为“Weather App”或任何您想要的名字，然后创建这三个文件并将这些资源添加到文件夹中：
🔴 index.html
🔵 style.css
🔶 script.js
我们需要的其他资源：
🟥 Favicon
🟩 Loading GIF (optional)
🟪 Vanilla-Tilt.js file
下载所有这些资源 👉见文末👈
🛵 第 2 步 - 从 index.html 开始
• 从HTML 文件的常用模板开始。根据需要添加标题。在链接style.css和之前script.js，链接您想要的谷歌字体。我使用过 Poppins 字体，这是我比较喜欢的字体之一。（谷歌字体）
• 现在从开始，如果您希望向您的网站添加加载程序，那么您可以将其添加到正文标签中，然后为其编写脚本。
• 制作两个单独的div。一个用于heading title，一个用于卡片。在它下面添加合适的 div 标签。• 这里我使用了一个SVG 格式的搜索按钮。您可以将此代码用于卡片 div 中的按钮。
•
多云
• 加载动画和Vanilla-Tilt js 的脚本。在正文结束之前添加它。我在上面步骤 1 中提到的资源中添加了 Vanilla-Tilt Js 文件。
🚋 第 3 步 - 设置索引文件的样式
• 从样式body和其他元素开始。• 设置加载动画的样式。您可以使用此代码对其进行样式设置。由于加载动画具有白色背景，因此我使用了#fff. 我在资源文件夹中添加了 SVG 图像。
#loading{
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('/loading.svg')
no-repeat center;
z-index: 99999;
}
🛸 第 4 步 - 获取 Weather API 和 Unsplash API 密钥
• 前往 OpenWeatherMap 并创建一个帐户。登录后单击API Keys选项卡中的 ，您将看到 API 密钥。复制 API Key 并粘贴到下面提到的 JavaScript 代码的第二行 (apiKey: " ",)
• 前往 Unsplash Source。在这里，您可以看到如何根据大小、文本、用户的喜好、收藏等以不同的方式调用图片。
🚀 第 5 步 - 从 JavaScript 编码开始
• 在JavaScipt 中集成API 对于学习如何为Web 应用程序使用API 至关重要。我已经列出了整个代码。你可以通过它并理解代码。
• 我已将此调用"url('https://source.unsplash.com/1600x900/?city " + name + "')"用于背景图像。您可以根据需要自定义 URL。
• 我还使用了上海市的默认天气weather.fetchWeather("Shanghai");。您可以在此处添加任何城市的名称。每当您加载网站时，都会弹出这个城市的天气。
let weather = {
apiKey: "",
fetchWeather: function (city) {
fetch(
"https://api.openweathermap.org/data/2.5/weather?q=" +
city +
"&units=metric&appid=" +
this.apiKey
)
.then((response) => response.json())
.then((data) => this.displayWeather(data));
},
displayWeather: function (data) {
const { name } = data;
const { icon, description } = data.weather[0];
const { temp, humidity } = data.main;
const { speed } = data.wind;
document.querySelector(".city").innerText = "Weather in " + name;
document.querySelector(".icon").src =
"https://openweathermap.org/img/wn/" + icon + ".png";
document.querySelector(".description").innerText = description;
document.querySelector(".temp").innerText = temp + "°C";
document.querySelector(".humidity").innerText =
"湿度: " + humidity + "%";
document.querySelector(".wind").innerText =
"风速: " + speed + " km/h";
document.querySelector(".weather").classList.remove("loading");
document.body.style.backgroundImage =
"url('https://source.unsplash.com/1600x900/?city " + name + "')";
document.body.style.backgroundRepeat = "none";
document.body.style.backgroundSize = "100";
document.body.style.width = "100%";
document.body.style.height = "100%";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
},
search: function () {
this.fetchWeather(document.querySelector(".search-bar").value);
},
};
document.querySelector(".search button").addEventListener("click", function () {
weather.search();
});
document
.querySelector(".search-bar")
.addEventListener("keyup", function (event) {
if (event.key == "Enter") {
weather.search();
}
});
weather.fetchWeather("Shanghai");
🚁 第 6 步 - 免费托管您的网站！
• 当你完成编码后，您可以在您的网站上托管您自己的天气应用程序，或者你也可以在 Github 上免费托管它！！！
像我这样：
• 托管是可选的，但我建议将其发布并与您的朋友和家人共享，并将其添加到您的项目列表中。
即将推出的功能✨
这是我计划添加一些更酷的功能，例如 -
🌟 每当您打开网站时进行位置检测，它将显示其天气
🌟 特定位置的相关天气新闻
🌟 使背景图像更准确地显示位置
🌟 使其对大多数设备（iPad 和平板电脑）的响应速度更快
项目中一些很酷的截图
代码获取方式
关注作者公众号【海拥】回复【代码】
🛫wuhu ! 起飞 !
做的好各位！！！如果您已成功制作天气应用程序⛅。希望你们喜欢制作这个项目并将其添加到您的项目列表中。我们不仅创建了一个很棒的天气应用程序，它可以告诉您任何位置的天气，而且还具有其他功能，例如根据搜索位置更改背景、卡片上的倾斜效果、玻璃形态和动画。如果你还没有开始，那你还在等什么！！！快乐编码😊！
💌欢迎大家在评论区提出意见和建议！💌
如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦。
完整免费源码可通过公众号【海拥】回复【代码】获取