Hex value board

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 = [
"#519032",
"#0096d6",
"#b3d236",
"#0277c6",
"#e2f2f9",
"#006F7A",
"#D2DA40",
"#F1882C",
"#F7A83C",
"#F6F9F9",
"#E9F4F4",
"#F6F6D0",
"#DDE7D4",
"#45638D",
"#9AD0D2",
"#555555",
"#767171",
"#2776ad",
"#789b59"
];
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('');
});