Amazon

Vertically stacked set of interactive headings that each reveal an associated section of content.

Accordion

Build a city search component with a text input that dynamically fetches and displays matching city suggestions from an API.

City Search I

Add result caching to the city search so previously searched terms return instantly without redundant API calls.

City Search II

Implement debouncing in the city search to reduce excessive API calls while the user is actively typing.

City Search III

Component that allows users to submit feedback through a simple form with validation and accessibility features.

Feedback Form

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

Image Carousel

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

Select Menu

Component that allows users to rate items by selecting a number of stars out of a maximum value.

Star Widget

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

polyfill function that replicates the behavior of the built-in Function.prototype.apply() method.

Polyfill: apply()

polyfill function that replicates the behavior of the built-in Function.prototype.bind() method.

Polyfill: bind( )

polyfill function that replicates the behavior of the built-in Function.prototype.call() method.

Polyfill: call( )

Generates a new array by merging arrays and values without modifying the originals.

Polyfill: concat( )

Implement a JavaScript function that creates counter objects with multiple operations.

Counter Advanced

Implement a JavaScript function that creates customizable counters.

Counter Function

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

Currying is a technique of translating a function that takes multiple arguments into a sequence of functions.

mul(a)(b)(c)

multiAdd(1,2)(3)(4,5,6)()

sum(a)(b)(c).....(n)

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 Copy

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

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

Fetch Interceptors

Creates a new array with elements passing a test in environments lacking native support.

Polyfill: filter( )

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

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()

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

Generates a new array by applying a function to each item in environments without native functionality.

Polyfill: map( )

Once

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

Extend promisify to handle callbacks that return multiple values, and build promisifyAll for entire objects.

Promisify II

Converts a callback-based function to a promise-based function.

promisify

Transforms an array into a single value using a function in unsupported environments.

Polyfill: reduce( )

Convert an RGB color value to its hexadecimal string representation.

RGB to HEX

Recreate setInterval behavior using only setTimeout.

Implement setInterval using setTimeout

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

Singleton Pattern

The sleep function is a way to pause or delay the execution of the subsequent code for a specified amount of time.

sleep( )

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

Throttle

Closure is not capturing a value, it is preserving access to a variable.

Tricky Closure

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