Overview

1. Problem Statement
2. Solution
   • Noting down the requirements
   • Describing the components to be used
   • Implementation
     1. Start by creating the UI
     2. Describe the config to be passed
     3. Using config create the state for each box.
     4. Create a working UI by linking all 3 previous steps.
     5. Add logic for color change on button click.
     6. Add logic to store clickOrder in which buttons were clicked.
     7. Finally add, logic to reset the color of each box to white, once all boxes have been clicked and their color is green.
3. Learnings

1. Problem Statement

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

2. Solution

i. Noting Down the Requirements:

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

ii. Describing the components to be used

For this I can break the UI into 3 components:

1. BoxesContainer
2. BoxesRow
3. Box

iii. Describing the implementation details

STEP-1

First I'll start by creating the UI. Create different files for all 3 components described above and write CSS for those.

STEP-2

In order to create the UI, I'll pass a config in the following format to the BoxesContainer.
```javascript

const config = [
  [true, true, true],
  [true, false, false],
  [true, true, true],
];

The config is an array of array, with each nested array depicting the row, and each boolean value depicting whether the box is present at that location or not. 

  
  
  STEP-3


Based on this config, I'll create a global state, which contains state for each box, which has an id and isClicked attribute. The state will look like this.

    ```javascript

const state = [
  [
    { id: "1", isClicked: false },
    { id: "2", isClicked: false },
    { id: "3", isClicked: false },
  ],
  [{ id: "4", isClicked: false }, null, null],
  [
    { id: "5", isClicked: false },
    { id: "6", isClicked: false },
    { id: "7", isClicked: false },
  ],
];



    

    

STEP-4

At this stage our code looks like as shown in the document below:

We've created 3 components BoxesContainer, BoxesRow, Box, and also written the CSS for that. And with the config we got as the input, we created the boxesState.





CodeSandbox Link 1

STEP-5

Now since our UI is ready, let's add the logic, of color change on box click.




CodeSandbox Link 2

STEP-6

We also need to maintain the clickOrder of different boxes. This will be used when we need to reset the box color one by one, when when all boxes color has been changed to green.

CodeSandbox Link 3

STEP-7

Now finally, we need to implement the logic, where once all the boxes are green, it should reset all boxes to white, in the same order in which they were clicked, one by one, by 1 second delay.

CodeSandbox Link 4

3. Learnings

1. Although I was able to give a working solution to this problem within around 45-50 mins, my code lacked scalability and reusability.
2. So initially, when I heard from the interviewer, that I need to create the exact same UI, I simply created divs for every box. I didn't think about the config. So even if the requirement is small, we should plan to write our code in such a way that later, it should be reusable and as configurable as possible.
3. During the interview, I had to change my state logic several times. Initially I was unable to come up with what the final state of the app will look like, and which state will be maintained at the child level and which will be maintained at parent level. So, this wasted some precious minutes in the interview.
4. I was finally able to come up with this code solution after 3 attempts. In this code too, there are some places where DRY principles can be used to improve the code quality.