Как построить успешные проекты как начинающему разработчику

Несколько месяцев назад я наткнулся на интересный кодинговый челлендж. Вот что он представлял собой > Забавный вопрос для фронтенд-разработки, который мне задали на собеседовании. Нужно построить шесть квадратов без цвета. Каждый раз, когда вы кликаете на один из них, он становится зеленым. Когда последний квадрат становится зеленым, они все...

Несколько месяцев назад я наткнулся на интересное программирование задание. Вот что оно было:

Задача казалась простой: создать шесть квадратов без цвета и сделать так, чтобы каждый квадрат стал зеленым при нажатии. Затем, когда последний квадрат станет зеленым, вернуть все квадраты в состояние без цвета в обратном порядке, в котором они были нажаты.

Я был рад протестировать умения нескольких начинающих разработчиков, с которыми работал, так что я поделился заданием с ними. Но результаты оказались не такими, как я ожидал.

Несмотря на его видимую простоту, задача вызвала различные результаты. Некоторые студенты успешно создали функциональное решение, в то время как другие столкнулись с необходимыми программными концепциями.

Именно тогда я понял, что это может быть отличной возможностью для многих людей. Так что, если вы начинающий разработчик и испытываете трудности в создании собственных проектов или демонстрационных работ, не беспокойтесь! Эта статья поможет вам успешно создать проект с прямым подходом.

Для кого эта статья?

Эта статья специально предназначена для начинающих разработчиков, которым может быть сложно создавать приватные проекты.

Если вы часто полагаетесь на учебники или чувствуете, что у вас не хватает креативности для самостоятельного создания проектов, то эта статья для вас.

С чего начать?

Давайте взглянем на задание, которое я отправил студентам:

Создайте шесть квадратов без цвета. При каждом нажатии на квадрат он должен стать зеленым. Когда последний квадрат станет зеленым, все они возвращаются в состояние без цвета в обратном порядке, в котором они были нажаты (не все сразу).

Если бы вы были одним из студентов, которым представили это задание, что бы вы сделали первым? Хотя может быть соблазнительно сразу приступить к кодированию, важно понять, что написание кода на самом деле является последним шагом в создании проекта.

Итак, с чего начать? Первым шагом является мыслить. Да, я имею в виду дословно остановиться и подумать о проблеме, которую вы пытаетесь решить.

Как мыслить о проблеме?

Подходя к проекту, важно думать о нем как о проблеме, требующей решения. Потратьте время на тщательное ознакомление с проблемой, затем разбейте ее на более мелкие части.

Для этого вам может быть полезно отойти от компьютера и взять карандаш и лист бумаги.

Например, сталкиваясь с любым родом задачи, вы можете начать с ее разбиения на более управляемые части. Это может включать в себя:

1. Создание шести квадратов
2. Определение способа изменения их цвета при нажатии
3. Создание механизма отслеживания нажатых квадратов
4. Разработка метода, позволяющего квадратам вернуться в исходное состояние в обратном порядке их нажатия

Неважно, какой может показаться проект большим, всегда важно разбить его на более мелкие части. Это поможет легче освоить каждую отдельную часть поочередно, сохраняя порядок ифокус

Итак, при столкновении с большим проектом, не пугайтесь. Вместо этого найдите время, чтобы разбить его на более мелкие части и сконцентрироваться на каждой из них отдельно. Таким образом, вы сможете быть организованными, сосредоточенными и в конечном итоге успешно завершить свой проект.

После тщательного обдумывания задания мне удалось придумать потенциальное решение. Вот что я придумал:

// Шаг 1: Создание шести квадратов- Создайте шесть отдельных кнопок в HTML- Назовите каждую кнопку классом square- Дайте им уникальные идентификаторы// Шаг 2: Определение способа изменения цвета кнопок при нажатии- Добавьте слушатель событий CLICK для каждой кнопки- Вызовите функцию с именем UpdateSquares(), которая изменяет цвет нажатой кнопки// Шаг 3: Создание механизма отслеживания нажатых квадратов- Создайте массив с названием array_sqr, в который записываются уникальные идентификаторы нажатых кнопок- Когда кнопка была нажата, добавьте идентификатор в массив// Шаг 4: Разработка метода, чтобы квадраты вернулись в исходное состояние в обратном порядке их нажатия- Когда array_sqr.length == 6, вызовите функцию с именем ReverseSquares()- В функции ReverseSquares() выполните цикл по массиву array_sqr- Внутри цикла выберите каждую кнопку с уникальными идентификаторами в array_sqr- Удалите зеленый цвет с выбранной кнопки

После того, как вы тщательно продумали свой проект, вы теперь можете перейти к следующему шагу, а именно к созданию вашего проекта.

