Foto por Boitumelo Phetla en Unsplash

¿Cómo aprender JavaScript desarrollando proyectos simples? ¿Cómo codificar mini proyectos en JavaScript? ¿Qué puede hacer un principiante con JavaScript para mejorar sus habilidades? ¿Quiere crear un portafolio pero no tiene una idea para un proyecto?

Para progresar en Javascript, debes practicar construyendo proyectos. Esta es la mejor manera de mejorar su código, especialmente si es un principiante. Además, estos proyectos constituirán su cartera, lo que le permitirá crear más oportunidades para usted como desarrollador de JavaScript.

En este artículo te doy ejemplos de ejercicios prácticos para todos los niveles. El primero está dirigido a principiantes y, por lo tanto, es fácil de realizar. Subimos de nivel rápidamente en los últimos ejemplos de miniproyectos.

Al programar uno de varios de estos ejercicios en JavaScript, podrá:

1. mostrar proyectos concretos en su portafolio.
2. manipular los datos en la entrada (teclado, mouse) como en la salida (pantalla)
3. Crear interfaces de usuario sencillas en la web en HTML.

Echemos un vistazo a algunos proyectos y ejercicios de muestra para principiantes en JavaScript.

1. Desarrolle una lista de TODO en JavaScript

Una lista de TODO es un gran primer mini proyecto para comenzar a aprender sobre la entrada de datos y su visualización. Al hacer una lista de tareas pendientes, aprenderá, por ejemplo:

Cómo gestionar y visualizar diferentes elementos según su estado
Cómo crear, recuperar, modificar y eliminar objetos en JavaScript
Cómo ir más allá con la permanencia de datos a nivel local explorando localStorage

Una lista de TODO es un proyecto que a menudo se toma como ejemplo cuando aprendes marcos o libreros como react, react-native, vue.js, angular.j y otros. Hacer este proyecto en JS Vanilla y HTML, por tanto, tiene mucho sentido y facilitará tu aprendizaje en el futuro.

2. Desarrollar un generador de cotizaciones de JavaScript

¿Piensas en crear un mini proyecto que dé citas al azar de tu rapero, autor o personalidad favorita?

Así que aproveche la oportunidad para familiarizarse con las matrices y la función Math.random () en JavaScript creando un generador de cotizaciones.

Primero, deberá recopilar las cotizaciones que desee, intente hacerlo de manera inteligente raspando los datos.
Luego, deberá poner estas citas en una tabla para que pueda usarlas.
Con el tiempo, creará una interfaz de usuario para mostrar el contenido de forma aleatoria.

3. Desarrolle una calculadora de IMC en JavaScript

Hacer una pequeña calculadora también puede ser un buen ejercicio para los principiantes de JavaScript. La fórmula para calcular el IMC es simple:

const IMC = Peso * altura ** 2

Con el Peso en kg y la Altura en m.

Todo lo que tiene que hacer es crear el formulario de entrada de datos y una interfaz de usuario HTML para mostrar el resultado.

Para ir más allá, también puede mostrar la categoría de índice de masa corporal en la que se encuentra su usuario.

4. Desarrolle un conversor de divisas a JavaScript

Similar a la calculadora de IMC, el conversor de divisas es un ejercicio bueno y muy simple para basar su cartera de GitHub y tener en sus manos JavaScript.

Necesitará el curso actual, que puede grabar en su código o tomarlo con una API. Luego, con el monto ingresado como ingresado por el usuario, se desplegará el resultado de su cálculo para obtener la conversión de la moneda elegida.

5. Desarrollar una calculadora en JavaScript

Codificar una buena calculadora antigua es un gran ejercicio práctico para mejorar sus habilidades de JavaScript. Puede divertirse desarrollando la GUI en HTML y CSS, y luego agregar inteligencia con JavaScript.

Comience con algunos operadores simples y botones básicos para administrar:

La factura
La resta
La multiplicacion
La división

Luego, puede tener en cuenta los grados, las raíces cuadradas y todas las demás operaciones que desee. Una calculadora completa y exitosa es un gran proyecto de JavaScript para progresar.

6. Desarrollo de una cuenta atrás en JavaScript

El manejo de fechas es una habilidad que será útil a diario como desarrollador web o de JavaScript. Incluso si a algunos libreros les gusta moment.js, necesitará usar fechas en sus diversos proyectos. Esta es la razón por la que hacer un pequeño cronómetro, temporizador de cuenta regresiva o reloj en JavaScript lo familiarizará con la API de fecha de JavaScript, además de los tiempos de espera y los intervalos.

7. Desarrollo de un contador de palabras en JavaScript

Un contador de palabras le permite saber cuántas palabras hay en un texto proporcionado por el usuario. Esta función es útil cuando desea escribir un artículo con un número mínimo de palabras, e incluso existen sitios con el único propósito de decirle cuántas palabras contiene su texto. Este proyecto le enseñará cómo manipular cuerdas y cómo usar un contador.

Básicamente, quieres:

un formulario para que el usuario pueda ingresar su texto
un botón para validar el texto
el resultado del número de palabras presentes en el texto

Para ir más allá, también puede dar el número de letras, el número de líneas, el número de la misma ocurrencia y muchas otras cosas.

8. Desarrollar un juego de piedra, papel y tijeras en JavaScript

¿Sabías que las tijeras son la mejor opción en el juego de piedra, papel y tijeras? ¿No? Esto es normal, ¿no?

Para verificar esto, puede codificar su propio juego. La computadora jugará una mano aleatoria de las 3 combinaciones y tu objetivo será vencerla. Tres botones HTML y el uso de Math.random () harán el truco.

Para ir más allá, puede agregar un contador de puntos, agregar inteligencia a su inteligencia artificial (en lugar de simple aleatoriedad) y hacer que dos computadoras jueguen entre sí.

9. Desarrolle un clon de YouTube en JavaScript

Es muy fácil incrustar un video en sus páginas HTML. Pero también es posible utilizar la API de YouTube para realizar búsquedas y presentar los resultados en HTML. Este proyecto puede ser un poco más complicado que los demás, pero será perfecto para que entiendas cómo funcionan las API y cómo realizar solicitudes.

10. Desarrolle un clon de Google Maps en JavaScript

En la misma línea que el clon de YouTube, Google proporciona una API simple para manipular Google Maps. Puede divertirse mostrando lo que quiere en un mapa basado en una matriz de objetos JavaScript, por ejemplo.

11. Desarrollar un bot en JavaScript

Otra forma de aprender Javascript con proyectos pequeños y simples es familiarizarse con los libreros para crear bots. Puede crear fácilmente un bot que realice tareas muy simples y diez líneas de código.

Vaya más allá para progresar aún más con otros proyectos de JavaScript

Espero haberte inspirado a crear uno o más de estos proyectos en JavaScript.

En conclusión

La diferencia entre no tener ningún proyecto en su cartera y tener algunos proyectos pequeños es enorme. Practicar y publicar proyectos en su tiempo libre es una prueba de que tiene la mentalidad adecuada para aprender a programar y eso es exactamente lo que las empresas de contratación quieren ver.