🚀#2 让你成为专业人士的 JavaScript 项目系列。

你好，程序员们！👋

欢迎回到 Javascript 项目系列。今天我要分享另一个精彩的项目。

💟 保存此系列以供即将进行的项目使用。

💥 让我们开始吧....🚀

🌈 2. 使用 Javascript 的梯度生成器。

在本教程中，我们将学习如何使用纯 JavaScript 生成自己的渐变效果。如果您正在学习 JavaScript，可以将其视为一个迷你项目。它将教您 DOM 概念以及如何通过 JavaScript 更改 CSS 样式。

以下是预览：-

🔸 CodePen 结果链接

话虽如此，让我们开始吧。

步骤 - 1：-像往常一样，创建 3 个文件 - Index.html、Style.css 和 Script.js。
步骤 - 2：复制以下 HTML 代码并将其粘贴到您的代码编辑器中。

索引.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Create Gradient using Javascript</title>
  <link rel="stylesheet" href="./style.css">

</head>

<body>
  <h3>Create Gradient using Javascript</b></h3>
  <div id="gradient"></div>
  <input class="color1" type="color" name="color1" value="#00ff00">
  <input class="color2" type="color" name="color2" value="#ff0000">
  <h2>Code for generated gradient is - </h2>
  <h4></h4>
  <script type="text/javascript" src="script.js"></script>
</body>

</html>

这里我们使用了颜色类型的标签来选择渐变的各种颜色。我们添加了一个卡片部分，用于id=gradient在卡片上显示渐变效果。
步骤 - 3：-下面是用于样式的 CSS 代码。

样式.css

body {
    font: 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 100vh;
    background-color: #f6f7fc;
}
#gradient{
    position: relative;
    background: linear-gradient(45deg, #00ff00 , #ff0000);
    width: 250px;
    height: 320px;
    border-radius: 25px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
    box-shadow: 2px 31px 35px -15px rgba(0,0,0,0.64);
}
input{
    border-radius: 50%;
    height: 40px;
    width: 40px;
    border: none;
    outline: none;
    -webkit-appearance: none;
}
input::-webkit-color-swatch-wrapper {
    padding: 0; 
}
input::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}
h3 {
    font: 600 1.5em 'Raleway', sans-serif;
    color: rgba(0,0,0,.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .3em;
    width: 100%;
}

步骤 4：下面是 JavaScript 代码，这是此生成器中最重要的部分。我们声明了一些变量来存储标签的 DOM 对象。然后，我们声明了一个名为的函数，"setGradient()"该函数从输入标签中获取颜色代码，然后将其分配给 HTML 中的渐变 ID。

Script.js

var css = document.querySelector("h4");
var color1 = document.querySelector(".color1");
var color2 = document.querySelector(".color2");
var gradient = document.getElementById("gradient");

function setGradient() {
 gradient.style.background = 
 "linear-gradient(45deg, " 
 + color1.value 
 + ", " 
 + color2.value 
 + ")";
 css.textContent = gradient.style.background + ";";
}

color1.addEventListener("input", setGradient);
color2.addEventListener("input", setGradient);

就这样，你完成了。

💟 保存此系列以供即将进行的项目使用。

就这样！如果您成功实施了这个项目，请在下方评论区告诉我。

🛑 如果您需要更多类似的内容，请在 Instagram 上关注@codev_land。

保留声明并进行编码😎

文章来源：https://dev.to/chetan_atrawalkar/2-javascript-project-series-that-makes-you-pro-3gfj