作為初級開發者如何打造成功的項目

几个月前，我偶然发现了一个吸引我注意的编程挑战它就是这样： > 在我上一次面试时我被问到的一道有趣的前端问题创造六个没有颜色的方块每次点击一个，它就会变绿当最后一个方块变绿时，它们全部都会变绿

几个月前，我偶然遇到了一个让我感兴趣的编码挑战。以下是它的内容：

Fun frontend question I was asked in an interview one time

Build six squares with no color

Every time you click one, it turns green

When the last square turns green, they all go back to no color in backwards sequence to which it was clicked (not all at once)

— Hussien 🇨🇦 (@hussien_coding) October 3, 2022

展示编码挑战的推文

这个任务看起来很简单：构建六个没有颜色的方块，并在点击时让每个方块变绿。然后，当最后一个方块变绿时，让它们以点击的相反顺序恢复到没有颜色。

我很兴奋地测试了一些初学者开发者的技能，他们刚刚开始接触技术，所以我与他们分享了这个挑战。但结果并不是我所预期的。

尽管这个挑战看似简单，但它却引发了不同的结果。有些学生成功地创建了一个功能性的解决方案，而其他人则在所需的编程概念上遇到了困难。

这时我意识到，这对很多人来说可能是一个很好的机会。所以，如果你是一位初学者开发者，发现创建自己的作品集/演示项目具有挑战性，不要害怕！本文将引导你通过一个简单直接的方法成功构建一个项目。

本文适合谁阅读？

本文特别为那些可能在创建自己的个人项目时遇到困难的初学者开发者量身定制。

如果你经常依赖教程或感觉缺乏创造力独立创建项目，那么本文适合你。

入门指南

让我们先看一下我给学生们发的挑战：

构建六个没有颜色的方块，每次点击一个方块时，它都变为绿色，当最后一个方块变绿时，它们以倒序的方式恢复到没有颜色（不是一次性全部恢复）

如果你是面对这个挑战的学生之一，你会首先做什么？虽然直接开始编码可能很诱人，但要认识到编写代码实际上是构建项目的最后一步，这一点很重要。

那么第一步是什么？第一步是思考。是的，我是说真的停下来，思考一下你要解决的问题。

如何思考这个问题

在处理一个项目时，我们要将其看作是需要解决的问题。花些时间仔细考虑问题，然后将其分解成较小的部分。

为了做到这一点，你可能会发现离开电脑，拿起一支铅笔和一张纸是有帮助的。

例如，当面对任何挑战时，你可以从将项目分解为更可管理的部分开始。这可能包括：

创建六个方块
确定一种在点击时更改它们的颜色的方法
创建一个跟踪被点击方块的机制
设计一种方法让方块按照点击的相反顺序返回到它们的原始状态

无论项目有多大，将其分解为较小的部分都是非常重要的。这样可以更轻松地逐个解决每个部分，同时保持组织和专注。

所以，当面对一个庞大的项目时，不要感到害怕。取而代之的是，花点时间将其分解为较小的部分，并专注于解决每个部分。通过这样做，你将能够保持组织，保持专注，并最终在你的项目上取得更大的成功。

在认真考虑了这个挑战一段时间之后，我能够想出一个潜在的解决方案。以下是我的解决方案：

// 第一步：创建六个方块- 在HTML中创建六个单独的按钮- 为每个按钮分配一个类名为square- 给它们分配唯一的ID// 第二步：确定一种在点击时更改它们的颜色的方式- 对每个按钮添加一个点击事件监听器- 调用一个名为UpdateSquares()的函数，该函数更改被点击按钮的颜色// 第三步：创建一个跟踪被点击方块的机制- 创建一个名为 'array_sqr' 的数组，用于存储被点击按钮的唯一ID- 当一个按钮被点击时，将其ID添加到数组中// 第四步：设计一种按照点击的相反顺序返回到它们的原始状态的方法- 当 `array_sqr.length == 6` 时，调用一个名为ReverseSquares()的函数- 在ReverseSquares()函数中，循环遍历`array_sqr`- 在循环内部，选中`array_sqr`中的每个唯一ID对应的按钮- 从选中的按钮中去除绿色的颜色

在你仔细思考了你的项目之后，你现在可以进行下一步了，也就是实际构建你的项目。

如何解决问题并构建解决方案

经过慎重考虑挑战之后，现在是时候着手构建项目了。让我们来看一下步骤：

步骤1：创建六个方块

在这一步中，我们有三件事要做：在HTML中创建六个独立的按钮，给每个按钮赋予一个方块的类名，并给它们分配唯一的ID。

