Expenses Chart Component

What challenges did you encounter, and how did you overcome them?

The project only ships with a data.json file containing the last 7 days of spending, but the design also called for a balance card and a monthly summary with a percentage change from the previous month — neither of which can be derived from that single file.

Rather than hardcoding those values, I created two additional JSON files (balance.json and monthlySummary.json) to simulate separate API endpoints, each representing a distinct domain (account balance, monthly aggregation) the way a real backend likely would split them.

This meant fetching from three endpoints instead of one, and calculating the month-over-month percentage change client-side from real data rather than displaying a static string.

My first working version generated each chart column by setting an inline style.height on existing <li> elements inside a forEach loop. It worked, but after digging into optimization with the help of AI, I learned this approach causes unnecessary reflows: each style mutation on an element already in the live DOM can trigger the browser to recalculate layout, and doing that seven times in a row (once per column) is wasteful compared to batching the work.

The fix involved three tools I hadn't used together before:

• <template>: holds inert, reusable HTML that the browser parses but never renders or executes — perfect for a markup "mold" you intend to stamp out multiple times.
• cloneNode(true): creates a fresh, independent copy of that template's content on each iteration, avoiding the cost of re-parsing an HTML string from scratch every time.
• DocumentFragment: a lightweight container that lives outside the rendered DOM tree, letting me assemble all seven columns in memory first, and insert them into the page in a single appendChild call — so the browser recalculates layout once, not seven times.

I still don't fully grasp every nuance of the browser's rendering pipeline, but understanding why batching DOM writes matters, and having a concrete pattern for doing it, was a genuinely useful addition to my toolkit.