Interview Coding Challenges for Front End Engineer

Q1: Given two identical (but not the same) DOM trees, and a node from one of them, how do you find the same node in from other tree?

Solution

See the Pen DOM Traversal 1 by Shan (@shan-du) on CodePen.

Q2: How do you deeply flatten an array, recursively & iteratively?

i.e. Given:

      [1, [2, 3], [4, [5, 6]], 7]

We want:

      [1, 2, 3, 4, 5, 6, 7]

Solution

See the Pen Flatten Array by Shan (@shan-du) on CodePen.

Q3: Given a M x N matrix of characters, we want a message that starts from character at (0, 0). We then move 1 column right and one row down to get the next character, except: If we run out of rows down, then move one row up instead, and vise versa. If we run out of columns, then the message ends.

i.e. Given:

      var message = [
        ['I','B','C','A','K','L','A'],
        ['D','R','F','C','A','E','A'],
        ['G','H','O','E','L','A','D']
      ];

We want:

      IROCKED

Solution

See the Pen Decode Matrix by Shan (@shan-du) on CodePen.

Q4: We want to do a type-ahead search whenever user enters a character, but we only want to call the API 500ms after user stops typing, how do you implement this?

Solution

See the Pen Debounce API Call by Shan (@shan-du) on CodePen.

Q5: Using HTML and CSS, how would you create an image that would display another image (aligned to the bottom, right) when the user hovers over the image?

Solution

See the Pen Image Hover by Shan (@shan-du) on CodePen.

Q6: How to implement square root function?

Solution

See the Pen Square Root Implementation by Shan (@shan-du) on CodePen.

Q7: We have an array of objects A and an array of indexes B. Reorder objects in array A with given indexes in array B. Do not change array A's length.

i.e. Given:

      var A = ['C', 'D', 'E', 'F', 'G'];
      var B = [3, 0, 4, 1, 2];

We want:

      indexSort(A, B);
      // A is now ['D', 'F', 'G', 'C', 'E'];

Solution

See the Pen Array Index Match by Shan (@shan-du) on CodePen.

Q7: Alex is standing on the top left cell (1,1) of a M rows x N columns table.
Initially, he is facing right cell. He moves on the table in the following way:
He moves in the table as much as he can. How many cells will he visit before he stops?

i.e. Given 3x4 Grid:

        0  1  x  x
        3  2  7  8
        4  5  6  9

We want:

      AlexMove(3, 4);
      // returns 9

Solution

See the Pen Move In Grid by Shan (@shan-du) on CodePen.