techieshark/index.html

## index.html
<html>

<body>
<!--
	<button data-state="name" data-name="MistyRose" data-hex='FFE4E1' data-rgb='255,228,225' class="col-md-1">MistyRose</button>

	<button data-state="name" data-name="Blue" data-hex='0000FF' data-rgb='0,0,255' class="col-md-1">Blue</button> -->

	<div id="favs"></div>
	<div id="unfavs"></div>

</body>
</html>

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


<script>
// Convert from a named color ("Blue") to RGB ("rgb(0,0,255")
// thanks to http://stackoverflow.com/a/8046813/1024811
function convertToRGBColor(englishColor) {

    // create a temporary div.
    var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
    var computedStyle = window.getComputedStyle(div[0]);

    // get computed color.
    var computedColor = computedStyle.backgroundColor;

    // cleanup temporary div.
    div.remove();

    // done.
    return computedColor;

    // The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
};

// And to convert "rgb(R, G, B)" to #RRGGBB you can use:
// thanks to http://stackoverflow.com/a/8046813/1024811
function convertRGBDecimalToHex(rgb)
{
    var regex = /rgb *\( *([0-9]{1,3}) *, *([0-9]{1,3}) *, *([0-9]{1,3}) *\)/;
    var values = regex.exec(rgb);
    if(values.length != 4)
    {
        return rgb; // fall back to what was given.
    }
    var r = Math.round(parseFloat(values[1]));
    var g = Math.round(parseFloat(values[2]));
    var b = Math.round(parseFloat(values[3]));
    return "#"
        + (r + 0x10000).toString(16).substring(3).toUpperCase()
        + (g + 0x10000).toString(16).substring(3).toUpperCase()
        + (b + 0x10000).toString(16).substring(3).toUpperCase();
}
</script>


<script>

function addColors(colors, id) {
		$.each(colors, function(index, color) {
			// create a button
			var button = '<button class="col-md-1">' + color + '</button>';
			console.log(button);

			// add it to the DOM
			$(id).append(button);
		})
	}

var favs = [ 'MistyRose', 'Blue', 'PapayaWhip', 'BlanchedAlmond', 'mintcream'],
	unfavs = [ 'Red', 'Yellow'];

// create a bunch of buttons
addColors(favs, '#favs');
addColors(unfavs, '#unfavs');

// initialize the data-* properties and background colors based on the name.
var buttons = $('button');
buttons.each(function(index) {
	var name = $(this).text();
	$(this).css('background-color', name);

	$(this).attr('data-state', 'name')
	$(this).attr('data-name', name);

	rgb = convertToRGBColor(name);
	hex = convertRGBDecimalToHex(rgb);

	$(this).attr('data-rgb', rgb);
	$(this).attr('data-hex', hex);

})


$('button').click(function(e) {

	var name = $(this).attr('data-name'),
		hex = $(this).attr('data-hex'),
		rgb = $(this).attr('data-rgb');

	// get the current state.
	var state = $(this).attr('data-state');

	// examine the current state
	switch(state) {
		case 'name':
		// name is currently shown, switch to hex
		// update the element's text that is shown
			$(this).text(hex);
		// update the data-state attribute
			$(this).attr('data-state', 'hex');
		break;
		case 'hex':
		// hex currently shown, switch to rgb
		// update the element's text that is shown
			$(this).text(rgb);
		//update the data-state attribute
			$(this).attr('data-state', 'rgb');
		break;
		case 'rgb':
		// rgb shown, switch back to name
		// update the element's text that is shown
			$(this).text(name);
		//update the data-state attribute
			$(this).attr('data-state', 'name');
		break;
	}

});
</script>
	<html>

	<body>
	<!--
	<button data-state="name" data-name="MistyRose" data-hex='FFE4E1' data-rgb='255,228,225' class="col-md-1">MistyRose</button>

	<button data-state="name" data-name="Blue" data-hex='0000FF' data-rgb='0,0,255' class="col-md-1">Blue</button> -->

	<div id="favs"></div>
	<div id="unfavs"></div>

	</body>
	</html>

	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


	<script>
	// Convert from a named color ("Blue") to RGB ("rgb(0,0,255")
	// thanks to http://stackoverflow.com/a/8046813/1024811
	function convertToRGBColor(englishColor) {

	// create a temporary div.
	var div = $('<div></div>').appendTo("body").css('background-color', englishColor);
	var computedStyle = window.getComputedStyle(div[0]);

	// get computed color.
	var computedColor = computedStyle.backgroundColor;

	// cleanup temporary div.
	div.remove();

	// done.
	return computedColor;

	// The above returns "rgb(R, G, B)" on IE9/Chrome20/Firefox13.
	};

	// And to convert "rgb(R, G, B)" to #RRGGBB you can use:
	// thanks to http://stackoverflow.com/a/8046813/1024811
	function convertRGBDecimalToHex(rgb)
	{
	var regex = /rgb \( ([0-9]{1,3}) , ([0-9]{1,3}) , ([0-9]{1,3}) *\)/;
	var values = regex.exec(rgb);
	if(values.length != 4)
	{
	return rgb; // fall back to what was given.
	}
	var r = Math.round(parseFloat(values[1]));
	var g = Math.round(parseFloat(values[2]));
	var b = Math.round(parseFloat(values[3]));
	return "#"
	+ (r + 0x10000).toString(16).substring(3).toUpperCase()
	+ (g + 0x10000).toString(16).substring(3).toUpperCase()
	+ (b + 0x10000).toString(16).substring(3).toUpperCase();
	}
	</script>


	<script>

	function addColors(colors, id) {
	$.each(colors, function(index, color) {
	// create a button
	var button = '<button class="col-md-1">' + color + '</button>';
	console.log(button);

	// add it to the DOM
	$(id).append(button);
	})
	}

	var favs = [ 'MistyRose', 'Blue', 'PapayaWhip', 'BlanchedAlmond', 'mintcream'],
	unfavs = [ 'Red', 'Yellow'];

	// create a bunch of buttons
	addColors(favs, '#favs');
	addColors(unfavs, '#unfavs');

	// initialize the data-* properties and background colors based on the name.
	var buttons = $('button');
	buttons.each(function(index) {
	var name = $(this).text();
	$(this).css('background-color', name);

	$(this).attr('data-state', 'name')
	$(this).attr('data-name', name);

	rgb = convertToRGBColor(name);
	hex = convertRGBDecimalToHex(rgb);

	$(this).attr('data-rgb', rgb);
	$(this).attr('data-hex', hex);

	})




	$('button').click(function(e) {

	var name = $(this).attr('data-name'),
	hex = $(this).attr('data-hex'),
	rgb = $(this).attr('data-rgb');

	// get the current state.
	var state = $(this).attr('data-state');

	// examine the current state
	switch(state) {
	case 'name':
	// name is currently shown, switch to hex
	// update the element's text that is shown
	$(this).text(hex);
	// update the data-state attribute
	$(this).attr('data-state', 'hex');
	break;
	case 'hex':
	// hex currently shown, switch to rgb
	// update the element's text that is shown
	$(this).text(rgb);
	//update the data-state attribute
	$(this).attr('data-state', 'rgb');
	break;
	case 'rgb':
	// rgb shown, switch back to name
	// update the element's text that is shown
	$(this).text(name);
	//update the data-state attribute
	$(this).attr('data-state', 'name');
	break;
	}

	});
	</script>