使用 HTML、CSS、JS 和 API 制作一個很棒的天氣 Web 應(yīng)用程序
今天我將使用 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 步 - 免費托管您的網(wǎng)站！
代碼獲取方式
?? wuhu ! 起飛 !
很高興又見面了！??
今天我將制作一個很棒的??天氣應(yīng)用程序??，我們可以在其中搜索任何城市??、地區(qū)??或國家/地區(qū)，并使用Weather API 獲取其當(dāng)前天氣。此外，為了給它添加一些修飾，我還使用了 Unsplash API 作為網(wǎng)站的背景圖片??，這將基于您輸入的位置。我為卡片添加了傾斜效果和玻璃化外觀。我們將在這個項目中使用的編程語言是 HTML、CSS 和 JS。所以讓我們咕咕咕。??
看看我們將要實現(xiàn)的最終樣子。??
演示地址：? Weather.io ?
https://wanghao221.github.io/Weather.io/
完整代碼可關(guān)注公眾號【海擁】回復(fù)【代碼】獲取
一個使用 HTML、CSS、JS 和 API 制作的天氣 Web 應(yīng)用程序 ????
注意：我在文中只提到了您應(yīng)該/可能在代碼中使用的幾個關(guān)鍵點和步驟。因為，這是一個博客，而不是代碼庫，所以我想保持簡潔。如果您想?yún)⒖颊麄€代碼，那么這里是我的?Github 存儲庫。去看看吧！
? 第 1 步 - 設(shè)置環(huán)境并收集所有資源
使用您喜歡的代碼編輯器，創(chuàng)建一個名為“Weather App”或任何您想要的名字，然后創(chuàng)建這三個文件并將這些資源添加到文件夾中：
?? index.html
?? style.css
?? script.js
我們需要的其他資源：
?? Favicon
?? Loading GIF (optional)
?? Vanilla-Tilt.js file
下載所有這些資源 ??在這里??
?? 第 2 步 - 從 index.html 開始
??從HTML 文件的常用模板開始。根據(jù)需要添加標(biāo)題。
??在鏈接style.css和之前script.js，鏈接您想要的谷歌字體。我使用過 Poppins 字體，這是我比較喜歡的字體之一。（谷歌字體）
<linkhref="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()">
??制作兩個單獨的div。一個用于heading title，一個用于卡片。在它下面添加合適的 div 標(biāo)簽。
??這里我使用了一個SVG 格式的搜索按鈕。您可以將此代碼用于卡片 div 中的按鈕。
??為默認(rèn)圖標(biāo)顯示添加天氣圖標(biāo)。
??加載動畫和Vanilla-Tilt js 的腳本。在正文結(jié)束之前添加它。我在上面步驟 1 中提到的資源中添加了 Vanilla-Tilt Js 文件。
?? 第 3 步 - 設(shè)置索引文件的樣式
??從樣式body和其他元素開始。
??設(shè)置加載動畫的樣式。您可以使用此代碼對其進(jìn)行樣式設(shè)置。由于加載動畫具有白色背景，因此我使用了#fff. 我在資源文件夾中添加了 SVG 圖像。
??請參閱我的?Github 存儲庫?以獲取 CSS 代碼。
?? 第 4 步 - 獲取 Weather API 和 Unsplash API 密鑰
??前往 OpenWeatherMap 并創(chuàng)建一個帳戶。登錄后單擊API Keys選項卡中的 ，您將看到 API 密鑰。復(fù)制 API Key 并粘貼到下面提到的 JavaScript 代碼的第二行 (apiKey: "?<Insert API Key here>",)
??前往 Unsplash Source。在這里，您可以看到如何根據(jù)大小、文本、用戶的喜好、收藏等以不同的方式調(diào)用圖片。
?? 第 5 步 - 從 JavaScript 編碼開始
??在JavaScipt 中集成API 對于學(xué)習(xí)如何為Web 應(yīng)用程序使用API 至關(guān)重要。我已經(jīng)列出了整個代碼。你可以通過它并理解代碼。
??我已將此調(diào)用"url(‘https://source.unsplash.com/1600x900/?city " + name + "’)"用于背景圖像。您可以根據(jù)需要自定義 URL。
??我還使用了上海市的默認(rèn)天氣weather.fetchWeather(“Shanghai”);。您可以在此處添加任何城市的名稱。每當(dāng)您加載網(wǎng)站時，都會彈出這個城市的天氣。
?? 第 6 步 - 免費托管您的網(wǎng)站！
??現(xiàn)在，當(dāng)您完成編碼后，您可以在您的網(wǎng)站上托管您自己的天氣應(yīng)用程序，或者您甚至可以在 Github 上免費托管它?。?！
像我這樣：https://github.com/wanghao221/Weather.io
??托管是可選的，但我建議將其發(fā)布并與您的朋友和家人共享，并將其添加到您的項目列表中。
即將推出的功能?
這是我計劃添加一些更酷的功能，例如 -
???每當(dāng)您打開網(wǎng)站時進(jìn)行位置檢測，它將顯示其天氣
?? 特定位置的相關(guān)天氣新聞
?? 使背景圖像更準(zhǔn)確地顯示位置
?? 使其對大多數(shù)設(shè)備（iPad 和平板電腦）的響應(yīng)速度更快
項目中一些很酷的截圖
代碼獲取方式
完整代碼可關(guān)注公眾號【海擁】回復(fù)【代碼】獲取
?? wuhu ! 起飛 !
做的好各位?。。∪绻殉晒χ谱魈鞖鈶?yīng)用程序?。希望你們喜歡制作這個項目并將其添加到您的項目列表中。我們不僅創(chuàng)建了一個很棒的天氣應(yīng)用程序，它可以告訴您任何位置的天氣，而且還具有其他功能，例如根據(jù)搜索位置更改背景、卡片上的傾斜效果、玻璃形態(tài)和動畫。如果你還沒有開始，那你還在等什么?。?！快樂編碼??！
我已經(jīng)寫了很長一段時間的技術(shù)博客，并且主要通過CSDN發(fā)表，這是我的一篇 Web 應(yīng)用程序教程。我喜歡通過文章分享技術(shù)與快樂。您可以訪問我的博客：?http://haiyong.site?以了解更多信息。希望你們會喜歡！這里匯總了我的全部原創(chuàng)及作品源碼：Github 存儲庫?如果我能在我的 Github 存儲庫上獲得一些星星就太好了??。
?? 歡迎大家在評論區(qū)提出意見和建議！??
如果你真的從這篇文章中學(xué)到了一些新東西，喜歡它，收藏它并與你的小伙伴分享。??最后，不要忘了?或??支持一下哦。
