🚀#1 JavaScript 项目系列让您成为专业人士。

你好，程序员们！👋

JavaScript是前端 Web 开发领域的领军语言之一。此外，它也是 2021 年最值得学习和赚钱的编程语言之一。学习 JavaScript 的方法有很多，从书籍到教程，其中一种很棒的学习 JavaScript 的方式就是构建项目。
所以，我开始了 JavaScript 项目系列，希望通过有趣的项目来学习 JavaScript。希望你喜欢这个迷你项目系列。

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

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

1.🎨使用 JavaScript 的颜色主题切换器。

在本教程中，我们将学习如何使用 JavaScript 将网站主题更改为您想要的任何颜色。如果您正在学习 JavaScript，这可以算是一个迷你项目。它将教您 DOM 概念以及如何通过 JavaScript 更改 CSS 样式。

以下是预览：-

步骤 - 1：首先创建项目文件 - Index.html、Style.css 和 Script.js。
步骤 - 2：然后复制以下 HTML 代码并将其粘贴到您的代码编辑器中。

索引.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Color Change Buttons</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<nav class="menu">
    <a href="#" class="menu__item menu__item--yellow " data-background="e4a924">
    </a>
    <a href="#" class="menu__item menu__item--red" data-background="c92142">  
    </a>
    <a href="#" class="menu__item menu__item--green" data-background="37b983">
    </a>
    <a href="#" class="menu__item menu__item--purple" data-background="9f32b8">
    </a>
  </nav>

  <script  src="script.js"></script>

</body>
</html>

这里我们使用标签来选择主题的各种颜色。我们使用属性“data-background”来指定锚标签的默认背景。
步骤 - 3：创建 html 文件后，接下来使用 CSS 代码进行样式设置。

样式.css

html {
  height: 100%;
  font-size: 1.3vw;
}
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6f7fc;
  transition: background-color 0.55s;
  will-change: background-color;
  margin: 0;
}
.menu__item {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12.5rem;
  display: inline-block;
  margin-left: 2.1rem;
  animation-name: close;
  animation-duration: 0s;
  will-change: width background-color;
  transition: background 0.55s;
  vertical-align: top;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 5px rgba(0,0,0, 0.3);
}

.menu__item:first-child {
  margin-left: 0;
  background: #fabe2b;
}
.menu__item:nth-child(2){
  background: #f43768;
}
.menu__item:nth-child(3){
  background: #45e1a3;
}
.menu__item:nth-child(4){
  background: #c152da;
}
.menu__item--animate {
  animation-duration: 0.5s;
}
.menu__item--active {
  width: 17rem;
  animation-name: open;
}

.menu__item--active.menu__item--yellow { background: #fabe2b; }
.menu__item--active.menu__item--red { background: #f43768; }
.menu__item--active.menu__item--green { background: #45e1a3; }
.menu__item--active.menu__item--purple { background: #c152da; }

步骤 - 4：下面是 JavaScript 代码，它是此主题转换器中最重要的部分。
我们声明了一个 const 'menuItems'，它将获取我们标签的标签属性。
然后在该 const 中我们存储所有鼠标事件监听器，同时调用`buttonClick() ` 方法将指定的颜色分配给背景。

Script.js

const menuItems = document.querySelectorAll('.menu__item');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', buttonClick);
}

function buttonClick() {
  if (!this.classList.contains('menu__item--active')) {
    document.body.style.backgroundColor = `#${this.getAttribute('data-background')}`;
  }
}

就这样，你完成了。

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

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

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

保留声明并进行编码😎

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