构建JavaScript天气应用程序是初学者的绝佳项目选择，因为它具有对 dom （文档对象模型）的基本了解，并展示了如何利用 fetch api 从外部服务获取数据。

天气应用程序是一种数字工具，可为用户提供实时天气信息和预测。

该教程指导您构建天气申请，您可以在其中搜索任何城市，地区或国家，并使用天气API获取当前的天气。

我们将建立什么

瞥见我们将要编码的令人惊叹的应用程序。

这是探索天气应用的Live Demo。

注意：我提供了可以在本文中纳入代码中的关键点和步骤的简洁概述。如果您想查看完整的代码，请访问我的GitHub存储库。随时检查一下！

先决条件

基本HTML
基本CSS
基本的JavaScript（了解JavaScript Async/Await是一个加号）

我们学到什么？通过创建此应用程序，我们将在以下领域获得知识：

与DOM互动
利用Fetch Api
实施第三方API服务

现在我们可以掌握先决条件和基本细节，让我们直接深入建造。

该项目的背景故事

好吧，所以我最近了解了API的概念，这很有趣。得知它后不久，我偶然发现了由FemCode Africa组织的Mini JS-Thon Hackathon（为期一周的黑客马拉松）。我决定参加，猜猜我建造了什么？ 实时天气应用。

应用的关键功能

天气预报：显示指定城市的实时天气信息。
用户输入：此功能允许用户输入他们想知道天气预报的城市名称。
该应用程序提供湿度和气压细节。
温度转换：此功能使您可以在摄氏（°C）和华氏（°F）中查看天气预报。

设置

步骤1

首先，我们需要设置环境并添加所有资源。使用您首选的代码编辑器，创建一个名为“天气应用”的文件夹，或选择您喜欢的任何名称。在文件夹中，创建必要的文件夹和文件，并添加所需的资源，如下所示。 ðð

您可以从提供的链接下载所有资源ðhereð。

第2步

首先创建标准HTML文件模板。选择您的喜好标题
链接style.css和index.js文件，并包括所需的Google字体。我在style.css中导入了洛拉字体。（您可以在Google Fonts上探索更多字体）。

应用程序的标记

HTML文件将是基本的，没有复杂的。另外，HTML文件应链接到CSS文件和JS文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!----------------- cSS ----------------->
    <link rel="stylesheet" href="./style.css" />
    <!----------------- Favicon ----------------->
    <link rel="shortcut icon" href="../images/clouds.png" type="image/x-icon" />
    <title>Weather App</title>
  </head>
  <body>
    <div class="card">
        <h1>Weather App</h1>

        <!-- Search bar start -->
        <div class="search">
            <input id="search-result" type="text" placeholder="enter city name" spellcheck="false" name="city" required/>
            <button class="btn">search</button>
        </div>
        <!-- Search bar end -->

        <div class="err">
            <p>Invalid city name</p>
        </div>

        <!-- Weather Section start -->
        <div class="weather">
            <img src="images/clouds.png" alt=" clouds" class="weather-icon" />
            <h1 id="temp" class="temp"></h1>
            <h2 class="city">Lagos, NG</h2>
        <!-- Weather Section end -->

        <!-- Card section start -->
        <div class="details">
            <div class="col">
                <img src="../images/humidity.png" alt="humidity" />

                <div class="card-details">
                    <p class="humidity">66%</p>
                    <p>Humidity</p>
                </div>
            </div>


            <div class="col">
                <img src="../images/barometer.png" alt="barometer" />

                <div class="card-details">
                    <p class="pressure">1013</p>
                    <p>Air pressure</p>
                </div>
            </div>
        </div>

        <!-- degree button -->
        <div class="degree-button">
            <button id="celcius" class="btn-item1">°C</button>
            <button id="farenheit" class="btn-item2">°F</button>
        <div>
        </div>
    </div>
      <script src="index.js"></script>
    </body>
  </html>
  </body>
</html>

步骤3-样式索引文件

从造型body和其他元素开始。

@import url("");
*{
  margin:0;
  padding:0;
  font-family: "Lora", serif;
  box-sizing: border-box;
}

body{
background: #e8eA96;
}

请检查我的GitHub repository以访问CSS代码。

步骤4-从API检索数据

要获得天气数据，必须理解该过程。获取数据取决于第三方服务，名为OpenWeatherMap，该网站通过API提供多种天气数据。通过将此API集成到我们的应用程序中，我们可以在我们的网站上使用天气数据。在这种情况下，API充当中介，类似于服务员，根据客户端的特定请求促进了从服务器到客户端的数据传输。

要使用API，有必要获取API键。让我们探索获取我们的API密钥的过程：

步骤1：步骤1：请访问OpenWeatherMap并选择“登录”选项。

步骤2：如果没有帐户，请单击“未注册？创建帐户”选项。

步骤3：填写表格，然后单击注册以创建您的帐户。

步骤4：导航到菜单并选择API选项。

步骤5：要获得当前的天气数据，有必要订阅当前的天气数据API服务。单击订阅按钮继续。

步骤6：接下来，将出现一个定价窗口。我们不需要任何付费计划。因此，从可用的选择中选择免费选项，我们几乎完成了。

步骤7：成功订阅后，将您的个人资料名称定位在右上角，然后单击它。在下拉菜单中，选择我的API键。

步骤8：您的API密钥将在本节中显示。请记住要确保它安全并避免与任何人公开共享。

现在我们已经获得了API密钥，让我们回到构建应用程序中。 ð

