CSS Color Tester Buttons

by Spencer Smith

HTML

<input>
<div id="bottle">
    <button>aliceblue</button>
    <button>antiquewhite</button>
    <button>aqua</button>
    <button>aquamarine</button>
    <button>azure</button>
    <button>beige</button>
    <button>bisque</button>
    <button>black</button>
    <button>blanchedalmond</button>
    <button>blue</button>
    <button>blueviolet</button>
    <button>brown</button>
    <button>burlywood</button>
    <button>cadetblue</button>
    <button>chartreuse</button>
    <button>chocolate</button>
    <button>coral</button>
    <button>cornflowerblue</button>
    <button>cornsilk</button>
    <button>crimson</button>
    <button>cyan</button>
    <button>darkblue</button>
    <button>darkcyan</button>
    <button>darkgoldenrod</button>
    <button>darkgray</button>
    <button>darkgreen</button>
    <button>darkkhaki</button>
    <button>darkmagenta</button>
    <button>darkolivegreen</button>
    <button>darkorange</button>
    <button>darkorchid</button>
    <button>darkred</button>
    <button>darksalmon</button>
    <button>darkseagreen</button>
    <button>darkslateblue</button>
    <button>darkslategray</button>
    <button>darkturquoise</button>
    <button>darkviolet</button>
    <button>deeppink</button>
    <button>deepskyblue</button>
    <button>dimgray</button>
    <button>dodgerblue</button>
    <button>firebrick</button>
    <button>floralwhite</button>
    <button>forestgreen</button>
    <button>fuchsia</button>
    <button>gainsboro</button>
    <button>ghostwhite</button>
    <button>gold</button>
    <button>goldenrod</button>
    <button>gray</button>
    <button>green</button>
    <button>greenyellow</button>
    <button>honeydew</button>
    <button>hotpink</button>
    <button>indianred</button>
    <button>indigo</button>
    <button>ivory</button>
    <button>khaki</button>
    <button>lavender</button>
    <button>lavenderblush</button>
    <button>lawngreen</button>
    <button>lemonchiffon</button>
    <button>lightblue</button>
   ...

CSS

body{background-color: white;}

button{
    display:block;
		margin: 10px;
		padding: 5px 10px;
		background-color: whitesmoke;
		border: 1px solid lightgray;
}

button:focus{outline: none;}

#bottle{
    float:left;
    width:100%;
}

*{margin:0px;}

.active{
	background-color: #555;
	border-color: #555;
	color: white;
}

input{
	padding: 10px;
	margin:10px;
	margin-bottom: 0;
}

input:focus{outline: 2px solid dodgerblue;}

JavaScript

//CSS Color Tester Buttons

$('button').click(function(){
    $('#bottle').css('background-color', $(this).text());
		$('button').removeClass('active');
		$(this).addClass('active');
});

var buttons = document.getElementsByTagName('button');

$('input').keyup(function(){

	if($('input').val().length == 0){
		$('button').show();
	}
	
	$('button').show();
	
	for(i = 0; i < buttons.length; i++){
		if(buttons[i].innerText.indexOf($('input').val()) == -1){
			$('button').eq(i).hide();
		}
	}
	
});