100+ Front end Developer Interview Questions and Answers for Freshers

Check if a given singly linked list of integers is a palindrome or not.

• Create a function to reverse the linked list.

• Use two pointers to find the middle of the linked list.

• Compare the first half of the linked list with the reversed second half to determine if it's a palindrome.

Allocate books to students in a way that minimizes the maximum number of pages assigned to a student.

• Iterate through possible allocations and calculate the maximum pages assigned to a student.

• Find the minimum of these maximums to get the optimal allocation.

• Return the minimum pages allocated in each test case, or -1 if not possible.

Rearrange a linked list such that odd numbers appear before even numbers while preserving the order.

• Create two separate linked lists for odd and even numbers

• Traverse the original list and append nodes to respective odd/even lists

• Combine the odd and even lists while maintaining the order

• Return the rearranged linked list

The task is to identify all distinct triplets within an array that sum up to a specified number.

• Iterate through the array and use nested loops to find all possible triplets.

• Check if the sum of the triplet equals the specified number.

• Print the valid triplets or return -1 if no such triplet exists.

Find the most frequent word in a paragraph that is not in a list of banned words.

• Split the paragraph into words and convert them to uppercase for case-insensitivity.

• Count the frequency of each word, excluding banned words.

• Return the word with the highest frequency in uppercase.

Given an array of strings, find the lexicographically smallest string that can be used as a prefix to minimize the total cost of deleting prefixes from the strings.

• Iterate through the array to find the common prefix among all strings

• Choose the lexicographically smallest common prefix

• Delete the common prefix from each string in the array to minimize the total cost

Given a sorted alien dictionary in an array of strings, determine the character order of the alien language.

• Iterate through the words in the dictionary to build a graph of character dependencies.

• Perform a topological sort on the graph to determine the character order.

• Return the character array representing the order of characters in the alien language.

Find the postorder successor of a node in a binary tree.

• Traverse the binary tree in postorder to get the sequence.

• Find the index of the node 'M' in the postorder sequence.

• Return the element at the next index as the postorder successor.

• If 'M' is the last element in the sequence, return -1 as there is no successor.

Find all Jumping Numbers smaller than or equal to a given positive integer N.

• Iterate through numbers from 0 to N and check if each number is a Jumping Number.

• For each number, check if the absolute difference between adjacent digits is 1.

• Include all single-digit numbers as Jumping Numbers.

• Output the list of Jumping Numbers that are smaller than or equal to N.

Javascript is single-threaded.

• Javascript runs on a single thread called the event loop.

• This means that it can only execute one task at a time.

• However, it can delegate tasks to other threads using web workers.

• This allows for parallel processing without blocking the main thread.

Debounce the API call on input change to optimize performance.

• Implement a debounce function to delay the API call until the user has finished typing.

• Set a time interval for the debounce function to wait before making the API call.

• Cancel the previous API call if a new input change occurs before the time interval is up.

• Use a loading spinner to indicate to the user that the API call is in progress.

• Consider using a caching mechanism to store the API response for future use.

The process of building a front-end project involves planning, designing, coding, testing, and deploying.

• Gather requirements and create a project plan

• Design the user interface using tools like Figma or Sketch

• Code the front-end using HTML, CSS, and JavaScript

• Test the project for bugs and usability

• Deploy the project to a web server or hosting platform

The 'this' operator refers to the object that is currently executing the code.

• The value of 'this' depends on how a function is called.

• In a method, 'this' refers to the object that owns the method.

• In a regular function, 'this' refers to the global object (window in a browser).

• In an event handler, 'this' refers to the element that received the event.

• The value of 'this' can be explicitly set using call(), apply(), or bind() methods.

To center 3 divs vertically and horizontally, use flexbox and align-items/justify-content properties.

• Wrap the 3 divs in a parent container

• Set the parent container's display property to flex

• Set the parent container's align-items and justify-content properties to center

Count the number of words in given strings of array using higher order function.

• Use the map function to transform each string into an array of words

• Use the reduce function to count the total number of words in all strings

• Handle edge cases such as empty strings or strings with leading/trailing spaces

React lifecycle methods are functions that are called at different stages of a component's life.

