怎么用JS和API制作天气Web应用程序

  
  多云

加载动画和Vanilla-Tilt js的脚本。在正文结束之前添加它。我在上面步骤 1 中提到的资源中添加了Vanilla-Tilt Js文件。

JS

    
        VanillaTilt.init(document.querySelector(".card"), {
            max: 15,
            glare: true,
            reverse: true,
            "max-glare": 0.5,
            speed: 400
        });
        VanillaTilt.init(document.querySelectorAll(".card"));

第 3 步 - 设置索引文

从样式body和其他元素开始。

设置加载动画的样式。您可以使用此代码对其进行样式设置。由于加载动画具有白色背景，因此我使用了#fff。我在资源文件夹中添加了SVG图像。

CSS

#loading{
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fff url('/loading.svg')
  no-repeat center;
  z-index: 99999;
}

请参阅Github存储库以获取 CSS 代码

地址：https://github.com/wanghao221/Weather.io

第 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");。您可以在此处添加任何城市的名称。每当您加载网站时，都会弹出这个城市的天气。

JS

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 上免费托管它！！！

https://github.com/wanghao221/Weather.io

托管是可选的，但我建议将其发布并与您的朋友和家人共享，并将其添加到您的项目列表中。

即将推出的功能

这是我计划添加一些更酷的功能，例如

每当您打开网站时进行位置检测，它将显示其天气特定位置的相关天气新闻使背景图像更准确地显示位置使其对大多数设备（iPad 和平板电脑）的响应速度更快

项目中一些很酷的截图

以上是“怎么用JS和API制作天气Web应用程序”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！