Frontend Coding Challenges

Most challenges are free to start. Premium solutions and deeper walkthroughs are explained once on the pricing page.

Select JavaScript, React, Angular, or Vue from the tech tabs to load the related prep path.

139 matches

Selectors & Text: Hero Title + Lead + Emphasis (Interview Warm-up)

Style a small hero header using both element and class selectors. Establish base typography on element selectors, then o…

Warm-Up: Basic Structure

Build a valid HTML document skeleton with `<!doctype html>`, `<html>`, `<head>`, and `<body>`. Include a `<meta charset>…

Create a Counter Function

Support an optional initial value and keep the API simple so consumers can call inc/dec/get without exposing the interna…

React Counter (Guarded Decrement)

Build a React counter component with increment/decrement and a zero floor. Use state for the count, disable decrement at…

Framework versionsOpen this challenge in your stack

Sleep / Delay Promise

Implement sleep(ms) that returns a Promise resolving after ms milliseconds. Use it to pause async flows like retries, ex…

Todo List (Component with Local State)

Create a local-state todo list: add, toggle, and remove items. Keep input state controlled, generate stable ids, and upd…

Framework versionsOpen this challenge in your stack

Capitalize the first letter of every word while preserving spacing. Handle multiple spaces and punctuation without colla…

Check if an Object or Array is Empty

Implement `isEmpty(obj)` that returns `true` only if the input is an object or array with no own keys/elements, and `fal…

Check if Two Arrays Are Equal

Check whether two arrays are equal by length and by value at each index. This is a shallow equality check for primitive…

Implement clamp(value, lower, upper) to keep a number within an inclusive range. If the value is below the lower bound,…

Cleanup Bag (Dispose Subscriptions)

