🏆 Retos de Programación
Pon a prueba tus conocimientos con estos retos progresivos. Intenta resolverlos antes de ver la pista.
Completados: 0 / 6
🟢 Fácil
1. Centra un div con Flexbox
Crea un contenedor que ocupe toda la pantalla y centre un
cuadrado de 100x100px tanto horizontal como verticalmente usando
solo Flexbox.
/* Aplica esto al contenedor padre */
display: flex;
justify-content: center; /* eje horizontal */
align-items: center; /* eje vertical */
height: 100vh; /* ocupa toda la pantalla */
display: flex;
justify-content: center; /* eje horizontal */
align-items: center; /* eje vertical */
height: 100vh; /* ocupa toda la pantalla */
2. Alerta al hacer clic en un botón
Crea un botón en HTML que, al hacerle clic, muestre un
alert() con el texto "¡Hola, mundo!" usando
JavaScript.
const btn = document.querySelector('#miBoton');
btn.addEventListener('click', () => {
alert('¡Hola, mundo!');
});
btn.addEventListener('click', () => {
alert('¡Hola, mundo!');
});
🟡 Medio
3. Contador con +/- botones
Crea una página con un número en pantalla y dos botones: uno que
lo incremente (+1) y otro que lo decremente (-1). El número no
debe bajar de 0.
let count = 0;
const display = document.getElementById('num');
function increment() { count++; display.textContent = count; }
function decrement() { if(count > 0) { count--; display.textContent = count; } }
const display = document.getElementById('num');
function increment() { count++; display.textContent = count; }
function decrement() { if(count > 0) { count--; display.textContent = count; } }
4. Lista de tareas dinámica
Crea un input de texto y un botón "Agregar". Al presionarlo,
debe añadir el texto como un nuevo
<li> en
una lista. Al hacer clic en el ítem, debe eliminarse.
const li = document.createElement('li');
li.textContent = input.value;
li.addEventListener('click', () => li.remove());
lista.appendChild(li);
li.textContent = input.value;
li.addEventListener('click', () => li.remove());
lista.appendChild(li);
🔴 Difícil
5. Barra de búsqueda con filtro en tiempo real
Con una lista de 8 países en un array, muéstralos como tarjetas.
Agrega un input que filtre las tarjetas visibles al escribir,
sin recargar la página. Usa el evento
input.
input.addEventListener('input', () => {
const q = input.value.toLowerCase();
const filtered = paises.filter(p => p.toLowerCase().includes(q));
renderCards(filtered); // función que dibuja las tarjetas
});
const q = input.value.toLowerCase();
const filtered = paises.filter(p => p.toLowerCase().includes(q));
renderCards(filtered); // función que dibuja las tarjetas
});
6. Modo Oscuro / Claro con localStorage
Agrega un botón toggle 🌙/☀️ que cambie el tema de la página
(oscuro/claro). El tema elegido debe guardarse en
localStorage y aplicarse automáticamente al
recargar la página.
// Al cargar la página:
const tema = localStorage.getItem('tema') || 'dark';
document.body.classList.add(tema);
// Al presionar el botón:
document.body.classList.toggle('light');
localStorage.setItem('tema', document.body.classList.contains('light') ? 'light' : 'dark');
const tema = localStorage.getItem('tema') || 'dark';
document.body.classList.add(tema);
// Al presionar el botón:
document.body.classList.toggle('light');
localStorage.setItem('tema', document.body.classList.contains('light') ? 'light' : 'dark');