步骤5：JavaScript编码部分

在将API用于Web应用程序时，了解如何将API集成到JavaScript中是必不可少的。我为您提供了完整的代码，供您查看并获得对其功能的全面了解。

让我们从获取API键和端点URL开始。

// API key and endpoint URL
let apiKey = "8b3c2188b1fe57******************";//Enter your API key here
let apiUrl ="https://api.openweathermap.org/data/2.5/weather?units=metric&lang=en";

上面的代码定义了apiKey变量，该变量应替换为从OpenWeatherMap获得的您自己的API键。 apiUrl变量包含用于提出API请求的基本URL，以供OpenWeathMap的天气终点。它包括单位（度量）和语言（英语）的查询参数。

// DOM elements
let searchBox = document.querySelector(".search input");
let searchButton = document.querySelector(".search button");
let weather_icon = document.querySelector(".weather-icon");

然后，我们使用document.querySelector选择dom元素，然后将它们分配给变量：searchBox（输入字段），searchButton（button）和weather_icon（天气图标的图像元素）。

// Variable to store Celsius value
let cel;

宣布cel变量存储摄氏温度值。

// Function to check the weather for a city
async function checkWeather(city) {
  try {
    // Make API call to fetch weather data
    const response = await fetch(`${apiUrl}&q=${city}&appid=${apiKey}`);

    if (!response.ok) {
      throw new Error("Unable to fetch weather data.");
    }

    // Parse the response JSON
    const data = await response.json();

    // Update the DOM with weather information
    document.querySelector(".city").innerHTML = data.name;
    const tempCelcius = Math.round(data.main.temp);
    document.querySelector(".temp").innerHTML = tempCelcius + "°C";
    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
    document.querySelector(".pressure").innerHTML = data.main.pressure;

    // Set the weather icon based on weather conditions
    if (data.weather[0].main === "Clouds") {
      weather_icon.src = "../images/clouds.png";
    } else if (data.weather[0].main === "Clear") {
      weather_icon.src = "../images/clear.png";
    } else if (data.weather[0].main === "Rain") {
      weather_icon.src = "../images/rain.png";
    } else if (data.weather[0].main === "Drizzle") {
      weather_icon.src = "../images/drizzle.png";
    } else if (data.weather[0].main === "Mist") {
      weather_icon.src = "../images/mist.png";
    }

    // Display the weather section and hide error message
    document.querySelector(".weather").style.display = "block";
    document.querySelector(".err").style.display = "none";

    // Store the Celsius value
    cel = tempCelcius;
  } catch (error) {
    // Display error message and hide weather section
    document.querySelector(".err").style.display = "block";
    document.querySelector(".weather").style.display = "none";
    console.error(error);
  }
}

接下来，我们定义一个名为checkWeather的async功能，该功能负责检查给定城市的天气。
这是对代码的解释：

checkWeather()takes参数city，代表需要检查天气的城市。
在该功能内部，它可以使用fetch函数进行API调用来获取天气数据。使用指定的city和apiKey进行API调用。
如果API响应未成功（除200以外的状态代码），则会以“无法获取天气数据”的消息引发错误。
如果API调用成功，它使用response.json()方法解析了响应JSON。
然后，该功能将使用从API响应获得的天气信息更新DOM（HTML）。它将城市名称，摄氏温度设置为湿度和压力值，并将其压力值设置为各自的HTML元素。
基于从API响应获得的天气条件，它将weather_icon元素的src属性设置为相应的天气图像映像文件。
它通过将display样式属性设置为block来显示天气部分，并通过将其display属性设置为none。
摄氏温度值存储在cel变量中以供以后使用。
如果在执行try块期间发生任何错误，它会捕获错误，显示错误消息，隐藏天气部分，并将错误记录到控制台。


// Event listener for search button click
searchButton.addEventListener("click", () => {
  const city = searchBox.value.trim();
  if (city !== "") {
    // Call checkWeather function with the entered city
    checkWeather(city);
  }
});

// Event listener for Fahrenheit button click
document.getElementById("farenheit").addEventListener("click", () => {
  // Convert Celsius to Fahrenheit and update the HTML
  if (cel !== undefined) {
    let fer = Math.floor(cel * 1.8 + 32);
    document.querySelector(".temp").innerHTML = fer + "°F";
  }
});

// Event listener for Celsius button click
document.getElementById("celcius").addEventListener("click", () => {
  // Restore the Celsius value and update the HTML
  if (cel !== undefined) {
    document.querySelector(".temp").innerHTML = cel + "°C";
  }
});

这是上面的代码片段：

搜索按钮具有单击时触发的事件侦听器。它以从搜索输入字段获得的输入的城市名称来调用checkWeather()函数。
Wahrenheit按钮具有事件侦听器，可在单击时将摄氏温度转换为华氏度。它通过转换温度更新HTML。
Celsius按钮具有一个事件侦听器，可在单击时恢复摄氏温度并更新HTML。

结果

这是下面天气申请的完整视图。

结论

让我们更有趣！我很想知道您所在地区的天气。下面用您当前的天气信息发表评论，让我们看看不同位置的天气情况。

如果您对该项目有任何询问，请不要犹豫。感谢您的阅读，并继续关注Let's Build系列中的更多令人兴奋的项目！

我在Twitter，LinkedIn和GitHub上有空。请留意我即将发表的博客文章，其中我将介绍Web开发的另一个重要领域。作为开发人员，我很高兴提供其他信息。在此之前，愉快的编码并保重！