Implement createCleanupBag() that helps prevent memory leaks by tracking cleanup functions (like removing event listener…

Implement countVowels(str) that returns how many vowels appear in a string. Normalize case, decide whether to include 'y…

Create Object with Prototype

Implement objectCreate(proto) to return a new object whose prototype is `proto`. Use a temporary constructor function or…

Escape HTML for Safe Text

Implement escapeHtml(text) to convert &, <, >, " and ' into HTML entities so user-provided text can be safely inserted i…

Remove all falsy values from an array while preserving order. Use a boolean filter to drop false, 0, empty string, null,…

This should not deep-flatten; only the first nesting level is removed, matching Array.prototype.flat(1). Use it to norma…

Measure Function Duration (Profiling Wrapper)

Implement measure(fn, now?) to profile execution time. It should run a function, measure the duration using the provided…

Once (Function Wrapper)

Implement once(fn) that returns a wrapper which executes `fn` only on the first call. Cache and return the result on sub…

Shallow Clone (Object or Array)

Create a shallow copy of an array or object. Copy top-level properties but keep nested references intact, and document t…

Update Array at Index (Immutable)

Return a new array with one index updated, leaving the original array untouched. This is the core immutable update patte…

Implement arrayForEach (no prototype mutation)

You should also ensure the callback is invoked with the correct thisArg and that the method returns undefined like the n…

Box Model: Margin, Padding, Border

Build a card layout that clearly demonstrates the CSS box model. Use padding to add internal breathing room, a border to…

Contact Form with Proper Labels

The success message should only appear after a valid submit, so native validation must be enabled and the form action sh…

Data Helper 1: Get Value by Path

Implement `getByPath(obj, path, fallback?)` that safely reads a nested value from an object. This is extremely common in…

Display & Centering: Center Inline Content

This is a horizontal alignment task, so avoid flex unless vertical alignment is explicitly required by the prompt. Use t…

Inline vs Block Elements

Demonstrate the difference between block and inline elements using pure HTML. Show that block elements start new lines w…

Create semantic links and images: use anchor elements with descriptive text, add target/rel when opening new tabs, and i…

Build a semantic navigation bar using `nav > ul > li > a` with hash links. Use CSS `:target` to show only one section at…

Positioning: Relative/Absolute Badge

This pattern is used in notifications, status indicators, and card metadata, so the badge should remain anchored even as…

Querystring Helper 1: Implement `parseQueryString`

Implement `parseQueryString(qs)` that converts a URL querystring into a plain object. This is very common in frontend wo…

Safe JSON Parse (Fallback on Error)

Implement safeJsonParse(text, fallback = null) to safely parse JSON. It should return the parsed value for valid JSON st…

Sum of Numbers in an Array

Sum only numeric values from an input array, ignoring non-numbers and `NaN`. This reinforces safe type checking, accumul…

Validate Username (Rules + Edge Cases)

Implement validateUsername(name) to enforce common username rules and handle edge cases safely. Rules: 3–16 chars, lower…

Create a Deferred Promise (For Async Tests)

Implement createDeferred() to build a controllable Promise: { promise, resolve, reject }. This is a common testing tool…

Difficulty Intermediate

Create a Spy Function (Test Double)

Implement createSpy(impl?) to produce a callable spy that records every call (args + this) and optionally delegates to a…

Difficulty Intermediate

Promise.any (First Fulfilled)

Implement promiseAny(promises) that behaves like Promise.any. It should resolve with the first fulfilled value, ignoring…

Difficulty Intermediate

Run With a Performance Budget (Sync or Async)

Implement runWithPerfBudget(fn, budgetMs, now?) to time a sync or async function and report whether it stayed within a b…

Difficulty Intermediate

Create an LRU Cache (Bounded Memory)

Implement createLruCache(maxSize) to keep a bounded, eviction-based cache. This is a classic way to prevent "memory leak…

Difficulty Intermediate

Fetch JSON with Timeout + Abort

Implement fetchJson(url, options) that fetches JSON with built-in timeout and abort support. It should abort on timeout,…

Difficulty Intermediate

Implement `instanceof`

Recreate `instanceof` by walking the prototype chain and checking if it reaches `Constructor.prototype`. Handle null/pri…

Difficulty Intermediate

Poll Until (with Timeout + Abort)

Implement pollUntil(check, { interval, timeout, signal }) that repeatedly runs a check until it returns a truthy value.…

Difficulty Intermediate

Sanitize href URL (Block javascript: XSS)

Implement sanitizeHrefUrl(input) to safely use user-provided URLs in an <a href="...">. Use an allowlist for safe scheme…

Difficulty Intermediate

Stream to Text (ReadableStream -> string)

Implement streamToText(stream, options) that reads a ReadableStream<Uint8Array> and returns the full string. Use TextDec…

Difficulty Intermediate

Take Latest (Abort Previous Requests)

Implement takeLatest(fn) that wraps an async function and guarantees only the most recent call can resolve. Each new cal…

Difficulty Intermediate

Flexbox: Responsive Navbar

Build a responsive navbar using Flexbox. Align brand left, links center or right, and actions to the end. Use gap for sp…

Difficulty Intermediate

Fluid Type & Spacing with clamp()

Implement fluid typography and spacing with `clamp()`. Use `clamp(min, preferred, max)` to scale values across viewport…

Difficulty Intermediate

Format Date in Time Zone (YYYY-MM-DD)

Implement formatDateInTimeZone(date, timeZone) to return a YYYY-MM-DD string for a given Date (or timestamp) in a specif…

Difficulty Intermediate

Forms & Pseudo-classes: Focus, Invalid, Required, Helper Text

Style form fields using :focus, :invalid, and :required to guide users. Show clear focus rings, error borders, and helpe…

Difficulty Intermediate

Forms: Validation and Required Fields

Build a signup form using native HTML5 validation: required fields, type constraints, minlength, and pattern. The browse…

Difficulty Intermediate

Grid: Card Gallery (2→4 Columns)

Create a responsive card gallery using CSS Grid that adapts from 2 to 4 columns. Use `repeat()` with `minmax()` for flex…

Difficulty Intermediate

Resolve package.json Exports (Import vs Require)

Implement resolvePackageEntry(pkg, options) to choose the correct entry file for a package based on package.json fields…

Difficulty Intermediate

Build a semantic page layout using header, nav, main, section, article, and footer. Focus on correct landmarks, heading…

Difficulty Intermediate

SEO: Essential <head> Metadata

You’re given a simple marketing page that renders fine in the browser, but it’s missing production-grade <head> metadata…

Difficulty Intermediate

Storage TTL Cache (localStorage/sessionStorage)

Implement createTtlStorage(storage, now?) that returns { set, get, remove }. It should store JSON values with an optiona…

Difficulty Intermediate

Tables and Accessibility

The goal is to provide a semantic table that screen readers can navigate, with a clear caption and correct header associ…

Difficulty Intermediate

Theming with CSS Variables: OS Dark Mode + Manual Override

Create a themeable panel using ONLY CSS custom properties. Define light defaults on :root, redefine the SAME variables f…

Difficulty Intermediate

Transitions & Transforms: Lift on Hover

Create a hover lift effect with `transform` and `transition`. Combine a slight translate/scale with a deeper `box-shadow…

Difficulty Intermediate

Implement Function.prototype.bind

Implement `myBind(fn, thisArg, ...boundArgs)` that behaves like `Function.prototype.bind`. It must: 1) Bind `this` to `t…

Implement the `new` Operator

Implement a myNew helper that mimics the new operator. Create an object linked to the constructor prototype, call the co…

This is a small async composition task and should return a Promise that resolves to the numeric sum once both inputs set…

Delegated Event Handler (E)

Implement `delegate(root, eventType, selector, handler)` for **event delegation**. Requirements: 1) Attach **one** event…