你可以在HTML中这样做：

<body>    <div class="wrapper">        <button class="square" id="1">            按钮1        </button>        <button class="square" id="2">            按钮2        </button>        <button class="square" id="3">            按钮3        </button>        <button class="square" id="4">            按钮4        </button>        <button class="square" id="5">            按钮5        </button>        <button class="square" id="6">            按钮6        </button>    </div></body><script src="script.js"></script>

上面，我们只是按照我们写下的方式创建了具有唯一ID的按钮。

步骤2：确定点击按钮时如何更改它们的颜色。

在本步骤中，我们只需完成两个任务：对每个按钮添加一个点击事件侦听器，然后调用一个名为UpdateSquares()的函数，该函数会更改被点击按钮的颜色。

我们将在JavaScript中执行此操作，因此我们将创建一个名为script.js的新文件，其中包含以下代码：

const buttons = document.querySelectorAll(".square");for (const button of buttons) {    button.addEventListener("click", UpdateSquares);}function UpdateSquares(event) {    const btn = event.target;    btn.style.backgroundColor = 'green';    array_sqr.push(btn.id);}

步骤3：创建一个机制来跟踪哪些方块已被点击。

在下一步中，我们需要创建一个名为array_sqr的空数组，用于存储被点击按钮的唯一ID。然后，当按钮被点击时，我们需要将该ID添加到数组中。为了实现上述目标，我们修改了我们的代码如下：

…let array_sqr = []; // 创建空数组function UpdateSquares(event) {    const btn = event.target;    btn.style.backgroundColor = 'green';    array_sqr.push(btn.id); // 将ID添加到数组中}

在上面的代码中，我们只是通过将它们存储在数组中来记录按钮的点击方式。

步骤4：设计一种方法使方块以它们被点击的反序返回到原始状态。

在最后一步中，当array_sqr.length == 6时，我们需要调用一个名为ReverseSquares()的函数。

在ReverseSquares()函数中，通过循环遍历array_sqr。在循环内部，选择array_sqr中具有唯一ID的每个按钮，并从所选按钮中删除绿色。

下面是执行此操作的代码：

const buttons = document.querySelectorAll(".square");for (const button of buttons) {    button.addEventListener("click", UpdateSquares);}let array_sqr = [];function UpdateSquares(event) {    const btn = event.target;    btn.style.backgroundColor = 'green';    array_sqr.push(btn.id);    if (array_sqr.length == 6) {        ReverseSquares();    }}function ReverseSquares() {    array_sqr.reverse();    for (const id of array_sqr) {        const reverse_btn = document.getElementById(id);        // 删除颜色         reverse_btn.style.backgroundColor = 'white';        /* 同时清空数组 */        array_sqr = [];    }}

使用上面的代码，我们基本上已经完成了项目，并且它正常工作-ish。请查看以下演示：

https://codepen.io/Spruce_khalifa/embed/preview/PoVReva

唯一剩下的问题是，目前所有的颜色都会同时被移除。所以我们需要解决这个问题，这将引导我们进入建立项目的最终阶段。

如何改进解决方案

我们的项目目前存在一个问题，即所有方块的颜色同时被移除。因此我们需要修复这个问题。

每个项目都需要经历这个关键步骤来进行更新和修复。第一次尝试构建完美的项目非常困难。就连我在这个教程中使用的演示都不是我一次就构建成功的。

改进您的项目有时甚至比构建项目本身更困难。有趣的事实是：让颜色在不同的时间间隔内改变所花费的时间比编写本教程中使用的代码还要长。

这个过程通常包括大量的Google搜索，有时甚至需要向他人寻求帮助。这样做没有问题 – 这并不会使你成为一个糟糕的开发人员。

现在我们已经解决了这个问题，让我们改进我们的项目。我们所要做的就是修改ReverseSquares()函数，如下所示：

function ReverseSquares() {    array_sqr.reverse();    // 使用for..of循环为每个按钮应用不同的timeout    for (const [index, id] of array_sqr.entries()) {        const reverse_btn = document.getElementById(id);        // 设置延迟后移除颜色，对每个按钮的延迟逐渐增加        setTimeout(() => {            reverse_btn.style.backgroundColor = 'white';        }, index * 1000);        /* 同时清空数组 */        array_sqr = [];    }}

当一切都组合在一起时，您将得到一个可以工作的解决方案。它可能不是完美的，但它起作用了-那就是一种胜利。

https://codepen.io/Spruce_khalifa/embed/preview/qBgoYer