Your AI Wingman for your next interview

The most comprehensive bank Interview Answer Review tooling available online.

Javascript
Can you devise a square div and a color swatch list, with a JavaScript functionality that combines colors upon clicking the swatches?
Frontend Engineer

Tencent Games

Coinbase Logo

Coinbase

Panda Security Logo

Panda Security

Color Blender

</p> <p>    body {</p> <p>      font-family: sans-serif;</p> <p>      padding: 20px;</p> <p>    }</p> <p>    #colorBox {</p> <p>      width: 200px;</p> <p>      height: 200px;</p> <p>      background-color: white;</p> <p>      border: 2px solid #ccc;</p> <p>      margin-bottom: 20px;</p> <p>    }</p> <p>    .swatch {</p> <p>      display: inline-block;</p> <p>      width: 40px;</p> <p>      height: 40px;</p> <p>      margin: 5px;</p> <p>      cursor: pointer;</p> <p>      border: 2px solid transparent;</p> <p>    }</p> <p>    .swatch.selected {</p> <p>      border-color: black;</p> <p>    }</p> <p>

</p> <p>    const colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'cyan'];</p> <p>    const swatchesContainer = document.getElementById('swatches');</p> <p>    const colorBox = document.getElementById('colorBox');</p> <p>    let selectedColors = [];</p> <p></p> <p>    // Create swatches</p> <p>    colors.forEach(color => {</p> <p>      const swatch = document.createElement('div');</p> <p>      swatch.className = 'swatch';</p> <p>      swatch.style.backgroundColor = color;</p> <p>      swatch.dataset.color = color;</p> <p>      swatch.addEventListener('click', () => toggleColor(swatch));</p> <p>      swatchesContainer.appendChild(swatch);</p> <p>    });</p> <p></p> <p>    function toggleColor(swatch) {</p> <p>      const color = swatch.dataset.color;</p> <p>      if (selectedColors.includes(color)) {</p> <p>        selectedColors = selectedColors.filter(c => c !== color);</p> <p>        swatch.classList.remove('selected');</p> <p>      } else {</p> <p>        selectedColors.push(color);</p> <p>        swatch.classList.add('selected');</p> <p>      }</p> <p>      updateBlendedColor();</p> <p>    }</p> <p></p> <p>    function updateBlendedColor() {</p> <p>      if (selectedColors.length === 0) {</p> <p>        colorBox.style.backgroundColor = 'white';</p> <p>        return;</p> <p>      }</p> <p></p> <p>      const rgbValues = selectedColors.map(color => getRGB(color));</p> <p>      const blended = rgbValues.reduce((acc, rgb) => {</p> <p>        acc.r += rgb.r;</p> <p>        acc.g += rgb.g;</p> <p>        acc.b += rgb.b;</p> <p>        return acc;</p> <p>      }, { r: 0, g: 0, b: 0 });</p> <p></p> <p>      const count = selectedColors.length;</p> <p>      const avgColor = `rgb(${Math.round(blended.r / count)}, ${Math.round(blended.g / count)}, ${Math.round(blended.b / count)})`;</p> <p>      colorBox.style.backgroundColor = avgColor;</p> <p>    }</p> <p></p> <p>    function getRGB(color) {</p> <p>      const temp = document.createElement('div');</p> <p>      temp.style.color = color;</p> <p>      document.body.appendChild(temp);</p> <p>      const rgb = window.getComputedStyle(temp).color;</p> <p>      document.body.removeChild(temp);</p> <p></p> <p>      const match = rgb.match(/\d+/g);</p> <p>      return {</p> <p>        r: parseInt(match[0]),</p> <p>        g: parseInt(match[1]),</p> <p>        b: parseInt(match[2])</p> <p>      };</p> <p>    }</p> <p>

8 months ago

Showing 1 to 10 of 70 results

*All interview questions are submitted by recent Tencent Games candidates, labelled and categorized by Prepfully, and then published after verification by current and ex-Tencent Games employees.