Как решить проблему и создать решение

После тщательного рассмотрения вызова пришло время перейти к созданию проекта. Давайте пройдемся по шагам:

Шаг 1: Создание шести квадратов

На этом этапе нам нужно сделать три вещи: создать шесть отдельных кнопок в HTML, присвоить каждой кнопке класс квадрата и задать им уникальные идентификаторы.

Вы можете сделать это в 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>

Выше приведен код, в котором мы только что создали кнопки с уникальными идентификаторами, как мы записали.

Шаг 2: Определите способ изменения цвета при нажатии на кнопку.

На этом шаге у нас есть всего две задачи: Добавьте прослушиватель событий CLICK к каждой кнопке, а затем вызовите функцию с названием 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 = 'зеленый';    array_sqr.push(btn.id);}

Шаг 3: Создайте механизм для отслеживания, какие квадраты были нажаты.

На следующем шаге нам нужно создать пустой массив с названием array_sqr, который хранит уникальные идентификаторы нажатых кнопок. Затем, когда кнопка была нажата, нам нужно добавить идентификатор в массив. Изменяя наш код для достижения указанного выше, у нас есть следующий код:

…let array_sqr = []; // создаем пустой массивfunction UpdateSquares(event) {    const btn = event.target;    btn.style.backgroundColor = 'зеленый';    array_sqr.push(btn.id); // добавляем идентификатор в массив}

В приведенном выше коде мы только отслеживаем способ нажатия кнопок, сохраняя их в массиве.

Шаг 4: Дайте методу для квадратов вернуться к их исходному состоянию в обратном порядке, в котором они были нажаты.

В этом последнем шаге нам нужно вызвать функцию ReverseSquares(), когда array_sqr.length == 6.  

В функции ReverseSquares() пройдитесь по массиву array_sqr. Внутри цикла выбирайте каждую кнопку с уникальным идентификатором из array_sqr и удалите зеленый цвет с выбранной кнопки.

Представленный ниже код это делает:

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 = 'зеленый';    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 = 'белый';        /* Также очистите массив */        array_sqr = [];    }}

С помощью вышеуказанного кода мы практически закончили проект, и он работает примерно так, как ожидалось. Взгляните на демонстрацию ниже:

Единственное, что остается выяснить, это то, что в данный момент все цвета удаляются одновременно. Поэтому нам нужно это решить, что приведет нас к завершающему этапу создания нашего проекта.

Как улучшить решение

В нашем проекте есть проблема, связанная с удалением цвета со всех квадратов одновременно. Поэтому нам нужно это исправить.

Каждый проект должен пройти через этот важный этап обновлений и исправлений. Очень сложно с первой попытки создать идеальный проект. Даже эту демонстрацию я не создал с первой попытки в этом уроке.

Улучшение вашего проекта иногда может быть даже труднее, чем создание самого проекта. Интересный факт: мне потребовалось больше времени, чтобы изменить цвета на разных интервалах, чем написать код для демонстрации, которую я использовал в этом уроке.

Обычно этот этап включает много поиска в Гугле и иногда даже обращение за помощью к другим людям. Это вполне нормально – это не делает вас плохим разработчиком.

Теперь, когда мы разобрались с этим, давайте улучшим наш проект. Все, что нам нужно сделать, это модифицировать функцию ReverseSquares() следующим образом:

function ReverseSquares() {    array_sqr.reverse();    // Используем цикл for..of, чтобы применить разные задержки для каждой кнопки    for (const [index, id] of array_sqr.entries()) {        const reverse_btn = document.getElementById(id);        // Удалить цвет после задержки, с увеличением задержки для каждой кнопки        setTimeout(() => {            reverse_btn.style.backgroundColor = 'white';        }, index * 1000);        /* Также очистим массив */        array_sqr = [];    }}

Когда все это объединено, у вас есть решение, которое работает. Оно может не быть идеальным, но оно работает – и это победа.

Итог

Создание побочных проектов в качестве начинающего разработчика может показаться сложным делом. Но следуя систематическому подходу мышления, планированию кода, фактическому программированию и улучшению своего решения, вы сможете успешно создавать проекты, которые демонстрируют ваши навыки и креативность.

Не бойтесь разбивать большие проекты на более мелкие, более управляемые части. И помните, что улучшение – это неотъемлемая часть процесса разработки.

Если у вас есть какие-либо вопросы, не стесняйтесь писать в Твиттере @sprucekhalifa и не забудьте подписаться на меня, чтобы получать больше идей и обновлений. Счастливого кодирования!

Фото от Scott Graham на Unsplash

• Junior Developer
• Projects
• Web Development