Cómo construir proyectos exitosos como desarrollador junior

Hace varios meses, me encontré con un desafío de codificación que me intrigó. Esto es lo que fue > Divertida pregunta de frontend que me hicieron una vez en una entrevista Construye seis cuadrados sin color Cada vez que haces clic en uno, se vuelve verde Cuando el último cuadrado se vuelve verde, todos ellos

Hace varios meses, me encontré con un desafío de programación que me intrigó. Aquí está de qué se trataba:

La tarea parecía simple: construir seis cuadrados sin color, hacer que cada cuadrado se ponga verde al hacer clic en él. Luego, cuando el último cuadrado se volviera verde, hacer que todos vuelvan a no tener color en el orden inverso en el que se hicieron clic.

Estaba emocionado por poner a prueba las habilidades de algunos desarrolladores juniors con los que estaba trabajando y que recién comenzaban en tecnología, así que les compartí el desafío. Pero los resultados no fueron los que esperaba.

A pesar de su aparente simplicidad, el desafío dio lugar a resultados diversos. Algunos estudiantes crearon con éxito una solución funcional, mientras que otros lucharon con los conceptos de programación requeridos.

Fue entonces cuando me di cuenta de que esto podría ser una gran oportunidad para mucha gente. ¡Así que si eres un desarrollador junior y te resulta difícil crear tus propios proyectos/de demos para tu portafolio, no temas! Este artículo te guiará en el proceso de construir con éxito un proyecto con un enfoque claro.

¿Para quién es este artículo?

Este artículo está diseñado específicamente para desarrolladores juniors que podrían estar luchando por crear sus propios proyectos personales.

Si a menudo te ves dependiendo de tutoriales o sientes que te falta creatividad para crear proyectos de forma independiente, entonces este artículo es para ti.

Comenzando

Echemos un vistazo al desafío que les envié a los estudiantes:

Construye seis cuadrados sin color Cada vez que hagas clic en uno, se vuelve verde Cuando el último cuadrado se vuelve verde, todos vuelven a no tener color en el orden inverso en el que se hizo clic (no todos a la vez)

Si fueras uno de los estudiantes presentados con este desafío, ¿qué harías primero? Aunque puede ser tentador sumergirse de inmediato en la codificación, es importante reconocer que escribir código es en realidad el último paso de construir un proyecto.

Entonces, ¿cuál es el primer paso? El primer paso es pensar. Sí, me refiero a detenerse literalmente y pensar en el problema que estás tratando de resolver.

Cómo pensar en el problema

Cuando abordas un proyecto, es importante considerarlo como un problema que necesita una solución. Tómate tu tiempo para considerar cuidadosamente el problema y luego divídelo en partes más pequeñas.

Para hacer esto, puede resultarte útil alejarte de tu computadora y tomar un lápiz y papel.

Por ejemplo, cuando te enfrentas a cualquier tipo de desafío, puedes comenzar dividiendo el proyecto en partes más manejables. Esto podría incluir:

1. Crear los seis cuadrados
2. Determinar una forma de cambiar su color al hacer clic
3. Crear un mecanismo para rastrear cuáles cuadrados han sido clicados
4. Diseñar un método para que los cuadrados vuelvan a su estado original en el orden inverso en el que se hicieron clic

No importa cuán grande parezca un proyecto, siempre es importante desglosarlo en partes más pequeñas. Esto facilita abordar cada pieza individual de a una a la vez, manteniendo la organización y la concentración.

Entonces, cuando te enfrentes a un proyecto grande, no te intimides. En cambio, tómate el tiempo para dividirlo en piezas más pequeñas y concéntrate en abordar cada pieza individualmente. Al hacerlo, podrás mantener la organización, la concentración y, en última instancia, tener más éxito en tu proyecto.

Después de tomar un tiempo para considerar cuidadosamente el desafío, pude encontrar una posible solución. Esto es lo que se me ocurrió:

// paso 1: crear los seis cuadrados- CREA seis botones individuales en HTML - ASIGNA a cada botón un nombre de clase llamado square- ASIGNA a cada uno un ID único// paso 2: Determinar una forma de cambiar su color al hacer clic- AGREGA un Oyente de Evento CLICK a cada botón- LLAMA a una función llamada ActualizarCuadrados() que cambia el color de un botón al hacer clic// paso 3: Crear un mecanismo para rastrear cuáles cuadrados han sido clicados- CREA un array llamado `array_sqr` que almacena el ID único de un botón clicado- Cuando se ha hecho clic en un botón, agrega el ID al array// paso 4: diseñar un método para que los cuadrados vuelvan a su estado original en el orden inverso en el que se hicieron clic- Cuando `array_sqr.length == 6`, llama a una función llamada CuadradosInversos()- En la función CuadradosInversos(), realiza un bucle a través de `array_sqr`- Dentro del bucle, SELECCIONA cada botón con los IDs únicos en `array_sqr`- QUITA el color verde del botón seleccionado

