JavaScript是一种高级进程语言，可用于构建现代Web应用程序。多年来，它仅作为前端/UI语言而演变为具有用于后端开发的全部能力。
在此项目中，我们将使用JavaScript构建一个简单的密码生成器Web应用程序并将其部署到Vercel。
内容表
- 建立开发环境
- 创建框架，样式UI
- 添加逻辑以完成程序
- 将项目提交给GitHub
- 部署到Vercel进行托管
设置开发环境
这是一个简单的项目，是初学者友好的项目。但是，在HTML，CSS和JavaScript中拥有先验知识将有所帮助。在本教程中，我将在命令行接口（CLI）上使用命令来创建，读取和更新文件夹和文件。但是，了解命令行的知识不是强制性的。
创建一个新文件夹，其中所有将要创建的文件都将被容纳。在Linux终端上发出此命令：
mkdir notesapp
在Windows上，只需创建一个新的文件夹“ noteapp”。
创建框架，样式UI
超文本标记语言（HTML）是在万维网（www）上标记文本文件的标准化方法。 HTML提供了网页结构的框架。这可能比作建造房屋。房屋完全取决于基础和Web应用程序设计，HTML扮演着类似的角色。
但是，级联样式表（CSS）描述了网页上HMTL元素的外观。网页上的字体，颜色和样式完全由CSS完成。关于建造房屋的示例，油漆，设计和装饰将是房屋的CSS。
在此项目中，我们将创建一个名为“ root HTML”文件； 'index.html'。
使用终端，输入此命令：
touch index.html.
在Windows OS上，创建一个名为'index.html'
的新文件
HTML文件的内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes App In Pure HTML CSS JS</title>
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>
<div class="popup-box">
<div class="popup">
<div class="content">
<header>
<p></p>
<i class="uil uil-times"></i>
</header>
<form action="#">
<div class="row title">
<label>Title</label>
<input type="text" spellcheck="false">
</div>
<div class="row description">
<label>Description</label>
<textarea spellcheck="false"></textarea>
</div>
<button></button>
</form>
</div>
</div>
</div>
<div class="wrapper">
<li class="add-box">
<div class="icon"><i class="uil uil-plus"></i></div>
<p>Add New Note</p>
</li>
</div>
<div class="footer">
<p>Made by kdwebdeveloper<a href="https://kdwebdeveloper.vercel.app/"> Porfolio </a></p>
</div>
<script src="script.js"></script>
</body>
</html>
这是Web应用程序的结构。现在，我们需要选择字体，颜色并用CSS提供精美的页面。
在Linux终端中，发出命令：
touch style.css
在Windows上，创建一个文件'style.css'
注意：您必须在同一文件夹中创建两个文件。
将CSS文件“ style.css”链接到html结构中的“ head”元素中的html“链接元素”的网页。
这是CSS文件“ style.css”的内容。
`* {
列表风格：无;
填充：0;
保证金：0;
盒子大小：边界盒;
字体家庭：'raleway'，sans-serif;
}
身体{
背景图像：线性奖学金（向右，RGBA（127,127,67,0.5），RGB（97，141，61））;
}
::选择{
颜色：#fff;
背景：＃618CF8;
}
.Wrapper {
保证金：50px;
显示：网格;
差距：25px;
网格 - 板块柱：重复（自动填充，265px）;
}
.Wrapper li {
身高：250px;
列表风格：无;
边界 - 拉迪乌斯：5px;
填充：15px 20px 20px;
背景：#fff;
盒子阴影：0 4PX 8PX RGBA（0,0,0,0.05）;
}
.add-box，.icon，.bottom-content，
。
显示：flex;
准入：中心;
正当：中间;
}
.add-box {
光标：指针;
挠性方向：列;
正当：中心;
}
.add-box .icon {
身高：78px;
宽度：78px;
颜色：＃88abff;
字体大小：40px;
边界拉迪乌斯：50％;
正当：中心;
边界：2PX实心＃88abff;
}
.add-box p {
颜色：＃88abff;
字体重量：500;
保证金顶：20px;
}
.NOTE {
显示：flex;
挠性方向：列;
正当：中间;
}
.note .details {
Max-Height：165px;
溢出Y：自动;
}
。
。
宽度：0;
}
。
。
宽度：5px;
}
。
.popup textarea：hover :: - webkit-scrollbar-track {
背景：＃f1f1f1;
边界拉迪乌斯：25px;
}
。
.popup textarea：hover :: - webkit-scrollbar-thumb {
背景：＃e6e6e6;
边界拉迪乌斯：25px;
}
.NOTE P {
字体大小：22px;
字体重量：500;
}
.NOTE SPAN {
显示：块;
颜色：＃575757;
字体大小：16px;
利润率：5px;
}
.note .bottom-content {
填充：10px;
边界顶：1PX固体#CCC;
}
.bottom-content跨度{
颜色：＃6D6D6D;
字体大小：14px;
}
.bottom-content .settings {
位置：相对;
}
.bottom-content .settings i {
颜色：＃6D6D6D;
光标：指针;
字体大小：15px;
}
.settings .menu {
z索引：1;
底部：0;
右：-5px;
填充：5px 0;
背景：#fff;
位置：绝对;
边界拉迪乌斯：4PX;
变换：比例（0）;
转换原始：右下角;
盒子阴影：0 0 6PX RGBA（0,0,0,0.15）;
过渡：变换0.2s宽松;
}
.settings.show .menu {
变换：比例（1）;
}
.settings .menu li {
身高：25px;
字体大小：16px;
边距底：2px;
填充：17px 15px;
光标：指针;
盒子阴影：无;
边界 - 拉迪乌斯：0;
正当：flex-start;
}
.menu li：最后一个孩子{
保证金底：0;
}
.menu li：悬停{
背景：＃f5f5f5;
}
.me和{
右右：8px;
}
.popup-box {
位置：固定;
顶部：0;
左：0;
z索引：2;
身高：100％;
宽度：100％;
背景：RGBA（0,0,0,0.4）;
}
.popup-box .popup {
位置：绝对;
顶部：50％;
左：50％;
z索引：3;
宽度：100％;
最大宽度：400px;
正当：中心;
变换：转换（-50％，-50％）比例（0.95）;
}
.popup-box，.popup {
不透明度：0;
指针候选：无;
过渡：所有0.25的轻松;
}
.popup-box.show，.popup-box.show .popup {
不透明度：1;
指针盛宴：自动;
}
.popup-box.show .popup {
变换：转换（-50％，-50％）比例（1）;
}
.popup .content {
边界 - 拉迪乌斯：5px;
背景：#fff;
宽度：计算（100％-15px）;
盒子阴影：0 0 15px RGBA（0,0,0,0.1）;
}
.CONTENT标题{
填充：15px 25px;
边界底：1px固体#CCC;
}
.CONTENT标题P {
字体大小：20px;
字体重量：500;
}
.CONTENT标题i {
颜色：＃8B8989;
光标：指针;
字体大小：23px;
}
.CONTENT形式{
保证金：15px 25px 35px;
}
.CONTENT形式。
边距底：20px;
}
表格。标签{
字体大小：18px;
显示：块;
保证金底：6px;
}
表格：where（输入，textarea）{
身高：50px;
宽度：100％;
轮廓：无;
字体大小：17px;
填充：0 15px;
边界拉迪乌斯：4PX;
边界：1PX实心＃999;
}
表格：where（输入，textarea）：焦点{
盒子阴影：0 2PX 4PX RGBA（0,0,0,0.11）;
}
形式。
身高：150px;
调整大小：无;
填充：8px 15px;
}
表格按钮{
宽度：100％;
身高：50px;
颜色：#fff;
轮廓：无;
边界：无;
光标：指针;
字体大小：17px;
边界拉迪乌斯：4PX;
背景：＃6A93F8;
}
@Media（最大宽度：660px）{
.Wrapper {
保证金：15px;
差距：15px;
网格 - 板块柱：重复（自动填充，100％）;
}
.popup-box .popup {
最大宽度：计算（100％-15px）;
}
.bottom-content .settings i {
字体大小：17px;
}
}
.footer p {
浮点：内线启动;
}`
添加逻辑以完成项目
页面的（用户界面）UI现在如我们想要的那样，现在继续为应用程序添加逻辑。 JavaScript是一种高度动态的语言，它将使我们能够实现这种效果。
创建一个新的文件“ script.js”。使用终端，发出命令：
touch script.js除了index.html文件和style.css文件外，根目录中的touch script.js。
我们继续将“ script.js”文件链接到'index.html'文件以渲染使用HTML脚本标签的JavaScript文件。
这是'script.js'javaScript文件的内容：
不用担心，我会将链接附加到源代码。
现在，我们有一个完全写在JavaScript中的Notes应用程序。
将项目投入到GitHub
goto github并注册帐户或登录帐户（如果您有帐户）。
创建一个新的存储库并将项目提交给GitHub。
这就是它的样子：
将项目部署到Vercel进行托管
goto vercel并通过github.goto仪表板注册一个帐户，然后单击部署项目。选择您创建的转换和ta-da！，该项目是实时的。
这是我们刚刚创建的Web应用程序的链接：
notesapp.
这是github的源代码的链接。
欢迎反馈！