今天我將使用 Weather 和 Unsplash API 以及傾斜效果和玻璃形態(tài)外觀創(chuàng)建涼爽的天氣應(yīng)用程序

? Weather.io ?

? 第 1 步 - 設(shè)置環(huán)境并收集所有資源
?? 第 2 步 - 從 index.html 開始
?? 第 3 步 - 設(shè)置索引文件的樣式
?? 第 4 步 - 獲取 Weather API 和 Unsplash API 密鑰
?? 第 5 步 - 從 JavaScript 編碼開始
?? 第 6 步 - 免費(fèi)托管您的網(wǎng)站！
?? wuhu ! 起飛 !

很高興又見面了！??

今天我將制作一個(gè)很棒的??天氣應(yīng)用程序??，我們可以在其中搜索任何城市??、地區(qū)??或國(guó)家/地區(qū)，并使用Weather API 獲取其當(dāng)前天氣。此外，為了給它添加一些修飾，我還使用了 Unsplash API 作為網(wǎng)站的背景圖片??，這將基于您輸入的位置。我為卡片添加了傾斜效果和玻璃化外觀。我們將在這個(gè)項(xiàng)目中使用的編程語(yǔ)言是 HTML、CSS 和 JS。所以讓我們咕咕咕。??

看看我們將要實(shí)現(xiàn)的最終樣子。??

演示地址：? Weather.io ?

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

嗶哩嗶哩演示鏈接：https://www.bilibili.com/video/BV1xX4y1c7Z4

注意：我在文中只提到了您應(yīng)該/可能在代碼中使用的幾個(gè)關(guān)鍵點(diǎn)和步驟。因?yàn)?，這是一個(gè)博客，而不是代碼庫(kù)，所以我想保持簡(jiǎn)潔。如果您想?yún)⒖颊麄€(gè)代碼，那么這里是我的 Github 存儲(chǔ)庫(kù)。去看看吧！

? 第 1 步 - 設(shè)置環(huán)境并收集所有資源

使用您喜歡的代碼編輯器，創(chuàng)建一個(gè)名為“Weather App”或任何您想要的名字，然后創(chuàng)建這三個(gè)文件并將這些資源添加到文件夾中：

?? index.html
?? style.css
?? script.js

我們需要的其他資源：

?? Favicon
?? Loading GIF (optional)
?? Vanilla-Tilt.js file

下載所有這些資源 ??在這里??

https://download.csdn.net/download/qq_44273429/20463321

?? 第 2 步 - 從 index.html 開始

· 從HTML 文件的常用模板開始。根據(jù)需要添加標(biāo)題。
· 在鏈接style.css和之前script.js，鏈接您想要的谷歌字體。我使用過 Poppins 字體，這是我比較喜歡的字體之一。（谷歌字體）

<link
href="https://fonts.googleapis.com/css2family=Poppins:ital,wght@0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,800&display=swap"
rel="stylesheet">

· 現(xiàn)在從body開始，如果您希望向您的網(wǎng)站添加加載程序，那么您可以將其添加到正文標(biāo)簽中，然后為其編寫腳本。

<body onload="myFunction()">

· 制作兩個(gè)單獨(dú)的div。一個(gè)用于heading title，一個(gè)用于卡片。在它下面添加合適的 div 標(biāo)簽。
· 這里我使用了一個(gè)SVG 格式的搜索按鈕。您可以將此代碼用于卡片 div 中的按鈕。

<button>
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z"
clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"
clip-rule="evenodd"></path>
</svg>
</button>

· 為默認(rèn)圖標(biāo)顯示添加天氣圖標(biāo)。

<div class="flex">
  <img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon" />
  <div class="description">多云</div>
</div>

· 加載動(dòng)畫和Vanilla-Tilt js 的腳本。在正文結(jié)束之前添加它。我在上面步驟 1 中提到的資源中添加了 Vanilla-Tilt Js 文件。

<script>
        var preloader = document.getElementById('loading');
        function myFunction() {
            preloader.style.display = 'none';
        }
</script>
<script type="text/javascript" src="js/vanilla-tilt.js"></script>
    <script type="text/javascript">
        VanillaTilt.init(document.querySelector(".card"), {
            max: 15,
            glare: true,
            reverse: true,
            "max-glare": 0.5,
            speed: 400
        });
        VanillaTilt.init(document.querySelectorAll(".card"));
</script>

