What is doctype in HTML?

Build a Connect Four game with gravity based disc dropping, turn handling, and four in a row win detection.

Connect Four

Build a nested checkbox tree where checking a parent checks its children and a partly checked parent shows an indeterminate state.

Nested Checkboxes

Build a grid of randomly colored cells that can be regenerated and recolored on click.

Random Color Matrix

Build a temperature converter with live two-way conversion between Celsius and Fahrenheit.

Temperature Converter

Build a chainable, awaitable class that queues deploy steps, runs rollback prep first, and resolves to an ordered list of executed actions.

Deploy Pipeline Builder

A React hook that runs a countdown from a starting number of seconds down to zero, with start and stop controls.

useCountdown

A chainable add function that accumulates numbers across method calls and returns the total when sum() is invoked.

Chainable Add

A utility that measures how long another function takes to run and works for both synchronous and asynchronous functions.

Measure Execution Time

The TimerManager class in JavaScript manages multiple timers, offering multiple functionalities.

Timer Manager

Login form with client-side validations for name, email, and password fields.

Form Validations

Build a Toast component in React that renders a variant-based icon, a message, and a dismissible close button at the bottom right of the screen.

Toast I

Make the Toast provider manage state so that submitting the form adds a new toast and clicking the close button dismisses that specific toast.

Toast II

Let users dismiss every visible toast at once by pressing the Escape key, using a reusable custom hook.

Toast III

Mixed HTML, CSS, JavaScript, TypeScript, and React questions from a HackerRank assessment

HackerRank MCQ

Extend composeAsync so the returned function can accept multiple arguments that are passed to the rightmost function.

composeAsync II

Compose multiple async functions into one, running them right-to-left and awaiting each step.

composeAsync

Build a minimal jq(selector).css(...) that reads and writes inline styles across multiple call shapes.

Implement jQuery css()

Count the integers in an array that are divisible by 3 and contain at least two digits equal to 7.

Lucky Sevens

Convert a non-negative integer into its English word form, e.g. 18653 becomes "eighteen thousand six hundred fifty three".

Number to Words

Build a paginated data table with a page-size selector and Prev/Next navigation.

Pagination

Build a modal window component with a dark backdrop and close button that opens on user action.

Modal Window I

Enhance the modal window with Escape key support, body scroll lock, and smooth CSS transitions.

Modal Window II

Make the modal fully accessible with focus trapping, ARIA attributes, and return-focus on close.

Modal Window III

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

Build an OTP input component with auto-focus management, keyboard navigation, and paste support.

OTP Input

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

Camel Case Keys

Check whether an object satisfies a set of predicate functions — one for each property you care about.

Conforms To

Build a function that takes a list of values and returns a function that cycles through them on each call.

Cycle

Given an array of session records with user IDs, merge entries for the same user — sum their durations and combine their equipment lists without duplicates.

Data Merging

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

Filter an array down to only the elements that do not appear in any of the given exclusion arrays.

Difference

Remove elements from the end of an array as long as a predicate holds true, then return what's left.

Drop Right While

Remove elements from the front of an array as long as a predicate holds true, then return the rest.

Drop While

Reimplement Array.prototype.fill — replace a slice of an array with a given value, supporting negative indices.

Fill

Reimplement Array.prototype.findIndex — locate the position of the first element passing a test.

Find Index

Search an array from the end and return the index of the last element that passes a predicate test.

Find Last Index

Turn an array of [key, value] pairs into a plain object — the inverse of Object.entries.

From Pairs

Return how many parameters a function expects — a tiny question about Function.length.

Function Length

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

getElementsByTagName Hierarchy

Find common elements across multiple arrays, using an iteratee to determine how values are compared.

Intersection By

Find common elements across arrays using a custom comparator function instead of strict equality.

Intersection With

Given multiple arrays, return a new array of unique values that appear in every one of them.

Intersection

Determine whether a given value — object, array, string, Map, Set, or primitive — has no content.

Is Empty

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

JSON.stringify() II

Find the element in an array that produces the largest value when passed through a ranking function.

Max By

Calculate the arithmetic average of an array of numbers, returning NaN for empty arrays.

Mean

Find the element in an array that produces the smallest value when passed through a ranking function.

Min By

Write a function that tells you how many arguments it was called with.

Number of Arguments

Build your own Promise.reject — return a promise that is immediately rejected with a given reason.

promise.reject()

Build the ES2024 Promise.withResolvers — return a promise along with its resolve and reject functions as a plain object.

Promise.withResolvers()

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

Promisify II

Like range, but the numbers come out in descending order.

Range Right

Generate an array of numbers from start to end with an optional step between each value.

Range

Given any JavaScript collection type, return how many elements it contains.

Size

Build a chainable function where each call adds a number to a running total and a final empty call returns the result.

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

Combine multiple arrays into one with unique values, using an iteratee to decide what counts as a duplicate.

Union By

Implement a curry function with placeholder support for flexible argument positioning.

Curry II

Implement a function that composes asynchronous middleware functions like in Koa.js.

Middlewares

Implement a function that resolves a given value to a Promise, handling thenables and existing promises.

Promise.resolve()

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

Animate Elements in Sequence

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

Check if Called with new

An enhanced classNames that handles de-duplication and function values.

Classnames II

Creates an object with all properties that have falsy values removed.

Compact II

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

An enhanced debounce with cancel and flush methods for finer control over delayed invocations.

Debounce II

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

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

Decode String

Deep clone that also handles circular references using a visited map.

Deep Clone II

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

Fetch Interceptors

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

Maps an array using an async function with a concurrency limit.

mapAsyncLimit

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

Wraps a promise with a timeout so it rejects if it does not settle within a given duration.

Promise Timeout

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

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

Trie

A React hook that debounces a value, delaying updates until after a period of inactivity.

useDebounce

A React hook that attaches event listeners with automatic cleanup.

useEventListener

A React hook that runs a callback at a regular interval with proper cleanup.

useInterval

A React hook that detects whether a specific keyboard key is currently pressed.

useKeyPress

A React hook that tracks whether a CSS media query matches the current viewport.

Changelog

June 2026