10 proyectos de JavaScript para practicar (de principiante a avanzado)

La teoría se olvida; los proyectos de JavaScript para practicar se quedan. Construir algo tú mismo, aunque sea pequeño, fija los conceptos mucho mejor que ver vídeos. Aquí tienes 10 ideas ordenadas de menor a mayor dificultad. En cada una te digo qué aprendes, qué tiene que hacer como mínimo, un reto extra y un consejo para no atascarte.

Es la parte de práctica de la hoja de ruta para aprender JavaScript. Si te falta base, empieza por ahí o por las mejores páginas para aprender JavaScript.

Respuesta rápida: para principiantes, una calculadora, una lista de tareas, el ahorcado y una cuenta atrás. Para nivel intermedio, una app del tiempo con una API, un quiz, un buscador con filtro y una galería paginada. Para nivel avanzado, una SPA con React o Vue y una mini tienda con carrito. Hazlos en ese orden: cada uno añade algo nuevo al anterior.

Los 10 proyectos de un vistazo

#	Proyecto	Nivel	Qué practicas	¿Usa una API?
1	Calculadora	Principiante	Eventos y DOM	No
2	Lista de tareas	Principiante	Arrays y localStorage	No
3	Ahorcado	Principiante	Strings y estado	No
4	Reloj y cuenta atrás	Principiante	Fechas y temporizadores	No
5	App del tiempo	Intermedio	Fetch y async/await	Sí (Open-Meteo)
6	Quiz	Intermedio	Arrays de objetos	Opcional
7	Buscador con filtro	Intermedio	filter() y eventos de teclado	No
8	Galería paginada	Intermedio	Listas dinámicas y paginación	Sí
9	SPA con un framework	Avanzado	Componentes, estado y rutas	Opcional
10	Mini tienda con carrito	Avanzado	Estado complejo y reduce()	Sí (Fake Store API)

Nivel principiante

1. Calculadora

Qué aprendes: eventos de clic, manipulación del DOM y operaciones básicas.

• Lo mínimo: sumar, restar, multiplicar y dividir, con un botón para borrar.
• Reto extra: que funcione también con el teclado y que no se rompa al dividir entre cero.
• Consejo: separa la lógica de la operación del código que actualiza la pantalla.

2. Lista de tareas (to-do)

Qué aprendes: añadir y borrar elementos del DOM, arrays y guardar en localStorage.

• Lo mínimo: añadir una tarea, marcarla como hecha y borrarla.
• Reto extra: filtros de «todas», «pendientes» y «hechas», y editar una tarea con doble clic.
• Consejo: guarda las tareas para que no se pierdan al recargar. La base es esta:

const tareas = JSON.parse(localStorage.getItem('tareas')) ?? [];

function guardar() {
  localStorage.setItem('tareas', JSON.stringify(tareas));
}

function agregar(texto) {
  tareas.push({ id: Date.now(), texto, hecha: false });
  guardar();
}

3. Juego del ahorcado

Qué aprendes: strings, condicionales y control de estado.

• Lo mínimo: mostrar la palabra oculta con guiones, recibir letras y contar los fallos.
• Reto extra: una lista de palabras por categorías y un teclado en pantalla para el móvil.
• Consejo: empieza con una sola palabra fija antes de meter una lista.

4. Reloj y cuenta atrás

Qué aprendes: fechas, setInterval y formateo de números.

• Lo mínimo: un reloj en tiempo real y una cuenta atrás hasta una fecha que elija el usuario.
• Reto extra: un aviso sonoro al llegar a cero y guardar la fecha elegida en localStorage.
• Consejo: recuerda limpiar el intervalo con clearInterval cuando termine. Tienes el código paso a paso en mi cuenta atrás en JavaScript.

Nivel intermedio

5. App del tiempo con una API

Qué aprendes: Fetch, async/await y manejo de JSON.

• Lo mínimo: escribir una ciudad y ver su temperatura actual.
• Reto extra: la previsión de varios días y un gráfico de temperaturas con una de estas librerías de gráficos.
• Consejo: controla el error cuando la ciudad no existe. Usa Open-Meteo: es gratis para uso no comercial y no pide clave. Primero buscas la ciudad y luego pides el tiempo de sus coordenadas:

async function tiempoEn(ciudad) {
  const geo = await fetch(
    `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(ciudad)}&count=1&language=es`
  ).then((r) => r.json());

  if (!geo.results) throw new Error('No encuentro esa ciudad');

  const { latitude, longitude, name } = geo.results[0];
  const datos = await fetch(
    `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m`
  ).then((r) => r.json());

  return `${name}: ${datos.current.temperature_2m} °C`;
}

tiempoEn('Lugo').then(console.log).catch((e) => console.error(e.message));

6. Quiz o test de preguntas

Qué aprendes: recorrer arrays de objetos, puntuación y estados de la app.

