TypeScript Exercises

Build an entire product card in TypeScript from a product object (name, price, rating, inStock, imageAlt) — create every element, set text content, the image alt, a data-* attribute for the id, and a stock class derived from inStock. Format the price to two decimals. The renderer returns the node without ever touching the document, and two calls with the same product produce two independent nodes.

Implement a banner controller that switches between four states (info, success, warning, error) using classList only, sets the message text via textContent, and updates role and aria-live to match the state. Hiding the banner clears the message and removes every state class so states never overlap.

Build table rows from an array of records using createElement and a DocumentFragment, appending to <tbody> in a single operation. Money cells receive a numeric class; each row carries a data-* id; cell text is set via textContent so a value containing angle brackets renders as text, not markup; and an empty array leaves the <tbody> untouched.

Wire increment / decrement buttons to a numeric display bound between 1 and a supplied maximum, disabling each button at its bound. Values typed directly into the field are clamped on blur, and a change callback fires only when the value actually changes — not on repeat writes of the same number.

Open and close a dialog element, closing on the close button, on Escape, and on a click of the backdrop but not the panel. Focus moves into the dialog on open and returns to the element that opened it on close, and the key listener is removed on close so a later Escape press does nothing.

Update a counter on every input event showing characters used against a maximum, add a warning class within the last 20 chars, and block further input beyond the limit while still allowing deletion. Pasting an over-length string truncates to the limit. Use the input event, not keydown.

Implement renderRow, renderList, renderPanel, and mount to turn a typed job array into an Open Positions panel. Renderers must be pure (no document queries, no side effects) and return fresh nodes; renderList([]) returns a documented empty-state node; mount replaces container contents so repeat calls leave exactly one child.

Implement renderFeed and the four state renderers. renderFeed dispatches on a discriminated FeedState union (loading | empty | error | list), swaps the container's single child, and wires an onRetry callback into the error state that fires exactly once per click. Switching between states must leave no residue from the previous state.

Implement renderComment + renderCommentList and the splitLines, truncate, isSafeUrl helpers. Review text is rendered via textContent only so a raw <script> never becomes an element; links are built from a separate url field and only when the scheme is http(s); long text truncates at 240 chars with an expand control that reveals the full body on click.

Implement visibleFieldNames, validate, renderGroups, renderFieldError, and renderPayload. The insurance-type select reveals one of three groups (Auto / Home / Life); switching type clears the previously visible group's inputs; validation reports errors only for currently visible fields; a valid submit renders a JSON payload with the common fields plus the visible group's fields only.

Implement isDirty, validate, and the render helpers (renderValues, renderFieldError, renderSaveEnabled, renderSavedFlash). Save enables the moment values diverge from the baseline and disables when they match again; a valid save promotes current values to the new baseline; Reset restores the baseline; and the browser's beforeunload prompt fires only while the form is dirty.

Implement validate and the renderFieldError, renderSubmitEnabled, renderSuccess helpers. Errors appear only after a field is blurred, aria-invalid and aria-describedby toggle in lockstep with the message, the submit button tracks live validity across name / email / password (min 8) / confirm, and mismatch is reported on the confirm field only. A valid submit clears the form, re-disables submit, and reveals the success

Split a monolithic entry into three named-export modules — format (formatPrice, formatSavingsPercent), validate (isValidEmail), and dom (setText, setDisabled) — and wire them from a thin entry inside a single DOMContentLoaded handler. No file may assign to window, importing any helper in isolation must not touch the document, and the helper import graph must have no cycles.

Write config.ts — DEFAULTS, UnknownConfigKeyError, getConfig, and the generically-typed getConfigValue<K>(key) — as the single seam between a raw window.__STOREFRONT_CONFIG__ object and every consumer. Defaults document absent keys, injected values (including false and "") win over defaults, the returned object is frozen, unknown keys throw the named error, and no consumer file references the raw global.

Implement createChartLoader(importFn) and the default loadChart so a heavy chart module is only fetched via import('./chart') when the user clicks Load. The loader dedupes concurrent calls to a single in-flight promise, caches the resolved module for every future call, and does not cache failures so Retry starts clean. The entry never references ./chart statically.

Reduce a bookings array into a map keyed by date, each entry holding its bookings sorted by start time and a count. Every day in the requested range is included — days with no bookings appear with an empty list — keys are returned in chronological order, and a booking outside the range is excluded.

Sort leaderboard entries by score descending with a documented tiebreak (earlier finish time, then name) without mutating the input. Support an ascending toggle and return a position for each entry, sharing a position number across genuine ties. The order is stable across repeated calls.

Compute an order summary from an order-lines array using map, filter, and reduce: item count, subtotal, discount total, tax, and grand total, excluding cancelled lines from every figure. An empty order returns zeros — never NaN or null — and a line with zero quantity contributes nothing. The input array is never mutated.

Transform a stock array into a summary (total value, low-stock count, out-of-stock list, top categories by value) and render each part into the panel. Values render formatted, every derived figure comes from the transform rather than the DOM, and re-running with new data replaces the rendered summary rather than appending.