JavaScript de Cero a Experto / DOM a fondo

Reto: Mi Bolsillo en pantalla

Reto35 min60 XP

Seis módulos viviendo en la consola se acabaron hoy: vas a renderizar "Mi Bolsillo" en una página de verdad — la lista de gastos construida desde el array, con formato colombiano, clases según el dato y total calculado. El mismo patrón con el que se pinta cualquier app del mundo real.

Reto

Mi Bolsillo en pantalla

Media30 min60 XP(×2 sin mirar la solución)

Qué debes construir

Con estos datos de partida:

datos.js

const gastos = [
{ nombre: "Almuerzo", valor: 18000, categoria: "comida" },
{ nombre: "Bus", valor: 5800, categoria: "transporte" },
{ nombre: "Café", valor: 4500, categoria: "comida" },
{ nombre: "Cine", valor: 25000, categoria: "ocio" },
{ nombre: "Mercado", valor: 92000, categoria: "comida" },
];

Debes producir exactamente esta página (los gastos que superan $ 20.000 van resaltados en ámbar):

<h1 id="titulo"></h1>
<ul id="lista"></ul>
<p class="resumen">Total: <strong id="total"></strong></p>
<p class="resumen" id="nota"></p>

body { font-family: system-ui; padding: 24px; background: #0b1120; color: #f1f5f9; }
h1 { font-size: 24px; margin: 0 0 14px; }
li { margin: 6px 0; color: #cbd5e1; }
.caro { color: #f59e0b; font-weight: 700; }
.resumen { color: #94a3b8; }
.resumen strong { color: #f1f5f9; }

const gastos = [
{ nombre: "Almuerzo", valor: 18000, categoria: "comida" },
{ nombre: "Bus", valor: 5800, categoria: "transporte" },
{ nombre: "Café", valor: 4500, categoria: "comida" },
{ nombre: "Cine", valor: 25000, categoria: "ocio" },
{ nombre: "Mercado", valor: 92000, categoria: "comida" },
];
const cop = new Intl.NumberFormat("es-CO", {
style: "currency",
currency: "COP",
maximumFractionDigits: 0,
});
document.querySelector("#titulo").textContent = "Mi Bolsillo";
const items = gastos.map((gasto) => {
const item = document.createElement("li");
item.textContent = `${gasto.nombre} — ${cop.format(gasto.valor)}`;
item.dataset.categoria = gasto.categoria;
if (gasto.valor > 20000) item.classList.add("caro");
return item;
});
document.querySelector("#lista").append(...items);
const total = gastos.reduce((acum, gasto) => acum + gasto.valor, 0);
document.querySelector("#total").textContent = cop.format(total);
const caros = document.querySelectorAll(".caro").length;
document.querySelector("#nota").textContent = `Gastos por encima de $ 20.000: ${caros}`;

El HTML de partida ya trae los contenedores vacíos (#titulo, #lista, #total, #nota) y el CSS ya define la clase .caro. TODO lo demás sale de JavaScript. Requisitos:

El h1#titulo dice "Mi Bolsillo" puesto con textContent.
Un formateador Intl.NumberFormat de pesos colombianos (es-CO, COP, sin decimales) creado UNA sola vez.
Cada gasto se convierte en un li con createElement: texto nombre — valor formateado.
Cada li lleva su dataset.categoria, y la clase caro (con classList) SOLO si el valor supera 20000.
Los li entran a la lista con UNA sola inserción: append(...items) o DocumentFragment — nada de append dentro del bucle.
El total se calcula con reduce y se pinta formateado en #total.
#nota muestra cuántos gastos quedaron resaltados — contándolos en el DOM con querySelectorAll(".caro"), no en el array.

Reglas

Cero innerHTML: todo entra con createElement + textContent (los datos podrían venir de un usuario mañana).
La plata solo la formatea Intl — nunca a mano.
El estilo del resaltado vive en el CSS (.caro); JS solo pone la clase.
Usa el patrón iniciar para esperar el DOM.

30:00

Cuando estés listo, arranca el reloj.

Las tres decisiones que resuelven este reto:

Una función crearItem que convierte dato → elemento. Es la unidad de todo el render: recibe un gasto, devuelve su li completamente preparado (texto, dataset, clase condicional). Al aislarla, map la aplica a todos y el código se lee como la frase "convierte los gastos en items y móntalos".
Preparar TODO antes de insertar. Los li nacen y se visten en memoria (el taller); append(...items) los instala en un solo lote — el hábito de rendimiento de la lección 7, gratis desde el día uno.
Contar los caros EN el DOM y al final. El requisito obliga a respetar el orden natural del render: primero se monta, después se consulta. querySelectorAll solo ve lo que ya existe.

Autoevaluación: ¿tu total dice $ 145.300 y la nota cuenta 2 gastos resaltados (Cine y Mercado)? ¿agregarle un sexto gasto al array actualiza lista, total y conteo SIN tocar más código? ¿tu bucle/map no tiene ningún append adentro? ¿no hay ni un innerHTML? Si todo es sí: acabas de escribir tu primer render de datos real — el patrón que React, Angular y compañía industrializan.

Qué sigue

Tu página ya se pinta sola desde los datos… pero es una foto: no reacciona a nada. El módulo 8 le da vida de verdad: eventos y listeners — clicks, teclas, formularios — para que "Mi Bolsillo" deje de ser un reporte y se vuelva una aplicación que responde al usuario.