Color Picker – Big Tech Front-End Interview Question

In Front-End Developer technical screening interview, you may asked UI implementation question. It could be UX design interview question or logical app implementation.

It is very important that you prepare yourself for UI development question. One of the most frequently asked question is to implement color picker UI.

If you have worked in Editorial UI, CMS or any Editorial App, you have noticed color picker. You have asked how would you build color picker using vanilla javascript.

Before you start implementing you need to clarify few things. First, what you would display in UI? Would you add all the colors or specific color for implementation. Another good question to ask is where to display that color change?

Once you have all answers, you can start writing the actual code.

So, lets assume we have this specification from interviewer after asking all these questions.

Question: Create HTML/CSS Layout main container with current color white and 5 color picker divs. When user clicks any color from 5 given color picker divs, the main container will be updated with current color + selected color.

Let’s create Main Container and Color Picker divs.

 <div class='main'>
    <div class='container'>
      <span id='block'></span>
    </div>
    <ul class='color-chnage' id='change-color'>
      <li class='red'></li>
      <li class='blue'></li>
      <li class='yellow'></li>
      <li class='green'></li>
      <li class='pink'></li>
    </ul>
  </div>

As we have HTML code, now you should add CSS to display Layout. Remember to Add only required CSS.

.main {
  margin: 0 auto;
  max-width: 400px;
  width: auto;
  background-color: white;
}

.main .container {
  margin: 10px;
}

.main .container span {
  display: block;
  background-color: white;
  border: 2px solid #cccccc;
  border-radius: 5px;
  height: 100px;
  width: 200px;
  margin-bottom: 20px;
}

.main ul {
  list-style-type: none;
  display: flex;
  padding-left: 8px;
}

.main ul li {
  width: 50px;
  height: 38px;
  border-radius: 5px;
  margin-right: 10px;
}

.main ul li.red {
  background-color: red;
}

.main ul li.blue {
  background-color: blue;
}

.main ul li.yellow {
  background-color: yellow;
}

.main ul li.green {
  background-color: green;
}

.main ul li.pink {
  background-color: pink;
}

Here is Our HTML/CSS Layout.

Remember you mostly write code in blank document and not actual editor. So, you won’t run your code in Interview. But when you practice, it is always good to test your code.

Because we need to update the color for main div, we will use Javascript DOM method to update CSS for main div.

First We need to Create Selector functions. One Color div selector function and another one is main Container, where we will be going to update the background color.

const selectDivColor = () => {
  const pickerD = document.getElementById('change-color');
  pickerD.addEventListener('click', (e) => { 
    updateDivColor(e.target);
  });  
}

const currentDivColor = () => {
  const mainD = document.getElementById('block');
  let compStyles = window.getComputedStyle(mainD);
  let bgColor = compStyles.getPropertyValue('background-color');
  return bgColor;
}

After adding all code together.

const selectDivColor = () => {
  const pickerD = document.getElementById('change-color');
  pickerD.addEventListener('click', (e) => { 
    updateDivColor(e.target);
  });  
}

const updateDivColor = (target) => {
  let updatBg = '';
  let compStyles = window.getComputedStyle(target);
  let bgColor = compStyles.getPropertyValue('background-color');
  bgColor = cleanClr(bgColor);
  let mainColor = currentDivColor();
  mainColor = cleanClr(mainColor);
  mainColor = mainColor.split(',');
  bgColor = bgColor.split(',');
  updatBg = 'rgb(';
  
  for (let i = 0; i < bgColor.length; i++) {
    let sum = parseInt(bgColor[i]) + parseInt(mainColor[i]);
    sum = Math.round(sum/2);
    sum = sum.toString();
    updatBg += `${sum},`;
  }

  updatBg = updatBg.replace(/\,$/,')');
  
  const mainD = document.getElementById('block');

  mainD.style.backgroundColor = updatBg;
  
}

const currentDivColor = () => {
  const mainD = document.getElementById('block');
  let compStyles = window.getComputedStyle(mainD);
  let bgColor = compStyles.getPropertyValue('background-color');
  return bgColor;
}

const cleanClr = (clr) => {
  return clr.replace('rgb(', '').replace(')',''). replaceAll(' ', '');
}

selectDivColor();

Play Color Picker Here:

You can review DOM API in detail to prepare for your interview.