今天我將使用 Wea??ther 和 Unsplash API 以及傾斜效果和玻璃形態外觀創建涼爽的天氣應用程式
? Weather.io ?
- ? 第 1 步 - 設定環境并收集所有資源
- 🛵 第 2 步 - 從 index.html 開始
- 🚋 第 3 步 - 設定索引檔案的樣式
- 🛸 第 4 步 - 獲取 Weather API 和 Unsplash API 密鑰
- 🚀 第 5 步 - 從 JavaScript 編碼開始
- 🚁 第 6 步 - 免費托管您的網站！
- 🛬 wuhu ! 起飛 !
很高興又見面了！😊
今天我將制作一個很棒的🌦天氣應用程式🌧，我們可以在其中搜索任何城市🗺、地區🌎或國家/地區，并使用Weather API 獲取其當前天氣，此外，為了給它添加一些修飾，我還使用了 Unsplash API 作為網站的背景圖片🖼，這將基于您輸入的位置，我為卡片添加了傾斜效果和玻璃化外觀，我們將在這個專案中使用的編程語言是 HTML、CSS 和 JS，所以讓我們咕咕咕，🤩
看看我們將要實作的最終樣子，👇
一個使用 HTML、CSS、JS 和 API 制作的天氣 Web 應用程式 🌞🌦
注意：我在文中只提到了您應該/可能在代碼中使用的幾個關鍵點和步驟，因為，這是一個博客，而不是代碼庫，所以我想保持簡潔，如果您想參考整個代碼，那么這里是我的 Github 存盤庫，去看看吧！
? 第 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 字體，這是我比較喜歡的字體之一，（谷歌字體）
<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">
? 現在從body開始，如果您希望向您的網站添加加載程式，那么您可以將其添加到正文標簽中，然后為其撰寫腳本，
<body onload="myFunction()">
? 制作兩個單獨的div，一個用于heading title，一個用于卡片，在它下面添加合適的 div 標簽，
? 這里我使用了一個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>
? 為默認圖示顯示添加天氣圖示，
<div class="flex">
<img src="https://openweathermap.org/img/wn/04d.png" alt="" class="icon" />
<div class="description">多云</div>
</div>
? 加載影片和Vanilla-Tilt js 的腳本，在正文結束之前添加它，我在上面步驟 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 步 - 設定索引檔案的樣式
? 從樣式body和其他元素開始，
? 設定加載影片的樣式，您可以使用此代碼對其進行樣式設定，由于加載影片具有白色背景，因此我使用了#fff. 我在資源檔案夾中添加了 SVG 影像，
#loading{
position: fixed;
width: 100%;
height: 100vh;
background: #fff url('/loading.svg')
no-repeat center;
z-index: 99999;
}
? 請參閱我的 Github 存盤庫 以獲取 CSS 代碼，
🛸 第 4 步 - 獲取 Weather API 和 Unsplash API 密鑰
? 前往 OpenWeatherMap 并創建一個帳戶，登錄后單擊API Keys選項卡中的 ，您將看到 API 密鑰，復制 API Key 并粘貼到下面提到的 JavaScript 代碼的第二行 (apiKey: " <Insert API Key here>",)
? 前往 Unsplash Source，在這里，您可以看到如何根據大小、文本、用戶的喜好、收藏等以不同的方式呼叫圖片，
🚀 第 5 步 - 從 JavaScript 編碼開始
? 在JavaScipt 中集成API 對于學習如何為Web 應用程式使用API?? 至關重要，我已經列出了整個代碼，你可以通過它并理解代碼，
? 我已將此呼叫"url(‘https://source.unsplash.com/1600x900/?city " + name + "’)"用于背景影像，您可以根據需要自定義 URL，
? 我還使用了上海市的默認天氣weather.fetchWeather(“Shanghai”);，您可以在此處添加任何城市的名稱，每當您加載網站時，都會彈出這個城市的天氣，
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 =
"風速: " + 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 上免費托管它！！！
像我這樣：Github 存盤庫
? 托管是可選的，但我建議將其發布并與您的朋友和家人共享，并將其添加到您的專案串列中，
即將推出的功能?
這是我計劃添加一些更酷的功能，例如 -
🌟 每當您打開網站時進行位置檢測，它將顯示其天氣
🌟 特定位置的相關天氣新聞
🌟 使背景影像更準確地顯示位置
🌟 使其對大多數設備（iPad 和平板電腦）的回應速度更快
專案中一些很酷的截圖
🛬 wuhu ! 起飛 !
做的好各位！！！如果您已成功制作天氣應用程式?，希望你們喜歡制作這個專案并將其添加到您的專案串列中，我們不僅創建了一個很棒的天氣應用程式，它可以告訴您任何位置的天氣，而且還具有其他功能，例如根據搜索位置更改背景、卡片上的傾斜效果、玻璃形態和影片，如果你還沒有開始，那你還在等什么！！！快樂編碼😊！
我已經寫了很長一段時間的技術博客，并且主要通過CSDN發表，這是我的一篇 Web 應用程式教程，我喜歡通過文章分享技術與快樂，您可以訪問我的博客： https://haiyong.blog.csdn.net/ 以了解更多資訊，希望你們會喜歡！這里匯總了我的全部原創及作品原始碼：Github 存盤庫 如果我能在我的 Github 存盤庫上獲得一些星星就太好了😊，
💌 歡迎大家在評論區提出意見和建議！💌
如果你真的從這篇文章中學到了一些新東西，喜歡它，收藏它并與你的小伙伴分享，🤗最后，不要忘了?或📑支持一下哦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290298.html
標籤：其他