Build frontend fundamentals with a focused selection of UI and JavaScript coding challenges.
Start coding without an account. Sign in to save your work.
75 questions to explore
Choose a challenge. Make it work.
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 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.
Build a simple user profile card. Fetch the supplied demo API once when the component mounts, save its JSON response in state, and render the name, email, and city. Demo API: GET /api/demo/user on this app. It returns fictional public data: { "id": 1, "name": "Maya Patel", "email": "maya@example.com", "city": "Pune" } . No login or API key is needed. In the sandbox, import APP_ORIGIN from /__frontcrate_api__.js and fetch APP_ORIGIN + "/api/demo/user" . The starter comment includes this URL.
20 of 75 questions loaded