Interactive Color Picker

A fun way to randomly select a color just by hovering your mouse along the boxes on the grid.

View source code on GitHub

Demo

Date of Completion

October 17, 2017 - October 8, 2018

JavaScript Colors

In this project, I have created a random color generator that only requires you to hover your mouse on any grid block to get a random color returned to you.

The technology behind it is extremely simple too.

HTML

The core HTML structure (using Pug for rapid prototyping):

html
  head
    title Interactive Random Color Picker by Mouse Hovering

  body
    h1 Interactive Random Color Picker by Mouse Hovering  
    p Try hovering your mouse over a box and see the magic happen! Click on the colored box that you want to copy its RGB value.

    main
      #grid-wrapper

Keep an eye on our grid-wrapper DIV tag though as this is the part that JavaScript interacts with.

CSS

The only focus here is probably the CSS Grid magic.

#grid-wrapper {
  width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(9, 100px);

  ...

We want nice square tiles so a width of 900px ensures that. When setting our wrapper to be a grid, we set the display property to grid.

grid-template-columns is set to repeat(9, 100px) because we want a nice 9-column grid with each unit representing a width of 100px.

JavaScript

Since we want a 9-column grid (9 by 9), we create a relatively simple JavaScript function that generates the tiles (each grid unit) for us.

Create the grid tiles!

const AMOUNT = 9;

function createGrid(amount) {
  let divGridWrapper = document.getElementById('grid-wrapper');
  
  let i = 0;
  for (i; i < (amount * amount); i++) {
    let divTile = document.createElement('div');
    divTile.innerText = i;
    divTile.id = i
    divTile.onmouseover = paintBox;
    divGridWrapper.appendChild(divTile);
  } 
}

What the function above roughly translates to is let's loop through the amount squared and perform this:

  1. Create a new element with a div tag
  2. Set its text content to be the current index being traversed
  3. Assign a function called paintBox to it which will only be called every time your mouse move overs it
  4. Append this recently created element as a part of the divGridWrapper parent.

Interact with the mouse

Once this is done, we can move on to understand what the paintBox function does. And it's super duper simple 😁!

function paintBox() {
  var r = Math.floor(Math.random() * 256);
  var g = Math.floor(Math.random() * 256);
  var b = Math.floor(Math.random() * 256);
  var randomRGB = 'rgb(' + r + ',' + g + ',' + b + ')';
  this.innerHTML = '<span>rgb(</span>' + r + ', ' + g + ', ' + b + '<span>)</span>';
  this.style.background = randomRGB;
  this.onclick = function() {
    document.execCommand("copy");
  }
  this.addEventListener("copy", function(event) {
    event.preventDefault();
    if (event.clipboardData) {
      event.clipboardData.setData("text/plain", this.textContent);
      alert(randomRGB + " copied to clipboard!")
    }
  });
  this.onmouseout = removeSettings;  // Restore the tile to its individual state!
}

Here's what really happens:

  1. We generate a random RGB color!
  2. By setting the innerHTML, we ouput the color as a string
  3. The tile's background color is set to it
  4. The onClick function, when clicked, will copy the generated RGB to your clipboard so you can use it elsewhere!
  5. Don't forget to clear the current state after the mouse has moved away. So we call removeSettings.

The full score code is available on CodePen so be sure to check it out!

Wheew! That's it 🔥 I hope you find this helpful when it comes to JavaScript interaction.

A project like this is simple and it allows you to have some fun with JavaScript!