Image Slider (Dots + Previous/Next)

Build a simple React image slider with previous/next buttons and dot navigation. Show the current slide, its title, and…

Framework versionsOpen this challenge in your stack

Implement Array.prototype.filter

Recreate the native `Array.prototype.filter()` method as `myFilter`. It should call a provided callback once for each ex…

Implement Array.prototype.map

Recreate the native `.map()` method **without using it**. Your `myMap` must call `callbackFn(value, index, array)` for e…

React Dynamic Table (Rows × Columns)

Generate a dynamic table in React from row/column inputs. Normalize values, rebuild the grid on action, and render consi…

Framework versionsOpen this challenge in your stack

React Like Button (Toggle + Counter)

Build a React Like button that toggles between liked/unliked and updates a count. Clicking should add or subtract one ba…

Framework versionsOpen this challenge in your stack

React Progress Bar (0–100 with Threshold Colors)

Build a React progress bar for values 0–100 with +10%/−10% controls. Clamp progress to the valid range and change the ba…

Framework versionsOpen this challenge in your stack

React Star Rating Widget

Implement a reusable <StarRating /> widget in React. It should render a row of clickable stars, allow the user to select…

Framework versionsOpen this challenge in your stack

Reusable Child Component with @Input/@Output (Two-way Binding)

Expose a value input and a valueChange output to support two-way binding, and keep the child component stateless so the…

Tic-Tac-Toe (Component State + Winner Detection)

Build Tic-Tac-Toe with React state: a 9-cell board, alternating turns, win/draw detection, and a reset button. Prevent o…

Framework versionsOpen this challenge in your stack