?? 第 3 步 - 設(shè)置索引文件的樣式

· 從樣式body和其他元素開始。
· 設(shè)置加載動(dòng)畫的樣式。您可以使用此代碼對(duì)其進(jìn)行樣式設(shè)置。由于加載動(dòng)畫具有白色背景，因此我使用了#fff. 我在資源文件夾中添加了 SVG 圖像。

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

· 請(qǐng)參閱我的 Github 存儲(chǔ)庫(kù) 以獲取 CSS 代碼。

?? 第 4 步 - 獲取 Weather API 和 Unsplash API 密鑰

· 前往 OpenWeatherMap 并創(chuàng)建一個(gè)帳戶。登錄后單擊API Keys選項(xiàng)卡中的，您將看到 API 密鑰。復(fù)制 API Key 并粘貼到下面提到的 JavaScript 代碼的第二行 (apiKey: " <Insert API Key here>",)

· 前往 Unsplash Source。在這里，您可以看到如何根據(jù)大小、文本、用戶的喜好、收藏等以不同的方式調(diào)用圖片。

?? 第 5 步 - 從 JavaScript 編碼開始

· 在JavaScipt 中集成API 對(duì)于學(xué)習(xí)如何為Web 應(yīng)用程序使用API 至關(guān)重要。我已經(jīng)列出了整個(gè)代碼。你可以通過它并理解代碼。

· 我已將此調(diào)用"url('https://source.unsplash.com/1600x900/?city " + name + "’)"用于背景圖像。您可以根據(jù)需要自定義 URL。

· 我還使用了上海市的默認(rèn)天氣weather.fetchWeather(“Shanghai”);。您可以在此處添加任何城市的名稱。每當(dāng)您加載網(wǎng)站時(shí)，都會(huì)彈出這個(gè)城市的天氣。

let weather = {
  apiKey: "<Insert API Key here>",
  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 =
      "風(fēng)速: " + 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 步 - 免費(fèi)托管您的網(wǎng)站！

· 現(xiàn)在，當(dāng)您完成編碼后，您可以在您的網(wǎng)站上托管您自己的天氣應(yīng)用程序，或者您甚至可以在 Github 上免費(fèi)托管它?。。?/span>

像我這樣：Github 存儲(chǔ)庫(kù)

· 托管是可選的，但我建議將其發(fā)布并與您的朋友和家人共享，并將其添加到您的項(xiàng)目列表中。

即將推出的功能?

這是我計(jì)劃添加一些更酷的功能，例如 -

?? 每當(dāng)您打開網(wǎng)站時(shí)進(jìn)行位置檢測(cè)，它將顯示其天氣
?? 特定位置的相關(guān)天氣新聞
?? 使背景圖像更準(zhǔn)確地顯示位置
?? 使其對(duì)大多數(shù)設(shè)備（iPad 和平板電腦）的響應(yīng)速度更快

項(xiàng)目中一些很酷的截圖

?? wuhu ! 起飛 !

做的好各位?。?！如果您已成功制作天氣應(yīng)用程序?。希望你們喜歡制作這個(gè)項(xiàng)目并將其添加到您的項(xiàng)目列表中。我們不僅創(chuàng)建了一個(gè)很棒的天氣應(yīng)用程序，它可以告訴您任何位置的天氣，而且還具有其他功能，例如根據(jù)搜索位置更改背景、卡片上的傾斜效果、玻璃形態(tài)和動(dòng)畫。如果你還沒有開始，那你還在等什么?。?！快樂編碼??！

我已經(jīng)寫了很長(zhǎng)一段時(shí)間的技術(shù)博客，并且主要通過CSDN發(fā)表，這是我的一篇 Web 應(yīng)用程序教程。我喜歡通過文章分享技術(shù)與快樂。您可以訪問我的博客：https://haiyong.blog.csdn.net/ 以了解更多信息。希望你們會(huì)喜歡！這里匯總了我的全部原創(chuàng)及作品源碼：Github 存儲(chǔ)庫(kù) 如果我能在我的 Github 存儲(chǔ)庫(kù)上獲得一些星星就太好了??。

A海擁

華爾茲#初音未來

視頻號(hào)

?? 歡迎大家在評(píng)論區(qū)提出意見和建議！??

如果你真的從這篇文章中學(xué)到了一些新東西，喜歡它，收藏它并與你的小伙伴分享。??最后，不要忘了?或??支持一下哦。

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区