Commonly asked Machine Coding Problem in Front-end Interviews

This question was asked in Round 2 which was more around System Design and Live Coding at a well-known startup for a Senior Front-end Engineer Role. I have seen this problem statement come up in Front-end roles at different startups.

Expectations: Need to code it in React within 30–40 mins.

1. Problem Statement

Create a UI and functionality that looks exactly like shown in this Link

Things To Be Implemented

1. The UI should look like shown in the image above with 7 boxes shaped in C shape.
2. On clicking the box, its color changes to green.
3. When all boxes are green, they should again go back to the previous color yellow, one by one, by a 1-second delay, in the same order as they were clicked.

The code-sandbox Link

I will be adding the CSS styles I used below (It is self-explanatory):

I implemented the UI using two components:

Firstly the App Component and second is the Box Component which displays each grid item in the UI.

Step 1: In the App.js file we define a configuration using useState Hook called grid which indicates if the box or grid item is clicked or is visible.

Here the queue array denotes the order in which the grid item was clicked. We initialize the array using the useState Hook.

Step 2:

Now we need to render/show the 9*9 items in a grid layout using the grid configuration that we had defined above.

We can map through the grid items and render the Box Component which shows the grid item in App.js

We will be discussing the handleClicked function afterward.

Step 3:

Let’s create the Box component now.

The Box component takes the item and handleClicked function as a prop. If the item isVisible (as set in the grid state earlier) we conditionally show the <div> with the id else we show an empty div.

Also if the item is clicked we make the background color of the div as green or yellow using classNames green and yellow.

Step 4 :

Now let’s start implementing the handleClicked function in the App.js component.

The handleClicked function takes care of the following implementations:

1. It adds the grid item to our queue state if it is not already added in the queue (Queue is an array that maintains the order in which the divs were clicked)
2. Sets grid item’s isClicked property to true when it is clicked (which changes the color of the div to green)

Step 5:

Now the last step is to implement the logic for changing the color of all the divs one by one back to yellow every 1 second after clicking all the 7 divs.

Also, we need to set the queue to empty after all the 7 divs were clicked

That’s it… Hope you liked this article. Please do at least “one clap, one comment, follow and share.” It motivates me.