Capstone: an accessible table and chart behind one button
Puts the track together: render data safely, an SVG chart with its title, and a toggle button with aria-pressed.
Combines the 6 exercises of the Web basics track. It unlocks when you finish them, but you can try it now.
A small speed-results view: a table and a bar chart, and a button to switch from one to the other.
1. Write render(data): one <tr> per item in #table tbody, with two <td> (name and value). Names may contain markup: write them as text.
2. In the same render, draw in #chart a <title> saying "Tokens per second" and, per item, a <rect> whose width is proportional to the value (the largest is MAX_W) and a <text> with the name. Calling render again replaces everything, it never duplicates.
3. The #view button toggles: aria-pressed becomes "true", its text Show table, the table is hidden (hidden) and #chartbox appears. Another click puts it back.
DATA, SVG_NS, LABEL_W, MAX_W, ROW_H and BAR_H are already defined.
Challenges 0/5
- One row per model, with name and value
- Writes names as text, never as HTML
- Draws one bar per model, proportional (the largest is MAX_W)
- The chart has a title and redrawing duplicates nothing
- The button switches table and chart with 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. one <tr> per item in #table tbody, with two <td>: label and value (as text, never as HTML)
// 2. in #chart: a <title> "Tokens per second", then per item a <rect> (width proportional, largest = MAX_W) and a <text> label
// 3. calling render again replaces everything, it never duplicates
}
viewBtn.addEventListener('click', () => {
// toggle aria-pressed, the button label (Show chart / Show table) and which of table / chartBox is hidden
});
render(DATA);Go deeper: the W3C WAI reference →
This in production, with your data? Let's talk for 15 minutes →