Build your frontend skills.

Write flatten(values): take an array that can contain other arrays and return a new array containing every non-array value, in its original left-to-right order.

Build a click counter with one button. Its label starts at Clicks: 0 and increases by one whenever the button is activated.

Implement debounce(fn, wait). Delay invoking fn until wait milliseconds have passed since the most recent call.

Implement throttle(fn, wait). Invoke immediately when idle, then at most once per wait milliseconds, retaining the latest call for trailing execution.

Build a todo list that lets users add tasks, mark them complete or active, and delete them. Use the selected framework to manage state and render updates.

Implement useQuery(url, onChange?) as a framework-independent function that fetches JSON and returns the current data, loading, and error states. This is a plain JavaScript/TypeScript function, not a React Hook or a TanStack Query clone. Open usage-examples.md in the editor for JavaScript, TypeScript, React, Vue, and Angular usage examples.

Implement arrayMap to recreate the core behavior of Array.prototype.map using a loop. Work with a standalone function that receives the array as its first argument.

Implement arrayFilter to recreate the core behavior of Array.prototype.filter using a loop. Work with a standalone function that receives the array as its first argument.

Implement arrayReduce to recreate the core behavior of Array.prototype.reduce using a loop. Work with a standalone function that receives the array as its first argument.

Implement flattenObject(object). Convert nested object properties into a new flat object whose keys are dot-separated paths. Preserve each leaf value without changing the input. For example, { user: { name: "Ada" } } becomes { "user.name": "Ada" }. Arrays are leaf values in this exercise; use Flatten Array for array flattening.