LAB | DOM Challenges

Introduccion

En este lab vas a practicar manipulacion del DOM a traves de 10 ejercicios independientes. Cada ejercicio tiene su propia carpeta con un archivo index.html y un archivo script.js.

Tu objetivo es completar el codigo en cada script.js siguiendo las instrucciones de las iteraciones que encontraras como comentarios en el archivo.

Como empezar

1. Haz fork de este repositorio en tu cuenta de GitHub
2. Clona tu fork en tu ordenador
3. Abre la carpeta del ejercicio que quieras resolver
4. Abre el index.html en tu navegador
5. Escribe tu codigo en script.js y recarga el navegador para ver los resultados

Tip: Usa console.log() y las DevTools del navegador para depurar tu codigo.

Ejercicios

#	Ejercicio	Dificultad	Conceptos clave
01	Toggle Visibility	⭐	querySelector, classList.toggle, event listener
02	Dropdown Menu	⭐	classList.toggle, click fuera para cerrar
03	Counter	⭐	textContent, multiples listeners
04	Form Preview	⭐⭐	.value, evento input, actualizacion en tiempo real
05	Color Changer	⭐⭐	style.backgroundColor, dataset, delegacion de eventos
06	TODO List	⭐⭐⭐	createElement, appendChild, prompt(), remove()
07	Accordion FAQ	⭐⭐⭐	querySelectorAll, delegacion, solo uno abierto
08	Image Gallery	⭐⭐⭐	Navegacion prev/next, dataset, estado con variable
09	Form Validation	⭐⭐⭐⭐	preventDefault(), validacion en tiempo real, clases CSS
10	Shopping List	⭐⭐⭐⭐	localStorage, JSON.parse/stringify, CRUD completo

Instrucciones

• Cada script.js contiene comentarios numerados (Iteration 1, Iteration 2, etc.) que te guian paso a paso
• Resuelve las iteraciones en orden
• Empieza por el ejercicio 01 y ve subiendo de nivel
• No necesitas terminar todos los ejercicios — llega tan lejos como puedas

Recursos utiles

• MDN - Document.querySelector()
• MDN - EventTarget.addEventListener()
• MDN - Element.classList
• MDN - Document.createElement()
• MDN - Window.localStorage

Happy coding! 💙