Después de haber pensado cuidadosamente en tu proyecto, ahora puedes pasar al siguiente paso, que es construirlo.

Cómo Resolver el Problema y Construir la Solución

Después de considerar cuidadosamente el desafío, es hora de pasar a construir el proyecto. Veamos los pasos:

Paso 1: Crea los Seis Cuadrados

En este paso, tenemos tres cosas que hacer: crear seis botones individuales en HTML, dar a cada botón el nombre de clase de cuadrado y darles identificadores únicos.

Puedes hacerlo en HTML de la siguiente manera:

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

Arriba, solo hemos creado los botones con identificadores únicos, tal como los escribimos.

Paso 2: Determinar una forma de cambiar su color cuando se hace clic.

En este paso, tenemos dos tareas: AÑADIR un Evento de clic a cada botón y luego llamar a una función llamada UpdateSquares() que cambia el color del botón clickeado.

Lo haremos en JavaScript, por lo que crearemos un nuevo archivo llamado script.js con el siguiente código:

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);}

Paso 3: Crear un mecanismo para rastrear qué cuadrados se han clickeado.

En el próximo paso, necesitamos crear un array vacío llamado array_sqr que almacene el identificador único de un botón clickeado. Luego, cuando se haya clickeado un botón, necesitamos agregar el ID al array. Modificando nuestro código para lograr esto, tenemos lo siguiente:

...let array_sqr = []; // crear el array vacío function UpdateSquares(event) {    const btn = event.target;    btn.style.backgroundColor = 'green';    array_sqr.push(btn.id); // agregar el ID al array}

En el código anterior, lo único que hemos hecho es realizar un seguimiento de la forma en que se clickean los botones mediante su almacenamiento en un array.

Paso 4: Diseñar un método para que los cuadrados vuelvan a su estado original en el orden inverso en el que se clickearon.

En este último paso, debemos llamar a una función ReverseSquares() cuando array_sqr.length == 6.

En la función ReverseSquares(), recorremos array_sqr. En el bucle, seleccionamos cada botón con los identificadores únicos en array_sqr y eliminamos el color verde del botón seleccionado.

A continuación se muestra el código para hacer esto:

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);        // Eliminar el color         reverse_btn.style.backgroundColor = 'white';        /* También borramos el array */        array_sqr = [];    }}

Con el código anterior, prácticamente ya hemos terminado el proyecto, y funciona como se esperaba, más o menos. Echa un vistazo a la demostración a continuación:

Lo único que queda por resolver es que, en este momento, todos los colores se eliminan al mismo tiempo. Así que tenemos que solucionar esto, lo cual nos llevará al aspecto final de construir nuestro proyecto.

Cómo Mejorar la Solución

Nuestro proyecto actualmente tiene un problema en el que el color se elimina de todos los cuadrados al mismo tiempo. Así que tenemos que arreglar eso.

Cada proyecto tiene que pasar por este paso crucial de realizar actualizaciones y correcciones. Es muy difícil construir un proyecto perfecto en el primer intento. Ni siquiera construí la demostración en este tutorial en mi primer intento.

Mejorar tu proyecto a veces puede ser aún más difícil que construir el proyecto en sí. Dato curioso: me llevó más tiempo lograr que los colores cambiaran en diferentes intervalos que escribir el código para la demostración que utilicé en este tutorial.

Este paso generalmente implica mucha búsqueda en Google y a veces incluso pedir ayuda a otras personas. Está perfectamente bien hacer eso, no te convierte en un mal desarrollador.

Ahora que hemos dejado eso claro, mejoremos nuestro proyecto. Todo lo que tenemos que hacer es modificar la función ReverseSquares() de la siguiente manera:

function ReverseSquares() {    array_sqr.reverse();    // Use el bucle for..of para aplicar diferentes timeouts para cada botón    for (const [index, id] of array_sqr.entries()) {        const reverse_btn = document.getElementById(id);        // Eliminar el color después de un retraso, con un retraso creciente para cada botón        setTimeout(() => {            reverse_btn.style.backgroundColor = 'white';        }, index * 1000);        /* También limpie el array */        array_sqr = [];    }}

Cuando todo se junta, tienes una solución que funciona. Puede que no sea perfecta, pero funciona, y eso es una victoria.

Resumen

Crear proyectos secundarios como desarrollador júnior puede parecer desafiante. Pero siguiendo un enfoque sistemático de pensar las cosas, planificar tu código, codificar en realidad y luego mejorar tu solución, puedes construir proyectos exitosos que muestren tus habilidades y creatividad.

No tengas miedo de dividir proyectos más grandes en partes más pequeñas y manejables. Y recuerda que la mejora es una parte integral del proceso de desarrollo.

Si tienes alguna pregunta, no dudes en enviarme un mensaje en Twitter a @sprucekhalifa, y no olvides seguirme para obtener más ideas y actualizaciones. ¡Feliz codificación!

Foto por Scott Graham en Unsplash

• Junior Developer
• Projects
• Web Development