多云

加載動畫和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應用程序”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！