Google

Build a sortable list where items can be reordered by dragging and dropping.

Drag and Drop Sortable List

Generate a table based on the number of rows and columns entered by the user.

Dynamic Table Generator

A reusable image carousel component that allows users to navigate through a collection of images with smooth transitions and intuitive controls.

Image Carousel

Build an NxN Tic Tac Toe game where the board size is configurable and winning lines are generated automatically for any board size.

NxN Tic Tac Toe

Create a reusable progress bar component that visually represents a percentage value with customizable max value.

Progress Bar I

Add smooth CSS transitions and animations to the progress bar for a polished filling effect.

Progress Bar II

Enhance the progress bar with proper ARIA attributes and accessibility roles for screen reader support.

Progress Bar III

Component displays a list of selectable options when clicked and returns the selected value to the parent component.

Select Menu

Build an editable spreadsheet grid on top of a formula engine: edit a cell to see its formula, blur to see the value, and watch dependent cells update through event delegation and imperative DOM writes.

Spreadsheet UI

Generate a hierarchical table of contents from a HTML document.

Tic Tac Toe I

Add winner detection logic to the Tic Tac Toe game by checking rows, columns, and diagonals for three matching marks.

Tic Tac Toe II

Integrate async request handling into the Tic Tac Toe game to send game results to a server endpoint.

Tic Tac Toe III

Build an autocomplete input backed by a Trie: type a prefix to see matching words, navigate the dropdown with the keyboard, and select with Enter or click.

Trie Typeahead

Build a counter application with undo and redo functionality that tracks operation history and allows users to navigate through past states.

Undo Redo

Animate a list of DOM elements one after another, where each animation starts only after the previous one completes.

Animate Elements in Sequence

Transforms each element in an array using an asynchronous mapping function.

asyncMap

Detect whether a function was invoked as a regular function call or as a constructor with the new keyword.

Check if Called with new

Recursively convert all keys in an object from snake_case or kebab-case to camelCase.

Camel Case Keys

Given a DOM element, generate a unique CSS selector string that can be used to select that exact element from the document.

CSS Selector Generator

Implement the instanceof operator from scratch by walking the prototype chain to check if an object is an instance of a constructor.

Custom instanceof

Design a Promise-like class with methods to manually resolve or reject, and to attach callbacks.

Custom Promise

A debounce variant that fires the callback on the leading edge (immediately on first call) rather than waiting for the delay to pass.

Debounce with Immediate Flag

Debouncing enhances performance by delaying function execution until a certain period of inactivity, preventing unnecessary calls.

Debounce

Decode an encoded string where patterns like "3[ab]" expand to "ababab", supporting nested patterns.

Decode String

Deep equality checks if two objects or arrays have the same properties and values, including the equality of the nested objects.

Deep Equality

Recursively apply a transform function to every leaf value in a nested object or array.

Deep Map

Recursively strip specified keys from an object and all its nested children.

Deep Omit

Implement a myExtends helper that mimics ES5 prototype-based inheritance by combining two constructor functions into one, with constructor stealing, a shared prototype chain, and static inheritance.

ES5 Extends

Enhance the Event Emitter class to support method chaining.

Event Emitter II

Emits events and registers listeners for handling asynchronous, event-driven operations.

Event Emitter

Build a fetch wrapper that supports request and response interceptors, similar to how Axios interceptors work.

Fetch Interceptors

Takes a nested array and merges all its layers into a single, flat array.

Flatten Array

Implement a fuzzy search function that finds items where the query characters appear in order, supporting partial and non-consecutive matches.

Fuzzy Search

Implement a custom version of the getElementsByClassName method from scratch.

getElementsByClassName

Find DOM elements matching a chain of nested tag names, like a simplified descendant CSS selector.

getElementsByTagName Hierarchy

Implement a custom version of the getElementsByTagName method from scratch.

getElementsByTagName

Build a getType function that returns the correct type name for any JavaScript value.

Get Type

Convert special characters in a string to their HTML entity equivalents to prevent XSS attacks and ensure safe rendering.

HTML Encode

Convert a DOM element tree into a JSON object representation that captures the type, props, and children.

HTML to JSON

Build a search engine that indexes documents by their words and supports fast keyword-based search with relevance ranking.

In-Memory Search Engine

Build a simplified version of JSON.parse() that converts a JSON string into a JavaScript value by parsing it character by character.

Implement JSON.parse()

Extend your JSON.stringify implementation with replacer function and indentation support.

JSON.stringify() II

Build your own version of JSON.stringify that serializes JavaScript values to JSON strings.

Implement JSON.stringify()

Convert a nested JSON object describing a DOM structure into actual HTML elements and render them.

JSON to HTML

Safely access deeply nested object properties using a path string or array.

Implement lodash.get()

Set a value at an arbitrary nested path, creating intermediate objects or arrays as needed.

Implement lodash.set()

Implement a Least Recently Used cache with O(1) get and put operations.

LRU Cache

Implement a priority queue where elements are dequeued based on their priority rather than insertion order.

Priority Queue

Runs a callback when a promise settles, regardless of whether it resolved or rejected, and passes the original value through.

promise.finally( )

Execute async tasks in parallel while tracking priority, resolving with the highest-priority result that succeeds.

Execute Promises with Priority

Returns a promise that resolves or rejects as soon as one of the promises in an iterable settles.

promise.race( )

The function retries a promise returning function with optional delays until success or a max attempt limit.

Retry Promise N Times

Convert an RGB color value to its hexadecimal string representation.

RGB to HEX

Implement the Singleton design pattern to ensure a class has only one instance and provides a global point of access to it.

Singleton Pattern

Build the reactive engine behind a spreadsheet: store formulas, track which cells depend on which, and recompute every dependent in the right order when a cell changes, detecting circular references.

Spreadsheet Engine

Highlight search matches in a DOM tree even when the match spans across multiple elements and text nodes.

Text Search II

Highlight all occurrences of a query string inside a DOM tree by wrapping matches in bold tags.

Text Search

Throttling optimizes performance by limiting function execution to a specified rate, preventing excessive calls over short intervals.

Throttle

Implement a Trie (prefix tree) data structure that supports insert, search, startsWith, remove, and find operations for efficient string lookups.