Prep path

Coding Challenge Hub

Frontend Coding Challenges

Build and debug focused frontend prompts across JavaScript functions, UI exercises, HTML/CSS implementation, and debugging tasks.

Real prompts Starter code Tests Solutions + follow-ups Free to start

Selected frontend coding challenges are free to start. Premium unlocks additional question sets and deeper solution context while locked items stay gated.

Opens Essential 60 #1: the high-signal debounce function drill.
139 matches
Coding
Debounce Function
Implement `debounce(fn, delay)` by returning a trailing-edge wrapper that clears the previous timer and runs `fn` only a…
IntermediatePriority: HighJavaScript
Coding
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…
EasyPriority: HighCSS
Coding
Semantic Page Layout
Build a semantic page layout using header, nav, main, section, article, and footer. Focus on correct landmarks, heading…
EasyPriority: HighHTML
Coding
Flexbox: Responsive Navbar
Practice a realistic frontend interview prompt: build a responsive navigation bar with Flexbox, preserve readable links,…
IntermediatePriority: HighCSS
Coding
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…
IntermediatePriority: HighCSS
Coding
Grid: Card Gallery (2→4 Columns)
Practice a realistic frontend interview prompt: create a responsive card gallery with CSS Grid, keep cards readable acro…
IntermediatePriority: HighCSS
Coding
React Autocomplete Interview Question
Practice a React autocomplete interview question in a live editor. Build a controlled search input with debounce, stale-…
IntermediatePriority: HighReact
Coding
Tables and Accessibility
The goal is to provide a semantic table that screen readers can navigate, with a clear caption and correct header associ…
IntermediatePriority: HighHTML
Coding
Theming with CSS Variables: OS Dark Mode + Manual Override
Create a themeable panel using CSS custom properties. Define light defaults on :root, redefine the same tokens for OS da…
IntermediatePriority: HighCSS
Coding
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…
EasyPriority: HighHTML
Coding
Links and Images
Create semantic links and images: use anchor elements with real href attributes and descriptive names, add target/rel wh…
EasyPriority: HighHTML
Coding
Positioning: Relative/Absolute Badge
This pattern is used in notifications, status indicators, and card metadata, so the badge should remain anchored even as…
EasyPriority: HighCSS
Coding
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…
EasyPriority: HighHTML
Coding
Shallow Clone (Object or Array)
Implement shallowClone(value) in JavaScript. Your function should accept an object or array and return a new top-level c…
EasyPriority: HighJavaScript
Coding
Sleep / Delay Promise
Implement sleep(ms) that returns a Promise resolving after ms milliseconds. Use it to pause async flows like retries, ex…
EasyPriority: HighJavaScript
Coding
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…
EasyPriority: HighJavaScript
Coding
Create a Deferred Promise (For Async Tests)
Implement createDeferred() in JavaScript. Your function should return { promise, resolve, reject } so async tests can co…
IntermediatePriority: HighJavaScript
Coding
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…
IntermediatePriority: HighJavaScript
Coding
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…
IntermediatePriority: HighJavaScript
Coding
Fetch JSON with Timeout + Abort
Implement fetchJson(url, options) that fetches JSON with built-in timeout and abort support. It should abort on timeout,…
IntermediatePriority: HighJavaScript
Coding
Fluid Type & Spacing with clamp()
Implement fluid typography and spacing with `clamp()`. Use `clamp(min, preferred, max)` to scale values across viewport…
IntermediatePriority: HighCSS
Coding
Forms: Validation and Required Fields
Build a signup form using native HTML5 validation: required fields, type constraints, minlength, and pattern. The browse…
IntermediatePriority: HighHTML
Coding
Implement `instanceof`
Implement the ordinary prototype-chain core of `instanceof`: first require a callable right-hand side with an object/fun…
IntermediatePriority: HighJavaScript
Coding
Promise.any (First Fulfilled)
Implement promiseAny(iterable) for synchronous iterables of values and promises. Resolve with the first fulfillment, ign…
IntermediatePriority: HighJavaScript
Coding
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…
IntermediatePriority: HighJavaScript
Coding
Sanitize href URL (Block javascript: XSS)
Implement sanitizeHrefUrl(input) for an <a href="..."> allowlist: explicit http, https, mailto, and tel URLs plus relati…
IntermediatePriority: HighJavaScript
Coding
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…
IntermediatePriority: HighJavaScript
Coding
Implement Function.prototype.bind
Implement a deliberately scoped `myBind(fn, thisArg, ...boundArgs)` exercise. It must bind `this` for ordinary calls, su…
HardPriority: HighJavaScript
Coding
Implement the `new` Operator
Implement myNew(Constructor, ...args) with the language's construction primitive. It must accept ECMAScript constructabl…
HardPriority: HighJavaScript
Coding
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…
EasyPriority: MediumJavaScript
Coding
Cleanup Bag (Dispose Subscriptions)
Implement createCleanupBag() that helps prevent memory leaks by tracking cleanup functions (like removing event listener…
EasyPriority: MediumJavaScript
Coding
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…
EasyPriority: MediumJavaScript
Coding
Create Object with Prototype
Implement objectCreate(proto) to return a new object whose prototype is `proto`. Use a temporary constructor function or…
EasyPriority: MediumJavaScript
Coding
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…
EasyPriority: MediumCSS
Coding
Escape HTML for Safe Text
Implement escapeHtml(text) to encode &, <, >, " and ' when raw text must be interpolated into the HTML text-content port…
EasyPriority: MediumJavaScript
Coding
Falsy Bouncer
Remove all falsy values from an array while preserving order. Use a boolean filter to drop false, 0, empty string, null,…
EasyPriority: MediumJavaScript
Coding
Flatten One Level
This should not deep-flatten; only the first nesting level is removed, matching Array.prototype.flat(1). Use it to norma…
EasyPriority: MediumJavaScript
Coding
Inline vs Block Elements
Demonstrate the difference between block and inline elements using pure HTML. Show that block elements start new lines w…
EasyPriority: MediumHTML
Coding
Lists and Navigation
Build a semantic navigation bar using `nav > ul > li > a` with hash links. Use CSS `:target` to show only one section at…
EasyPriority: MediumHTML
Coding
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…
EasyPriority: MediumJavaScript
Coding
Querystring Helper 1: Implement `parseQueryString`
Implement `parseQueryString(qs)` that converts a URL querystring into a plain object. This is very common in frontend wo…
EasyPriority: MediumJavaScript
Coding
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…
EasyPriority: MediumCSS
Coding
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…
EasyPriority: MediumReact
Coding
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…
IntermediatePriority: MediumJavaScript
Coding
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…
IntermediatePriority: MediumJavaScript
Coding
Measure Function Duration (Profiling Wrapper)
Implement measure(fn, now?) to profile execution time. It should run a function, measure the duration using the provided…
IntermediatePriority: MediumJavaScript
Coding
Poll Until (with Timeout + Abort)
Implement pollUntil(check, { interval, timeout, signal }) so a real deadline, cancellation, or the first truthy check se…
IntermediatePriority: MediumJavaScript
Coding
Storage TTL Cache (localStorage/sessionStorage)
Implement createTtlStorage(storage, now?) that returns { set, get, remove }. It should store JSON values with an optiona…
IntermediatePriority: MediumJavaScript
Coding
Stream to Text (ReadableStream -> string)
Implement streamToText(stream, options) that reads a ReadableStream<Uint8Array> and returns the full string. Use TextDec…
IntermediatePriority: MediumJavaScript
Coding
Transitions & Transforms: Lift on Hover
Create a hover lift effect with `transform` and `transition`. Combine a slight translate/scale with a deeper `box-shadow…
IntermediatePriority: MediumCSS
Coding
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…
HardPriority: MediumJavaScript
Coding
Capitalize Words
Capitalize the first letter of every word while preserving spacing. Handle multiple spaces and punctuation without colla…
EasyPriority: MediumJavaScript
Coding
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…
EasyPriority: MediumJavaScript
Coding
Clamp
Implement clamp(value, lower, upper) to keep a number within an inclusive range. If the value is below the lower bound,…
EasyPriority: MediumJavaScript
Coding
Count Vowels
Implement countVowels(str) that returns how many vowels appear in a string. Normalize case, decide whether to include 'y…
EasyPriority: MediumJavaScript
Coding
React Counter (Guarded Decrement)
Build a React counter component with increment/decrement and a zero floor. Use state for the count, disable decrement at…
EasyPriority: MediumReact
Coding
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…
EasyPriority: MediumJavaScript
Coding
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…
EasyPriority: MediumJavaScript
Coding
Validate Username (Rules + Edge Cases)
Implement validateUsername(name) to enforce common username rules and handle edge cases safely. Rules: 3–16 chars, lower…
EasyPriority: MediumJavaScript
Coding
Warm-Up: Basic Structure
Build a valid HTML document skeleton with `<!doctype html>`, `<html>`, `<head>`, and `<body>`. Include a `<meta charset>…
EasyPriority: MediumHTML
Coding
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…
HardPriority: MediumJavaScript
Coding
Debug: Component Renders Twice on Every Update
Locked
Fix a component that renders twice per click because it stores derived state in `useEffect`. The correct fix is to remov…
IntermediatePriority: HighReact
Coding
React Debounced Search with Fake API
Locked
Build a React debounced search input with fake API calls. Use useEffect + setTimeout cleanup to cancel pending debounce…
IntermediatePriority: HighReact
Coding
Reusable Child Component with @Input/@Output (Two-way Binding)
Locked
Expose a value input and a valueChange output to support two-way binding, and keep the child component stateless so the…
IntermediatePriority: HighAngular
Coding
StrictMode-safe Effect Setup and Cleanup
Locked
Build an idempotent connection effect whose setup and symmetrical cleanup tolerate React StrictMode’s intentional develo…
IntermediatePriority: HighReact
Coding
Remove Duplicates
Locked
Implement uniqueArray(arr) that removes duplicates while preserving order. Use a Set for O(n) time and clarify how to tr…
EasyPriority: HighJavaScript
Coding
Sort Numbers with Array.prototype.sort
Locked
Implement a function `sortNumbers(arr, ascending = true)` that returns a **new array** of numbers sorted numerically in…
EasyPriority: HighJavaScript
Coding
Contact Form (Component + HTTP)
Locked
Build a contact form using a React component with controlled inputs and basic validation. You will only work in `src/App…
IntermediatePriority: HighReact
Coding
Custom setTimeout/clearTimeout Timer Manager
Locked
Build a timer registry with mySetTimeout, myClearTimeout, and myClearAllTimeouts. Return your own numeric ids, store nat…
IntermediatePriority: HighJavaScript
Coding
Data Helper 2: Set Value by Path
Locked
Implement setByPath(obj, path, value) that returns a new object/array tree with the value written at the nested path. No…
IntermediatePriority: HighJavaScript
Coding
Delegated Event Handler (E)
Locked
Implement `delegate(root, eventType, selector, handler)` for **event delegation**. Requirements: 1) Attach **one** event…
IntermediatePriority: HighJavaScript
Coding
Event Emitter (Mini Implementation)
Locked
Build a tiny event emitter with on, off, and emit. Store listeners per event, allow multiple listeners, and ensure off r…
IntermediatePriority: HighJavaScript
Coding
Group By
Locked
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…
IntermediatePriority: HighJavaScript
Coding
Implement Array.prototype.filter
Locked
Recreate the native `Array.prototype.filter()` method as `myFilter`. It should call a provided callback once for each ex…
IntermediatePriority: HighJavaScript
Coding
Implement Array.prototype.map
Locked
Recreate the native `.map()` method **without using it**. Your `myMap` must call `callbackFn(value, index, array)` for e…
IntermediatePriority: HighJavaScript
Coding
Implement Array.prototype.reduce
Locked
Recreate the native `.reduce()` method **without using it**. Your `myReduce` must call the reducer with `(accumulator, c…
IntermediatePriority: HighJavaScript
Coding
Implement lodash.get
Locked
Implement `get(obj, path, defaultValue)` where `path` is a string like `user.profile.name` or `a[0].b`. Return `defaultV…
IntermediatePriority: HighJavaScript
Coding
Implement Promise.all
Locked
Implement a function `promiseAll(promises)` that behaves like `Promise.all`. It should take an array of values or promis…
IntermediatePriority: HighJavaScript
Coding
Invite Chips Input (Tags + Autocomplete)
Locked
Build a Material-like invite field in React. As users type, show autocomplete suggestions, convert selections into remov…
IntermediatePriority: HighReact
Coding
Memoization
Locked
Implement memoize(fn) that caches results for repeated calls. Choose a cache key strategy, discuss memory growth/evictio…
IntermediatePriority: HighJavaScript
Coding
Modal: Native <dialog> Confirm (Accessible Naming)
Locked
Build a native confirm dialog for deleting a project using the HTML <dialog> element. The dialog must be accessible (pro…
IntermediatePriority: HighHTML
Coding
Multi-step Signup Form
Locked
Build a 3-step signup flow in React that collects basic info, address info, and then shows a read-only summary before su…
IntermediatePriority: HighReact
Coding
React Nested Checkbox Tree (Parent–Child Sync)
Locked
Build a small React UI that renders a parent checkbox and multiple child checkboxes. The parent controls all children, a…
IntermediatePriority: HighReact
Coding
React Nested Comments (Infinite Replies, Single Active Reply Input)
Locked
Build a React nested comments panel with infinite replies. Users can add top-level comments and reply to any comment, cr…
IntermediatePriority: HighReact
Coding
React Paginated Data Table
Locked
Build a simple paginated data table in React that shows a static list of users. Display 5 rows per page, with Previous /…
IntermediatePriority: HighReact
Coding
React Shopping Cart Mini
Locked
Build a small shopping cart UI in React. Show a list of products, let the user add them to the cart, adjust quantities,…
IntermediatePriority: HighReact
Coding
Throttle Function
Locked
Implement a function `throttle(fn, interval)` that ensures `fn` is executed at most once during every `interval` millise…
IntermediatePriority: HighJavaScript
Coding
Chat UI with Streaming Response
Locked
Build a simplified ChatGPT-like interface that streams an assistant response token-by-token. The goal is to model chat s…
HardPriority: HighReact
Coding
Concurrency-Limited Map (order-preserving)
Locked
Implement a concurrency-limited async map that preserves order. Run at most N promises at a time, resolve results in inp…
HardPriority: HighJavaScript
Coding
Deep Clone
Locked
Create a deep clone of an object/array so nested structures are copied by value. Discuss limits (functions, dates, cycle…
HardPriority: HighJavaScript
Coding
Deep Equal
Locked
Implement a function `deepEqual(a, b)` that returns `true` when two values are deeply equal — primitives by value and ob…
HardPriority: HighJavaScript
Coding
Delegated Event Handler (M)
Locked
Implement `delegate(root, eventType, selector, handler, options?)` with **advanced event delegation**. Requirements: 1)…
HardPriority: HighJavaScript
Coding
Querystring Helper 3: Implement `parseQueryStringAdvanced`
Locked
Implement `parseQueryStringAdvanced(qs)` that converts a URL querystring into a **nested** object structure. This mirror…
HardPriority: HighJavaScript
Coding
Add Large Integers as Strings
Locked
Add two non-negative integers represented as strings and return the sum as a string. You may not convert the entire stri…
EasyPriority: MediumJavaScript
Coding
Find Maximum Occurring Character
Locked
Find the most frequent character in a string using a frequency map. Track counts in one pass and return the character wi…
EasyPriority: MediumJavaScript
Coding
Image Slider (Dots + Previous/Next)
Locked
Build a simple React image slider with previous/next buttons and dot navigation. Show the current slide, its title, and…
EasyPriority: MediumReact
Coding
Merge Two Sorted Arrays
Locked
Merge two already-sorted arrays into a single sorted array. Do not call sort on the combined output; use a two-pointer m…
EasyPriority: MediumJavaScript
Coding
Reverse a String
Locked
Reverse a string by iterating from the end to the start and building a new string, without using `Array.prototype.revers…
EasyPriority: MediumJavaScript
Coding
Selector Polyfill 1: Implement `matchesSimple`
Locked
Implement `matchesSimple(node, selector)` — a tiny subset of `Element.matches()`. This is extremely common in frontend i…
EasyPriority: MediumJavaScript
Coding
3Sum (find unique triplets that sum to zero)
Locked
Given an array of integers, return all unique triplets `[a, b, c]` such that `a + b + c = 0`. Triplets should be unique,…
IntermediatePriority: MediumJavaScript
Coding
Add Two Promises
Locked
This is a small async composition task and should return a Promise that resolves to the numeric sum once both inputs set…
IntermediatePriority: MediumJavaScript
Coding
Build a DOM Renderer from a Nested Object
Locked
Implement render(node) to convert a JSON-like DOM description into real DOM nodes using createElement/createTextNode. Co…
IntermediatePriority: MediumJavaScript
Coding
Clear All Timers + Render DOM Elements
Locked
Solve two independent tasks: implement clearAllTimeouts for a timer registry and render a DOM tree from a nested object.…
IntermediatePriority: MediumJavaScript
Coding
Compose Function
Locked
Implement `compose(...fns)` that returns a new function applying the provided functions from **right to left**. The righ…
IntermediatePriority: MediumJavaScript
Coding
Curry Function
Locked
Implement curry(fn) to transform a multi-argument function into chained calls. Collect arguments across invocations, all…
IntermediatePriority: MediumJavaScript
Coding
DOM Tree Walk 2: Find Closest Ancestor
Locked
Implement `closestWithin(node, selector, boundary)` for a **DOM-like** tree. This is a simplified `.closest()` used cons…
IntermediatePriority: MediumJavaScript
Coding
Find a Node in a DOM Tree (DFS/BFS)
Locked
Implement findNode(root, predicate) to traverse the DOM and return the first matching element. Use DFS/BFS with early ex…
IntermediatePriority: MediumJavaScript
Coding
Find the Corresponding Node in Twin DOM Trees
Locked
Given two identical DOM trees and a node in tree A, return the corresponding node in tree B. Traverse both trees in sync…
IntermediatePriority: MediumJavaScript
Coding
Flatten with Depth
Locked
Implement flatten(arr, depth) that flattens nested arrays up to a specific depth. Depth controls how many nesting levels…
IntermediatePriority: MediumJavaScript
Coding
Querystring Helper 2: Implement `stringifyQueryString`
Locked
Implement `stringifyQueryString(params)` that converts an object into a URL querystring. This is common in FE screens (b…
IntermediatePriority: MediumJavaScript
Coding
React Accordion / FAQ Component
Locked
Build a simple FAQ (accordion) UI in React using component state. Clicking a question should toggle its answer. By defau…
IntermediatePriority: MediumReact
Coding
React Filterable / Searchable User List
Locked
Filter a React user list by search text and role. Derive filtered results without mutating the source array, and show an…
IntermediatePriority: MediumReact
Coding
React Transfer List (Select + Move Between Two Lists)
Locked
Build a React transfer list UI with two panels and checkbox selection. Users select items in one list and move them to t…
IntermediatePriority: MediumReact
Coding
Selector Polyfill 2: Implement `closestSimple`
Locked
Implement `closestSimple(node, selector)` — a DOM-like polyfill for `Element.closest()` using **only** `parentNode` trav…
IntermediatePriority: MediumJavaScript
Coding
Abortable Helpers (Timeout + Composed Abort)
Locked
Provide utilities to combine timeouts with AbortController, and to compose multiple signals (abort if any fires). All he…
HardPriority: MediumJavaScript
Coding
Data Helper 3: Deep Clone with Cycles
Locked
Implement `deepClone(value)` that returns a **deep copy** of the input while correctly handling **circular references**.…
HardPriority: MediumJavaScript
Coding
Delegated Event Handler (H)
Locked
Implement delegated event handling: attach one listener to a parent, match events by selector, and call the handler with…
HardPriority: MediumJavaScript
Coding
React Snake Game (Grid + Food + Collision)
Locked
Build a Snake game in React using a grid board. Support keyboard controls, food spawning, score updates, and game-over h…
HardPriority: MediumReact
Coding
Streaming NDJSON Parser (Web Streams)
Locked
Build an NDJSON streaming parser that reads chunked text and emits JSON objects line by line. Handle partial lines acros…
HardPriority: MediumJavaScript
Coding
Angular Chessboard Click/Highlight (N×N Board)
Locked
Build an interactive N×N chessboard in Angular. Clicking a cell should highlight it and clear the previous selection. Ad…
EasyPriority: MediumAngular
Coding
Median of Array
Locked
Return the median of a list of numbers. For even length, return the average of the two middle values. Do not mutate the…
EasyPriority: MediumJavaScript
Coding
React Chessboard Click/Highlight (N×N Board)
Locked
Build an interactive N×N chessboard in React. Clicking a cell should highlight it and clear the previous selection. Incl…
EasyPriority: MediumReact
Coding
React Dynamic Table (Rows × Columns)
Locked
Generate a dynamic table in React from row/column inputs. Normalize values, rebuild the grid on action, and render consi…
EasyPriority: MediumReact
Coding
React Like Button (Toggle + Counter)
Locked
Build a React Like button that toggles between liked/unliked and updates a count. Clicking should add or subtract one ba…
EasyPriority: MediumReact
Coding
React Progress Bar (0–100 with Threshold Colors)
Locked
Build a React progress bar for values 0–100 with +10%/−10% controls. Clamp progress to the valid range and change the ba…
EasyPriority: MediumReact
Coding
React Star Rating Widget
Locked
Implement a reusable <StarRating /> widget in React. It should render a row of clickable stars, allow the user to select…
EasyPriority: MediumReact
Coding
Tic-Tac-Toe (Component State + Winner Detection)
Locked
Build Tic-Tac-Toe with React state: a 9-cell board, alternating turns, win/draw detection, and a reset button. Prevent o…
EasyPriority: MediumReact
Coding
Valid Anagram
Locked
Return true if two strings are anagrams (same characters with the same counts). Treat strings as case-sensitive and incl…
EasyPriority: MediumJavaScript
Coding
Vue Chessboard Click/Highlight (N×N Board)
Locked
Build an interactive N×N chessboard in Vue 3. Clicking a cell should highlight it and clear the previous selection. Add…
EasyPriority: MediumVue
Coding
DOM Tree Walk 1: Collect Text Nodes
Locked
Implement `collectText(node)` that traverses a **DOM-like** tree and returns **all text content** (nodeType `3`) in **do…
IntermediatePriority: MediumJavaScript
Coding
Implement Stack and Queue in JavaScript
Locked
Implement Stack (push/pop/peek/size) and Queue (enqueue/dequeue/peek/size). Use a head index or deque to keep queue oper…
IntermediatePriority: MediumJavaScript
Coding
Maze Traversal (Find a Path in a Grid)
Locked
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…
IntermediatePriority: MediumJavaScript
Coding
React Dynamic Counter Buttons (Grow-on-Click)
Locked
In React, let users add or remove step buttons dynamically, and have each button update the counter by its own step valu…
IntermediatePriority: MediumReact
Coding
React Tabs / Multi-View Switcher
Locked
Implement React tabs with a single activeTab state. Buttons update the value and conditional rendering shows only the ac…
IntermediatePriority: MediumReact
Coding
React Theme Toggle with Persisted Light/Dark Mode
Locked
Add a global light/dark theme toggle using React Context. The selected theme should be stored in localStorage and restor…
IntermediatePriority: MediumReact
Coding
Recover a BST with Two Swapped Nodes
Locked
Two nodes in a Binary Search Tree were swapped by mistake. Implement `recoverBST(root)` to fix the tree **in-place** (sw…
IntermediatePriority: MediumJavaScript
Coding
DOM Tree Walk 3: Basic Selector Engine (Hard)
Locked
Implement a small selector engine: `queryAll(root, selector)` that returns all matching nodes in **document order** from…
HardPriority: MediumJavaScript
Coding
Selector Polyfill 3: Implement `queryAllSimple` (Hard)
Locked
Implement `queryAllSimple(root, selector)` — a DOM-like polyfill for `querySelectorAll`. This is a high-likelihood front…
HardPriority: MediumJavaScript
Coding
Check if a String Is a Palindrome
Locked
Normalize the input (lowercase + strip non-alphanumerics) and check if it reads the same forwards and backwards using tw…
EasyPriority: LowJavaScript
Related prepNeed explanations instead of coding?Open interview Q&A Want the highest-signal questions only?Open Essential 60

Practice paths

Explore challenge categories

Focused paths for implementation and debugging practice.