Frontend Interview Questions Library

Build an interactive N×N chessboard in Angular. Clicking a cell should highlight it and clear the previous selection. Add a size control so users can change board dimensions.

Build an Angular progress bar for values 0–100 with +10/−10 controls. Clamp the value, show the percentage, and change the fill color based on thresholds (red/orange/green) to reflect status and urgency. Concepts: compo…

Implement a standalone counter with increment, decrement, and reset. Guard the decrement at zero, disable the minus button when the value is 0, and keep state in a single component property for predictable behavior.

Support an optional initial value and keep the API simple so consumers can call inc/dec/get without exposing the internal state. Mention closure behavior, edge cases like negative increments, and tests for independent c…

Build a simple React image slider with previous/next buttons and dot navigation. Show the current slide, its title, and the slide index (e.g. "Slide 1 of 3"). Disable navigation buttons when you reach the start or end.…

Create a Like button with toggle state and a counter in Angular. Clicking should increment on like, decrement on unlike, and never allow the count to drop below zero. The template should reflect state immediately and ap…

Build an interactive N×N chessboard in React. Clicking a cell should highlight it and clear the previous selection. Include a size control so users can switch board dimensions.

Build a React counter component with increment/decrement and a zero floor. Use state for the count, disable decrement at zero, and keep UI text in sync with state changes so the user always sees valid values. Concepts:…

Generate a dynamic table in React from row/column inputs. Normalize values, rebuild the grid on action, and render consistent labels so users can verify correct dimensions. Concepts: react, state, event-handlers. React…

Build a React Like button that toggles between liked/unliked and updates a count. Clicking should add or subtract one based on current state, and the counter must never drop below zero. This checks controlled state, eve…

Build a React progress bar for values 0–100 with +10%/−10% controls. Clamp progress to the valid range and change the bar color by thresholds (e.g., red <34, orange 34–66, green >66). Show the numeric percentage a…

Implement a reusable widget in React. It should render a row of clickable stars, allow the user to select a rating, and notify a parent component when the rating changes. React focus: build a controlled c…

A callback is a function passed as an argument to another function to be executed later, often after a task is completed. Covers: async, callbacks, event loop, functions, higher order functions.

When multiple async requests are in flight, they can resolve out of order and overwrite newer UI state. Explain why this happens and how to prevent stale updates with cancellation or guards.

Security-focused frontend interview guide to DOM XSS: attacker-controlled sources, dangerous DOM sinks, safe rendering patterns, URL/protocol validation, and defense in depth with CSP and Trusted Types.

Hoisting is JavaScript’s default behavior of moving declarations to the top of their scope before code execution. In practice, it means you can use certain variables and functions before declaring them — but only partia…

A closure happens when a function keeps access to variables from its outer scope, even after that outer function has finished. It’s how JavaScript allows private data and persistent state inside functions.

Event delegation is a technique where a single event listener on a parent element handles events for multiple child elements by using event bubbling and checking the event target. Edge cases include stopPropagation and…

During the creation phase, JavaScript moves declarations to the top of their scope (hoisting). However, variables declared with `let` and `const` exist in a 'temporal dead zone' until their declaration is reached, makin…

Explain how Vue slots work (default, named, and scoped slots), what problem they solve, and how slot props allow a child component to pass data back to the parent’s template while still keeping one-way data flow.

The value of `this` in JavaScript depends on how a function is called — not where it’s defined. It can refer to the global object, a specific object, or be `undefined` in strict mode or arrow functions. The value of thi…

All variable declarations are hoisted, but only `var` is initialized with `undefined`. Variables declared with `let` and `const` exist in the temporal dead zone until execution reaches their declaration, making them ina…

Lifting state up means moving shared state to the closest common ancestor and passing it down via props. This keeps siblings in sync and avoids duplicated state. The trade-off is prop drilling vs shared state, so test u…

This question checks if you can reason about performance across the network, render pipeline, assets, and runtime. Interviewers expect concrete tactics like caching, compression, code splitting, and image optimization.