10+ Accenture Front end Developer Interview Questions and Answers

Use React Router's Redirect component to redirect to login page if user is not logged in.

• Create a PrivateRoute component that checks if user is logged in

• If user is not logged in, redirect to login page using Redirect component

• Wrap the routes that require authentication with PrivateRoute component

Use the accept attribute in the input tag to only allow jpg and png files.

• Add accept attribute to input tag with 'image/jpeg, image/png' value

• This will restrict file selection to only jpg and png files

Use flexbox to center align a div in just one line in CSS.

• Set the parent container's display property to flex.

• Use the justify-content property with the value 'center' to horizontally center the div.

• Use the align-items property with the value 'center' to vertically center the div.

Remove duplicate elements from an Array

• Use the Set object to remove duplicate elements

• Convert the Set back to an array using the spread operator

• If the array contains objects, use a custom comparison function

Event bubbling is the process of propagating an event from the innermost element to its parent elements in the DOM hierarchy.

• Events in JavaScript are triggered on elements and then propagate up the DOM tree.

• During event bubbling, an event triggered on a child element will also trigger on its parent elements.

• This allows for event delegation, where a single event handler can be used for multiple elements.

• Event.stopPropagation() can be used to stop the event from further propaga...read more

Improving performance in Angular app involves optimizing code, reducing HTTP requests, lazy loading modules, and using AOT compilation.

• Optimize code by avoiding unnecessary watchers and using track by in ngFor loops

• Reduce HTTP requests by combining multiple requests into one using HTTP interceptors

• Lazy load modules to only load components when needed, improving initial load time

• Use Ahead-of-Time (AOT) compilation to pre-compile templates and improve load time

To adjust a box on the left, use CSS properties like margin-left or left.

• Use margin-left property to adjust the box's position to the right.

• Use left property with position: absolute or position: relative to adjust the box's position relative to its containing element.

• Consider using flexbox or grid layout for more control over the box's positioning.

Form validation can be handled using client-side and server-side validation techniques.

• Use HTML5 form validation attributes like required, pattern, min, max, etc.

• Implement client-side validation using JavaScript to provide instant feedback to users.

• Perform server-side validation to ensure data integrity and security.

• Display error messages next to the input fields for better user experience.

• Use a combination of front-end and back-end validation to prevent malicious attacks.

CSS accessibilities refer to making web content accessible to users with disabilities.

• Using proper color contrast for text and background

• Providing alternative text for images using the 'alt' attribute

• Using semantic HTML elements for better screen reader compatibility

Promises in JavaScript are objects representing the eventual completion or failure of an asynchronous operation.

• Promises help in handling asynchronous operations in a more readable and manageable way.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained together using .then() method to handle success and failure cases.

• They help in avoiding callback hell and writing cleaner asynchronous code.

• Example: const myPromise = new Promise((resolve,...read more

Redux Toolkit is an official, opinionated, batteries-included toolset for efficient Redux development.

• Redux Toolkit simplifies Redux code by providing a set of tools and best practices

• It includes utilities like createSlice, createReducer, configureStore, and createAsyncThunk

• Helps in writing concise and readable Redux code with less boilerplate

• Encourages the use of Immer for writing immutable updates in a more intuitive way

Redux is a predictable state container for JavaScript apps.

• Create a store to hold the state of your application

• Use actions to describe what happened

• Write reducers to specify how the state changes in response to actions

• Connect your components to the Redux store using mapStateToProps and mapDispatchToProps

Promises in JavaScript are objects representing the eventual completion or failure of an asynchronous operation.

• Promises are used to handle asynchronous operations in JavaScript.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained using .then() to handle success and .catch() to handle errors.

• Example: new Promise((resolve, reject) => { ... }).then(result => { ... }).catch(error => { ... });

let is block scoped, var is function scoped

• let is block scoped, var is function scoped

• let can't be re-declared in the same scope, var can be

• let variables are not hoisted, var variables are hoisted