APRENDER ES PONER A PRUEBA
Seis retos pequeños, seis ejercicios para detectar errores y un registro de estudio guardado en este navegador.
Cada reto tiene un objetivo, una pista y una solución de referencia. No hay una única forma correcta de resolverlo.
RETO 1
Construye una ficha con título, descripción y enlace. Distingue acción y navegación.
Un article funciona si la ficha tiene sentido por sí sola.
<article><h2>Mi curso</h2><p>Aprende una idea cada día.</p><a href="#">Leer más</a></article>article { padding: 24px; border: 1px solid #ddd; border-radius: 16px; }<article><h2>Mi curso</h2><p>Aprende una idea cada día.</p><a href="#">Leer más</a></article>
article { padding: 24px; border: 1px solid #ddd; border-radius: 16px; }
RETO 2
Añade una etiqueta, una instrucción y un campo requerido. Explica el resultado del envío local.
Asocia label y control por id y for.
<form id="form"><label for="nombre">Nombre</label><input id="nombre" required><button>Comprobar</button><p id="respuesta" role="status"></p></form>input, button { padding: 12px; margin: 8px; }document.querySelector("#form").addEventListener("submit", e => { e.preventDefault(); document.querySelector("#respuesta").textContent = "Formulario válido. No se envían datos."; });<form id="form"><label for="nombre">Nombre</label><input id="nombre" required><button>Comprobar</button><p id="respuesta" role="status"></p></form>
input, button { padding: 12px; margin: 8px; }
document.querySelector("#form").addEventListener("submit", e => { e.preventDefault(); document.querySelector("#respuesta").textContent = "Formulario válido. No se envían datos."; });
RETO 3
Muestra tres tarjetas y apílalas cuando el espacio sea pequeño.
Prueba repeat, minmax y auto-fit.
<section class="grid"><article>Uno</article><article>Dos</article><article>Tres</article></section>.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; } article { padding: 24px; background: #eef1ff; }<section class="grid"><article>Uno</article><article>Dos</article><article>Tres</article></section>
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; } article { padding: 24px; background: #eef1ff; }
RETO 4
Haz que un botón muestre una lista y actualice aria-expanded.
Cambia el estado y la presentación juntos.
<button id="menu" aria-controls="enlaces" aria-expanded="false">Menú</button><nav id="enlaces" hidden><a href="#">Inicio</a><a href="#">Ayuda</a></nav>button, a { padding: 12px; } a { display: block; } [hidden] { display: none; }const boton = document.querySelector("#menu"); const nav = document.querySelector("#enlaces"); boton.addEventListener("click", () => { const abierto = boton.getAttribute("aria-expanded") !== "true"; boton.setAttribute("aria-expanded", abierto); nav.hidden = !abierto; });<button id="menu" aria-controls="enlaces" aria-expanded="false">Menú</button><nav id="enlaces" hidden><a href="#">Inicio</a><a href="#">Ayuda</a></nav>
button, a { padding: 12px; } a { display: block; } [hidden] { display: none; }
const boton = document.querySelector("#menu"); const nav = document.querySelector("#enlaces"); boton.addEventListener("click", () => { const abierto = boton.getAttribute("aria-expanded") !== "true"; boton.setAttribute("aria-expanded", abierto); nav.hidden = !abierto; });
RETO 5
Suma, resta y reinicia un número. Mantén el estado en una variable.
Primero cambia el valor; después actualiza output.
<button id="menos">Restar</button><output id="valor">0</output><button id="mas">Sumar</button><button id="reset">Reiniciar</button>button { padding: 12px; } output { padding: 20px; font-size: 32px; }let n = 0; const salida = document.querySelector("#valor"); function mostrar() { salida.value = n; } document.querySelector("#mas").onclick = () => { n++; mostrar(); }; document.querySelector("#menos").onclick = () => { n--; mostrar(); }; document.querySelector("#reset").onclick = () => { n = 0; mostrar(); };<button id="menos">Restar</button><output id="valor">0</output><button id="mas">Sumar</button><button id="reset">Reiniciar</button>
button { padding: 12px; } output { padding: 20px; font-size: 32px; }
let n = 0; const salida = document.querySelector("#valor"); function mostrar() { salida.value = n; } document.querySelector("#mas").onclick = () => { n++; mostrar(); }; document.querySelector("#menos").onclick = () => { n--; mostrar(); }; document.querySelector("#reset").onclick = () => { n = 0; mostrar(); };
RETO 6
Filtra una lista al escribir, sin distinguir mayúsculas. Añade un estado sin resultados.
Lee el texto del control y compara cada elemento.
<label>Buscar <input id="buscar"></label><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><p id="estado" role="status"></p>input { padding: 12px; } li { padding: 8px; }document.querySelector("#buscar").addEventListener("input", e => { let total = 0; document.querySelectorAll("li").forEach(li => { li.hidden = !li.textContent.toLowerCase().includes(e.target.value.toLowerCase()); if (!li.hidden) total++; }); document.querySelector("#estado").textContent = total ? `${total} resultados` : "Sin resultados"; });<label>Buscar <input id="buscar"></label><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><p id="estado" role="status"></p>
input { padding: 12px; } li { padding: 8px; }
document.querySelector("#buscar").addEventListener("input", e => { let total = 0; document.querySelectorAll("li").forEach(li => { li.hidden = !li.textContent.toLowerCase().includes(e.target.value.toLowerCase()); if (!li.hidden) total++; }); document.querySelector("#estado").textContent = total ? `${total} resultados` : "Sin resultados"; });
Lee el fragmento y elige una mejora. La explicación distingue el problema de los cambios puramente visuales.
<div onclick="abrir()">Abrir ayuda</div><input placeholder="Correo">.grid { width: 1000px; }const puntos = 0;
puntos += 1;[10, 2, 30].sort();const r = await fetch("datos.json");
const datos = await r.json();Elige un reto o una etapa; edita el código y pulsa Ejecutar. El ejemplo está aislado y no envía datos.
Marca los temas que estudiaste. Este registro es una autoevaluación; no comprueba dominio ni se sincroniza con otros dispositivos.