HTML


<div id="container">
  <span id="directions">Click anywhere</span>
  <div id='results'></div>
</div>


CSS


/**
** Purple Lover
** @webbeloz
*/
#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#directions {
  position: absolute;
  top: 0;
  left: 50vw;
  transform: translateX(-50%);
  padding-left: 20px;
  padding-right: 20px;
  height: 40px;
  /*background-color: rgba(0, 0, 0, 0.4);
  background-color: #0004;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border: 1px solid #0006;
  border-top: none;*/
  color: #fff;
  font-family: 'Lucida Sans Unicode', sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 4px;
  line-height: 40px;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}
#results {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 40px;
 /*background-color: rgba(0, 0, 0, 0.4);
  background-color: #0004;
  border: 1px solid rgba(0, 0, 0, 0.6);
  border: 1px solid #0006;*/
  color: #fff;
  font-family: 'Lucida Sans Unicode', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 4px;
  line-height: 40px;
  cursor: default;
}
#modal {
  width: 36px;
  height: 36px;
  position: relative;
	top: 50vh;
  margin: 1em auto;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: rotate(45deg) scale(1);
          transform: rotate(45deg) scale(1);
}
#modal:before {
  content: "";
  position: absolute;
  display: block;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background-color: #b27cd3;
  width: inherit;
  height: 24px;
  top: 12px;
  left: 0;
}
#modal:after {
  content: ''; /*attr(data-msg);*/
  position: absolute;
  display: block;
  background-color: #b27cd3;
  width: 24px;
  top: 0;
  left: 12px;
  height: inherit;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
/*
#modal {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 200px;
  background-color: #fff;
  opacity: 0;
  border-radius: 8px;
  transition: opacity 0.5s;
} #modal::after {
  content: attr(data-msg);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #000;
  font-family: 'Lucida Sans Unicode', sans-serif;
  font-size: 16px;
  color: #333;
}*/
#modal.visible {
  opacity: 1;
}
#btnDismiss {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 30px;
	background-color: transparent;
	border: 0px none;
  /*background-color: rgba(0, 0, 0, 0.6);
  background-color: #0006;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border: 1px solid #0008;*/
  color: #fff;
  font-family: 'Lucida Sans Unicode', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
  cursor: pointer;
  z-index: 1;
} #btnDismiss:focus {
  outline: none;
}



JS


let container, 
    results;

const
sendAlert = (msg) => {
  let removeClass, removeChild;
  let modal = document.createElement('div');
  modal.id = 'modal';
  modal.setAttribute('data-msg', msg);
  container.appendChild(modal);
  
  let dismiss = document.createElement('button');
  dismiss.id = 'btnDismiss';
  dismiss.innerHTML = 'Love';
  modal.appendChild(dismiss);
  dismiss.onclick = () => {
    modal.classList.remove('visible');
    clearTimeout(removeClass);
    clearTimeout(removeChild);
    setTimeout(() => {
      container.removeChild(modal);
      container.onclick = onContainerClick;
    }, 500);
  };
  
  setTimeout(() => {
    modal.classList.add('visible');
  }, 100);
  
  removeClass = setTimeout(() => {
    modal.classList.remove('visible');
  }, 3000);
  
  removeChild = setTimeout(() => {
    container.removeChild(modal);
    container.onclick = onContainerClick;
  }, 3500);
},

onContainerClick = () => {
  let hex = results.innerHTML.toUpperCase(),
      range = document.createRange();
  
  window.getSelection().removeAllRanges();
  
  range.selectNode(results);
  window.getSelection().addRange(range);
  let success = document.execCommand('copy');
  
  success ? sendAlert(`Successfully copied ${hex} to clipboard`) : sendAlert(`Unable to copy ${hex} to clipboard`);
  
  window.getSelection().removeAllRanges();
  
  container.onclick = null;
},

doubleDigit = (num) => {
  let strNum = String(num),
      newNum;
  
  if (strNum.length < 2) {
    newNum = '0' + strNum;
  } else {
    newNum = strNum;
  }
  
  return newNum;
},
      
rgbToHex = (rgb) => {
  r = parseInt(rgb[0], 10).toString(16);
  g = parseInt(rgb[1], 10).toString(16);
  b = parseInt(rgb[2], 10).toString(16);
  
  r = doubleDigit(r);
  g = doubleDigit(g);
  b = doubleDigit(b);
  
  return `#${r}${g}${b}`;
},
      
onContainerMouseMove = (e) => {
  let ww = window.innerWidth,
      wh = window.innerHeight,
      posX,
      posY,
      percX,
      percY,
      hslX,
      hslY,
      rgb;
  
  posX = e.clientX;
  posY = e.clientY;
  
  percX = Math.floor(posX / ww * 100);
  percY = Math.floor(posY / wh * 100);
  
  hslX = Math.floor((percX / 100) * 360);
  hslY = percY;
  
  container.style.backgroundColor = `hsl(${hslX}, 50%, ${hslY}%)`;
  
  rgb = window.getComputedStyle(container).backgroundColor.replace('rgb(', '').replace(')', '').split(', ');
  
  results.innerHTML = rgbToHex(rgb);
},

eventListeners = () => {
  container.onmousemove = onContainerMouseMove;
  container.onclick = onContainerClick;
},

initFns = () => {
  container = document.querySelector('#container');
  results = document.querySelector('#results');
  eventListeners();
};

document.onreadystatechange = () => {
  if (document.readyState == 'complete') {
    initFns();
  }
}



CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now