Reverse a string by iterating from the end to the start and building a new string, without using `Array.prototype.revers…

Sort Numbers with Array.prototype.sort

Implement a function `sortNumbers(arr, ascending = true)` that returns a **new array** of numbers sorted numerically in…

Find Maximum Occurring Character

Find the most frequent character in a string using a frequency map. Track counts in one pass and return the character wi…

React Tabs / Multi-View Switcher

Implement React tabs with a single activeTab state. Buttons update the value and conditional rendering shows only the ac…

Framework versionsOpen this challenge in your stack

Implement uniqueArray(arr) that removes duplicates while preserving order. Use a Set for O(n) time and clarify how to tr…

DOM Tree Walk 1: Collect Text Nodes

Implement `collectText(node)` that traverses a **DOM-like** tree and returns **all text content** (nodeType `3`) in **do…

Merge Two Sorted Arrays

Merge two already-sorted arrays into a single sorted array. Do not call sort on the combined output; use a two-pointer m…

Selector Polyfill 1: Implement `matchesSimple`

Implement `matchesSimple(node, selector)` — a tiny subset of `Element.matches()`. This is extremely common in frontend i…

Return the median of a list of numbers. For even length, return the average of the two middle values. Do not mutate the…

Return true if two strings are anagrams (same characters with the same counts). Treat strings as case-sensitive and incl…

Angular Chessboard Click/Highlight (N×N Board)

Build an interactive N×N chessboard in Angular. Clicking a cell should highlight it and clear the previous selection. Ad…

Difficulty Intermediate

Custom setTimeout/clearTimeout Timer Manager

Build a timer registry with mySetTimeout, myClearTimeout, and myClearAllTimeouts. Return your own numeric ids, store nat…

Difficulty Intermediate

Debug: Component Renders Twice on Every Update

Fix a component that renders twice per click because it stores derived state in `useEffect`. The correct fix is to remov…

Difficulty Intermediate

Delegated Event Handler (M)

Implement `delegate(root, eventType, selector, handler, options?)` with **advanced event delegation**. Requirements: 1)…

Difficulty Intermediate

Event Emitter (Mini Implementation)

Build a tiny event emitter with on, off, and emit. Store listeners per event, allow multiple listeners, and ensure off r…

Difficulty Intermediate

Implement Array.prototype.reduce

Recreate the native `.reduce()` method **without using it**. Your `myReduce` must call the reducer with `(accumulator, c…

Difficulty Intermediate

Implement Promise.all

Implement a function `promiseAll(promises)` that behaves like `Promise.all`. It should take an array of values or promis…

Difficulty Intermediate

Invite Chips Input (Tags + Autocomplete)

Build a Material-like invite field in React. As users type, show autocomplete suggestions, convert selections into remov…

Framework versionsOpen this challenge in your stack

React Accordion / FAQ Component

Build a simple FAQ (accordion) UI in React using component state. Clicking a question should toggle its answer. By defau…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

React Chessboard Click/Highlight (N×N Board)

Build an interactive N×N chessboard in React. Clicking a cell should highlight it and clear the previous selection. Incl…

React Dynamic Counter Buttons (Grow-on-Click)

In React, let users add or remove step buttons dynamically, and have each button update the counter by its own step valu…

Framework versionsOpen this challenge in your stack

React Nested Checkbox Tree (Parent–Child Sync)

Build a small React UI that renders a parent checkbox and multiple child checkboxes. The parent controls all children, a…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

React Nested Comments (Infinite Replies, Single Active Reply Input)

Build a React nested comments panel with infinite replies. Users can add top-level comments and reply to any comment, cr…

Framework versionsOpen this challenge in your stack

React Transfer List (Select + Move Between Two Lists)

Build a React transfer list UI with two panels and checkbox selection. Users select items in one list and move them to t…

Framework versionsOpen this challenge in your stack

Implement debounce(fn, wait) that delays execution until the user stops triggering events. Clear the previous timer on e…

Difficulty Intermediate

Implement a function `throttle(fn, interval)` that ensures `fn` is executed at most once during every `interval` millise…

Difficulty Intermediate

Vue Chessboard Click/Highlight (N×N Board)

Build an interactive N×N chessboard in Vue 3. Clicking a cell should highlight it and clear the previous selection. Add…

Autocomplete Search Bar (Hooks)

Build an **autocomplete search bar** in React. As the user types, show a dropdown of suggestions filtered from a dataset…

Framework versionsOpen this challenge in your stack

Build a DOM Renderer from a Nested Object

Implement render(node) to convert a JSON-like DOM description into real DOM nodes using createElement/createTextNode. Co…

Difficulty Intermediate

Clear All Timers + Render DOM Elements

Solve two independent tasks: implement clearAllTimeouts for a timer registry and render a DOM tree from a nested object.…

Difficulty Intermediate

Contact Form (Component + HTTP)

Build a contact form using a React component with controlled inputs and basic validation. You will only work in `src/App…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

DOM Tree Walk 2: Find Closest Ancestor

Implement `closestWithin(node, selector, boundary)` for a **DOM-like** tree. This is a simplified `.closest()` used cons…

Difficulty Intermediate

Find a Node in a DOM Tree (DFS/BFS)

Implement findNode(root, predicate) to traverse the DOM and return the first matching element. Use DFS/BFS with early ex…

Difficulty Intermediate

Find the Corresponding Node in Twin DOM Trees

Given two identical DOM trees and a node in tree A, return the corresponding node in tree B. Traverse both trees in sync…

Difficulty Intermediate

Implement memoize(fn) that caches results for repeated calls. Choose a cache key strategy, discuss memory growth/evictio…

Difficulty Intermediate

Multi-step Signup Form

Build a 3-step signup flow in React that collects basic info, address info, and then shows a read-only summary before su…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

React Filterable / Searchable User List

Filter a React user list by search text and role. Derive filtered results without mutating the source array, and show an…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

React Paginated Data Table

Build a simple paginated data table in React that shows a static list of users. Display 5 rows per page, with Previous /…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

React Theme Toggle with Persisted Light/Dark Mode

Add a global light/dark theme toggle using React Context. The selected theme should be stored in localStorage and restor…

Framework versionsOpen this challenge in your stack

Difficulty Intermediate

Selector Polyfill 2: Implement `closestSimple`

Implement `closestSimple(node, selector)` — a DOM-like polyfill for `Element.closest()` using **only** `parentNode` trav…

Difficulty Intermediate

Add Large Integers as Strings

Add two non-negative integers represented as strings and return the sum as a string. You may not convert the entire stri…

Difficulty Intermediate

Check if a String Is a Palindrome

Normalize the input (lowercase + strip non-alphanumerics) and check if it reads the same forwards and backwards using tw…

Difficulty Intermediate

Implement `compose(...fns)` that returns a new function applying the provided functions from **right to left**. The righ…

Difficulty Intermediate

Data Helper 2: Set Value by Path

Implement setByPath(obj, path, value) that returns a new object/array tree with the value written at the nested path. No…

Difficulty Intermediate

Implement flatten(arr, depth) that flattens nested arrays up to a specific depth. Depth controls how many nesting levels…

Difficulty Intermediate

Group an array of items by a key (function or property). Build an object or Map where each key maps to an array of items…

Difficulty Intermediate

Implement `get(obj, path, defaultValue)` where `path` is a string like `user.profile.name` or `a[0].b`. Return `defaultV…

Difficulty Intermediate

Implement Stack and Queue in JavaScript

Implement Stack (push/pop/peek/size) and Queue (enqueue/dequeue/peek/size). Use a head index or deque to keep queue oper…

Difficulty Intermediate

Maze Traversal (Find a Path in a Grid)

Given a 2D grid of 0/1 (0=open, 1=wall), determine if a path exists from start to end using 4-direction moves. Use BFS/D…

Difficulty Intermediate

Querystring Helper 2: Implement `stringifyQueryString`

Implement `stringifyQueryString(params)` that converts an object into a URL querystring. This is common in FE screens (b…

Difficulty Intermediate

Recover a BST with Two Swapped Nodes

Two nodes in a Binary Search Tree were swapped by mistake. Implement `recoverBST(root)` to fix the tree **in-place** (sw…

Difficulty Intermediate

useEffectOnce: Run an Effect Only Once

This hook should run the effect only on mount and clean up on unmount, even under React StrictMode development behavior.…

Abortable Helpers (Timeout + Composed Abort)

Provide utilities to combine timeouts with AbortController, and to compose multiple signals (abort if any fires). All he…

Chat UI with Streaming Response

Build a simplified ChatGPT-like interface that streams an assistant response token-by-token. The goal is to model chat s…

Concurrency-Limited Map (order-preserving)

Implement a concurrency-limited async map that preserves order. Run at most N promises at a time, resolve results in inp…

Delegated Event Handler (H)

Implement delegated event handling: attach one listener to a parent, match events by selector, and call the handler with…

React Debounced Search with Fake API

Build a React debounced search input with fake API calls. Use useEffect + setTimeout cleanup to cancel stale requests, a…

Framework versionsOpen this challenge in your stack

React Shopping Cart Mini

Build a small shopping cart UI in React. Show a list of products, let the user add them to the cart, adjust quantities,…

Framework versionsOpen this challenge in your stack

React Snake Game (Grid + Food + Collision)

Build a Snake game in React using a grid board. Support keyboard controls, food spawning, score updates, and game-over h…

Framework versionsOpen this challenge in your stack

Implement curry(fn) to transform a multi-argument function into chained calls. Collect arguments across invocations, all…

DOM Tree Walk 3: Basic Selector Engine (Hard)

Implement a small selector engine: `queryAll(root, selector)` that returns all matching nodes in **document order** from…

3Sum (find unique triplets that sum to zero)

Given an array of integers, return all unique triplets `[a, b, c]` such that `a + b + c = 0`. Triplets should be unique,…

Data Helper 3: Deep Clone with Cycles

Implement `deepClone(value)` that returns a **deep copy** of the input while correctly handling **circular references**.…

Create a deep clone of an object/array so nested structures are copied by value. Discuss limits (functions, dates, cycle…

Implement a function `deepEqual(a, b)` that returns `true` when two values are deeply equal — primitives by value and ob…

Modal: Native <dialog> Confirm (Accessible Naming)

Build a native confirm dialog for deleting a project using the HTML <dialog> element. The dialog must be accessible (pro…

Querystring Helper 3: Implement `parseQueryStringAdvanced`

Implement `parseQueryStringAdvanced(qs)` that converts a URL querystring into a **nested** object structure. This mirror…

Selector Polyfill 3: Implement `queryAllSimple` (Hard)

Implement `queryAllSimple(root, selector)` — a DOM-like polyfill for `querySelectorAll`. This is a high-likelihood front…

Streaming NDJSON Parser (Web Streams)

Build an NDJSON streaming parser that reads chunked text and emits JSON objects line by line. Handle partial lines acros…

Frontend coding challenges

Framework prep path