Interview Preparation — Whiteboard, Take Home and Skype

Welcome to part-17 of the series and the final part of Interview Preparation. You can find part-16 here.

Below questions can be asked during a whiteboard/paper interview. You will be given a small component to make within 15–20 mins on a whiteboard/paper. You can also be asked to make a component in 15–20 mins in a jsfiddle type of environment.
Or there can be a larger take home problem, which needed to be submitted within 1–2 days.

Question 127- Write a function to reverse a string?
Answer- A very common whiteboard question. There is a reverse method available on array, so we convert it to array of string.

In the below solution str.split(''), will give [ “h”, “e”, “l”, “l”, “o” ]. Now when we do reverse() on it, it will give [ “o”, “l”, “l”, “e”, “h” ].

Now, we need to convert it back to String and we will use the join('')on the above result to return ‘olleh

Question 128- Write a function to sort an array?
Answer- This can be easily done by the inbuilt sort() on array. But the syntax is a bit different and we need to pass a callback function to it.

Question 129- Write a function to sort an array without using the in-built sort() method?
Answer- This can be done by using two nested for loops. The outer loop for “i” will iterate through the whole array. The inner loop for “j” will check whether the current element is smaller then the comparing element. It then changes position.

Question 130- Given an array of integers and a target sum, return the first pairs that add up to the target sum. Write a function that solves this?
Answer- This can be solve by solution given below, where we have two nested for loop. The we check whether arr[j] === target — arr[i] is true, which means we found the combination. Then we return from the function those values.

Question 131- Design a simple keyboard like below in plain CSS and HTML within 15 mins?

Image for post
Image for post
Keyboard with hover effect

Answer- To create this keyboard within 15 mins, you can use whatever CSS you are comfortable with. It can be done with CSS grid pretty quickly, as we have only 15 mins. The solution can be as below.

The codepen to the is above is here.

Question 132- Create a simple todo list in React within 30 mins in jsfiddle?
Answer- The key here is 30 mins and the interviewer is constantly watching you code on skype or personally on laptop. So, we should not try to do any fancy stuff. Below is a solution, which have a simple react input field. On click of the button we add the enterred text in the state list array.
From within the component we iterate through the list using map to display the todo list items.

React To-do list

Question 133- Create a simple Bar Chart with the below data in React within 30 mins in jsfiddle?

Answer- Now we don’t have to use any external library like rechart to show the Bar Chart. So, will plain logic we can do it by the below solution.

Bar Chart using React

Question 134- Create the game of connect-4 in ReactJS in 2 days time. Below are the guidelines for the same.

Answer- The code for the game which i created using react and redux, can be found here.

The main component which have the initial rendering and winning logic start from this code.

Now, the showGrid() shows the initial board, which is 7 columns and 6 rows.

When, a user click on a button, the handleClick() sends the column number to the action creator.

The action creator is simple and consists of below code.

Now, the reducer is where we maintain the state of the board and also the turn of the player. Now, the playingBoard is a 2-dimentional array where we save the board data in six columns.

If ‘red’ player hits the “Drop 0” button, then the playingBoard will become [[‘red’], [], [], [], [], [], []].
After this if the ‘yellow’ player hits the “Drop 0” button, then the playingBoard will become [[‘red’, ‘yellow’], [], [], [], [], [], []].

The newState after each clicking of the button, will update the playingBoard and currentPlayer in the main Connect component.

This will check the below function and it will in-turn check for the winning logic in other function checkForWinning().

Now the checkForWinning() function have the logic to check whether a player is winning horizontal, vertically or diagnolly.

If any player doesn’t win we change the currentPlayer name and the game is like below:

Image for post
Image for post
Not a winner yet

And if a player wins, we show a Popup with a button with the “Close” button reloading the game.

Image for post
Image for post
A winner is here

This concludes the 17 part series on Interview Preparation. Hope you liked it. Please clap or comment to show you support :)

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store