使用纯JavaScript开发一个天气跟踪应用程序

人们去不同的地方旅行，在印度这样的国家，你永远不知道我们要去的地方现在的天气如何。我们谷歌关于这个地方，搜索，但它与如此多的数据混合在一起，我们不是电影中看到的计量学家或生存技巧专家，坦率地说，这不是一个普通人所需要的技能，我们只需要一个应用程序。

在这个web开发项目中，我们将构建自己的web应用程序来跟踪一个地方的天气。该应用程序不仅适用于大都市地区，还适用于任何注册的地方/城市。任何网站开发新手都可以做这个项目;所有数据都是使用API密钥从互联网上提取的。

想在Web开发上构建项目?:

Web开发工具包将提供给您，您可以使用教程学习和构建。你今天就可以免费开始了!

1.Web开发与PHP和MySQL

2.使用React JS进行前端Web开发

3.使用Node JS进行后端Web开发

4.全栈开发人员

5.网页开发(职业发展课程)

大纲:

这个网站开发项目将需要三个文件，以三种语言构建整个项目，并将所有文件同步到一个网页中，以执行关于天气特征的各种跟踪。一个复杂的天气应用程序需要大量的数据库管理和angular js方面的知识。我们的应用程序还将跟踪数据，但不是在数据库中维护它，我们将显示有关天气变化的图表，所以对于初学者来说，它很容易开发。我们可以使用城市名称或pin码/邮政编码

先决条件:

为不同天气设置的图像集合(晴空/晴天，暴风雨，下雨，多云&默认图像)。这些图片可以从pexels,pxhere等网站免费下载。

OpenWeatherMap网站上的一个帐户，可以免费获取API来提取所需的数据。

Web开发的最新项目

想要开发Web开发的实用技能?检查我们最新的项目，并开始免费学习

免费开始

要求:

硬件:一台笔记本电脑或台式机，任何操作系统(Linux/Windows/iOS)

软件/技术:运行程序的浏览器(Chrome/Firefox/Opera/Safari/IE)。我更喜欢chrome或firefox，因为它提供了一个控制台，可以看到程序工作的背后，如python的IDE(只需右键单击鼠标，选择“检查”或Ctrl+Shift+I打开它，并在此窗口切换到控制台标签)
一个文本编辑器(Visual Studio(VS) Code/Atom/Sublime/Notepad)来编码。我更喜欢VS代码，因为它完成了它的库和主题的代码是有吸引力的。
网络连接

实现:

我们将把工作分成三个文件来简化工作:

HTML文件
JavaScript文件
CSS文件

HTML文件(命名为index.html或任何您喜欢的名称

简单地创建头部和身体的结构，添加标题头部标签区域，并提供链接到CSS文件使用链接标签
在body标签区域，我们将使用两个分区，一个用于创建搜索容器，另一个用于创建天气框或容器
每个div都应该提供一个ID和一个类，以便在JavaScript中使用它，并通过CSS提供样式
在body标签区域应用程序的最后，使用javascript标签的javascript文件的链接以HTML标签闭包结束，HTML文件已经准备就绪

JavaScript文件(script.js或任何名称)

我们定义了三个变量来存储:API键(从站点获取)，单位=英制或公制华氏度和公制摄氏度/摄氏度温度，搜索方法= zip/ q，其中q在使用城市名称时使用。
我们为搜索方法定义了一个函数，其中我们通过长度交叉检查输入数据的类型(5为美国，6为印度)，所有都是数字，然后使用' zip '字符串else ' q '字符串来搜索方法变量。
现在我们用下面的格式定义函数来获取数据这里我们没有使用倒逗号= "而是使用倒划= ' '
“http://api.openweathermap.org/data/2.5/weather? $ {searchMethod} = $ {searchTerm} &APPID = $ {appId} = ${单位}’
我们使用JSON函数将它们转换为JSON形式，然后发送到另一个函数来初始化它，并使用它以我们所需的方式提供数据。(我们可以通过使用console.log打印数据来检查我们从服务器得到了什么)
从上一个函数中传递的“参数”中，我们需要来自天气的数据，如result.weather[0]。主要通过切换语句和使用案例，从现场可以看到案例
在这里面，我们为天气描述、温度、湿度、风速、城市标题、天气图标等特性声明了各种变量
使用与上面相同的格式，我们改变了最后一个变量，即result.weather[0](也使用unit打印)。描述,result.main。临时(数学。它的地板值)，result.wind.speed,result.name(城市标头)，result.main.humidity
这里调用set position函数来设置天气容器到最合适的位置(为我的中心)，这里使用容器的Id，我们修改容器的左右，高度和宽度样式，以使其位于中心。
现在我们使用id搜索按钮，并将其附加到一个变量来获取输入并传递到获取搜索方法
CSS文件(style.css或任何名称)
首先，body标签是在背景中设置的样式和默认图像，使用各种属性，如大小、位置、无重复和字体
使用一类天气容器，我们设置它的阴影，字体，颜色，边界半径，透明度，文本填充。
我们还设置能见度为默认隐藏，因为没有搜索然后，在天气容器内，我们修改标题标签区域太