Proyecto final: tabla y gráfico accesibles con un botón
Junta lo del bloque: pintar datos de forma segura, un gráfico SVG con su title y un botón de alternar con aria-pressed.
Combina los 6 ejercicios del bloque Web básica. Se desbloquea al terminarlos, pero puedes intentarlo ya.
Una pequeña vista de resultados de velocidad: una tabla y un gráfico de barras, y un botón para pasar de una a otro.
1. Escribe render(data): una fila <tr> por elemento en #table tbody, con dos <td> (nombre y valor). Los nombres pueden traer marcado: escríbelos como texto.
2. En el mismo render, dibuja en #chart un <title> con «Tokens per second» y, por elemento, un <rect> cuyo ancho sea proporcional al valor (el mayor mide MAX_W) y un <text> con el nombre. Llamar a render otra vez sustituye todo, nunca duplica.
3. El botón #view alterna: aria-pressed pasa a "true", su texto a Show table, la tabla se oculta (hidden) y aparece #chartbox. Otro clic lo deja como estaba.
DATA, SVG_NS, LABEL_W, MAX_W, ROW_H y BAR_H ya están definidos.
Retos 0/5
- Una fila por modelo, con nombre y valor
- Escribe los nombres como texto, nunca como HTML
- Dibuja una barra por modelo, proporcional (la mayor mide MAX_W)
- El gráfico tiene un title y volver a dibujar no duplica nada
- El botón alterna tabla y gráfico con aria-pressed
const viewBtn = document.getElementById('view');
const table = document.getElementById('table');
const chartBox = document.getElementById('chartbox');
const chart = document.getElementById('chart');
function render(data) {
// 1. un <tr> por elemento en #table tbody, con dos <td>: nombre y valor (como texto, nunca como HTML)
// 2. en #chart: un <title> "Tokens per second" y, por elemento, un <rect> (ancho proporcional, el mayor = MAX_W) y un <text> con el nombre
// 3. llamar otra vez a render lo sustituye todo, nunca duplica
}
viewBtn.addEventListener('click', () => {
// alterna aria-pressed, el texto del botón (Show chart / Show table) y cuál de table / chartBox está oculto
});
render(DATA);Para profundizar: la referencia de W3C WAI (en inglés) →
¿Esto en producción, con tus datos? Hablemos 15 minutos →