• Lo mínimo: diez preguntas con cuatro respuestas, una pantalla final con la puntuación y un botón para repetir.
• Reto extra: un temporizador por pregunta, o preguntas al azar desde Open Trivia DB (gratis, pero en inglés).
• Consejo: guarda las preguntas en un array de objetos, no en el HTML.

7. Buscador con filtro en vivo

Qué aprendes: eventos de teclado, filter() y rendimiento.

• Lo mínimo: una lista de cien elementos que se filtra mientras escribes.
• Reto extra: resaltar el texto que coincide y esperar a que el usuario deje de teclear antes de filtrar (debounce).
• Consejo: filtra sobre los datos, no ocultando nodos del DOM a mano.

8. Galería con datos de una API

Qué aprendes: pintar listas dinámicas, paginación y estados de carga.

• Lo mínimo: mostrar personajes de The Rick and Morty API, con botones de «anterior» y «siguiente».
• Reto extra: scroll infinito y una vista ampliada al hacer clic en una imagen.
• Consejo: muestra un «cargando…» mientras llegan los datos. Esa API ya te dice en cada respuesta cuántas páginas hay y cuál es la siguiente.

Nivel avanzado

9. SPA (Single Page Application) con un framework

Qué aprendes: componentes, estado y enrutado.

• Lo mínimo: rehacer la app del tiempo o el quiz como SPA, con dos o tres pantallas.
• Reto extra: guardar el estado en la URL para que se pueda compartir una pantalla concreta.
• Consejo: elige un framework y no cambies a mitad. Empieza por React o Vue, y antes repasa Node.js y npm.

10. Mini tienda con carrito

Qué aprendes: gestión de estado compleja, cálculo de totales y persistencia.

• Lo mínimo: un catálogo con los productos de Fake Store API, un carrito con cantidades y el total.
• Reto extra: un filtro por categoría y un cupón de descuento.
• Consejo: modela el carrito como un array de objetos y calcula el total con reduce().

Cómo sacarles el máximo

• Termínalos: un proyecto acabado enseña más que cinco a medias.
• Súbelos a GitHub: te sirve de portfolio y de práctica con control de versiones. Tienes los comandos de Git más utilizados en una chuleta.
• Aplica lo aprendido: escribe código limpio y, en los intermedios, añade algún test.
• Mejóralos por capas: primero que funcione, luego que sea bonito, luego que sea robusto.
• Usa un buen editor: Visual Studio Code con la consola del navegador abierta te enseña tanto como el propio proyecto.

Cómo convertirlos en tu portfolio

Tres o cuatro proyectos bien presentados valen más que diez repositorios sin explicar. Para cada uno:

• Publica una demo. GitHub Pages es gratis para repositorios públicos: quien te evalúa quiere probarlo en un clic, no descargar nada.
• Escribe un README corto. Qué hace, con qué lo hiciste, una captura y qué problema te costó resolver.
• Elige los que demuestran más. La app del tiempo y la tienda con carrito enseñan APIs y estado, que es lo que se pregunta en las entrevistas.
• Cuida el aspecto. Un diseño limpio y responsive multiplica la impresión que causa el mismo código.

Preguntas frecuentes

¿Cuántos proyectos necesito para aprender JavaScript?

No es cuestión de número, sino de dificultad creciente. Con 4-5 proyectos bien terminados que suban de nivel aprendes más que con veinte calculadoras iguales. Cada uno debe enseñarte algo nuevo.

¿Los hago con JavaScript puro o con un framework?

Los primeros, con JavaScript puro: te obliga a entender lo que pasa por debajo. Reserva el framework para los proyectos avanzados (la SPA, la tienda), cuando ya domines la base.

¿Sirven para el portfolio?

Sí, sobre todo los intermedios y avanzados con datos de una API o un carrito funcional. Súbelos a GitHub y publica una demo: demuestran más que cualquier certificado.

¿Dónde encuentro APIs gratis para practicar?

Las de este post no piden registro: Open-Meteo para el tiempo, Open Trivia DB para preguntas, The Rick and Morty API para listas con imágenes y Fake Store API para una tienda. Si es tu primera vez con una API, lee antes cómo funciona Fetch.

¿Cuánto tiempo me llevará cada uno?

Depende de tu base. Los primeros suelen salir en una tarde, y los avanzados pueden llevarte varios fines de semana. Si uno te bloquea más de dos días, pasa al siguiente y vuelve después.

¿Qué hago cuando me atasco?

Divide el problema en pasos pequeños y pruébalos uno a uno en la consola. Si te falta teoría, vuelve a la hoja de ruta. Si prefieres un libro, «JavaScript elocuente» tiene ejercicios al final de cada capítulo y también se puede leer gratis en su web.

Elige uno y empieza hoy. Cuando te atasques, tira de la hoja de ruta de JavaScript y de las mejores páginas para aprender JavaScript. Disfrútalo.

Este artículo incluye algunos enlaces de afiliado: si compras a través de ellos, recibo una pequeña comisión sin coste adicional para ti.