• Mounting: constructor(), render(), componentDidMount()

• Updating: render(), componentDidUpdate()

• Unmounting: componentWillUnmount()

• Error Handling: componentDidCatch()

I built a responsive web application for managing tasks and deadlines.

• Used HTML, CSS, and JavaScript to create the frontend

• Implemented drag and drop functionality for task organization

• Integrated a calendar API for deadline tracking

Interceptors are middleware functions that can be used to intercept and modify HTTP requests and responses.

• Interceptors can be used in Angular to modify requests before they are sent to the server or responses before they are delivered to the application.

• To add an interceptor for only selected requests, you can create a custom interceptor class that implements the HttpInterceptor interface and then provide it in the HTTP_INTERCEPTORS multi-provider array.

• You can then use cond...read more

Memoization optimizes function calls by caching results for previously computed inputs.

• Memoization stores results of expensive function calls and returns cached results when the same inputs occur again.

• Example: A Fibonacci function can be optimized using memoization to avoid redundant calculations.

• In JavaScript, you can create a memoize function that takes another function as an argument and returns a new function.

• Use an object or Map to store the results of function calls, u...read more

The style of the id will apply first before the style of the class.

• IDs have higher specificity than classes, so the style of the id will take precedence over the style of the class.

• If both id and class have conflicting styles, the style of the id will be applied.

• Example: <div id='uniqueId' class='commonClass'>...</div> - the style of 'uniqueId' will be applied.

To fetch an API with proper error handling and async await, use try-catch block and await keyword.

• Use the fetch() function to make the API request.

• Wrap the fetch() call in a try-catch block to handle errors.

• Use the await keyword before the fetch() call to wait for the response.

• Check the response status code to handle different scenarios.

• Handle any errors or exceptions that may occur during the API request.

Mobile numbers are typically 10 digits long to ensure uniqueness and standardization for easy identification and communication.

• Standardization: Having a fixed length of 10 digits makes it easier for systems to validate and process mobile numbers.

• Uniqueness: With 10 digits, there are a large number of possible combinations, reducing the likelihood of duplicate numbers.

• International compatibility: Many countries have adopted 10-digit mobile numbers as a standard format for easy...read more

CSS positioning types control how elements are placed in a document flow, affecting layout and responsiveness.

• Relative: Positioned relative to its normal position. Example: `top: 10px;` moves it down from where it would normally be.

• Absolute: Positioned relative to the nearest positioned ancestor (not static). Example: `position: absolute; top: 0;` places it at the top of the ancestor.

• Fixed: Positioned relative to the viewport, remaining in the same place even when scrolling. ...read more

Developing a modal component involves creating a reusable UI element with HTML, CSS, and JavaScript for interactivity.

• 1. Create the HTML structure: Use a <div> for the modal with a header, body, and footer.

• Example: <div class='modal'><div class='modal-header'>...</div><div class='modal-body'>...</div><div class='modal-footer'>...</div></div>

• 2. Style the modal with CSS: Use flexbox for centering and transitions for smooth opening/closing.

• Example: .modal { display: flex; justif...read more

Responsive design ensures web applications adapt seamlessly to various screen sizes and devices for optimal user experience.

• Fluid grids: Layouts that use percentage-based widths instead of fixed pixels, allowing elements to resize based on the screen size.

• Media queries: CSS techniques that apply different styles based on device characteristics, such as width, height, or orientation.

• Flexible images: Images that scale within their containing elements, often using CSS properties...read more

Flexbox is a CSS layout model that allows for responsive design by distributing space along a single axis.

• Flexbox stands for 'Flexible Box' and is designed for one-dimensional layouts.

• It uses properties like 'display: flex;' to create a flex container.

• Items within the container can be aligned and distributed using properties like 'justify-content' and 'align-items'.

• Example: 'justify-content: center;' centers items horizontally.

• Flexbox allows for flexible item sizes, adapting ...read more

Yes, span is a tag in HTML used to apply styles to inline elements.

• Span is an inline element used to apply styles to a specific section of text or content.

• It does not add any extra space or line breaks.

• Example: <span style='color: red;'>This text will be red</span>