Hex value board - YC

by rdenver6

HTML

<div style="display:none;">
<input id="tempInput" type="text">
</div>
<div id="container">
</div>

CSS

#container {display:flex;flex-wrap:wrap;}
#container > div {height:50px; margin:10px; width:80px; border:1px solid black;}

JavaScript

var colors = [
"#70bf44",
"#005e9e",
"#f7931e",
"#55d5e0",
"#b3d236",
"#555555",
"#f4f4f4"
];
var colorString = "";
for (i = 0; i < colors.length; i++) { 
		var color = colors[i];
    console.log(color);
    colorString += "<div>" + color + "</div>";
}
console.log(colorString);
$("#container").html(colorString);
$( "#container div" ).each(function( index ) {
	var bg = $(this).text();
  $(this).css("background-color",bg);
});
$( "#container div" ).click(function() {
	var text = $(this).text();
  console.log(text);
  $("#tempInput").val(text);
  
  $("#tempInput").select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
  $("#tempInput").val('');
});