YUI3 Random Colors

Using YUI3 to change random boxes random colors. View a demo here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>YUI3 Random Colors</title>
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.1.1/build/cssfonts/fonts-min.css&amp;3.1.1/build/cssreset/reset-min.css" />
		<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-min.js"></script>
		<style type="text/css">
			html {
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript">
			/* <![CDATA[ */
			YUI().use('node','anim',function(Y){
				var count = 0;
				
				//add the color boxes to the page
				while (count < 16) {
					Y.one('body').prepend('<div id="div'+count+'" class="#000000">');
					count++;
				}
				
				//get the inner height and width of the viewport
				var winHeight = Y.DOM.winHeight();
				var winWidth = Y.DOM.winWidth();
				
				//add style to the color boxes
				Y.all('div').each(function(){
					this.setStyles({
						'width': winWidth/4,
						'height': winHeight/4,
						'float': 'left',
						'background-color':'#000000'
					});
				});
				
				//random color function
				function randColor() {
					var str = 'ABCDEF0123456789';
					var color = '#';
					var count = 0;
					while (count < 6) {
						color += str.charAt(Math.round(Math.random()*(str.length-1)));
						count++;
					}
					return color;
				};
				
				//function to continuously change random boxes random colors
				var init = function() {
					var number = Math.round(Math.random()*15);
					Y.log('div #'+number);
					var node = Y.one('#div'+number);
					var oldColor = node.getAttribute('class');
					var newColor = randColor();
					Y.log('oldColor = '+oldColor);
					Y.log('newColor = '+newColor);
					node.setAttribute('class',newColor);
					var oneAnim = new Y.Anim({
						node: node,
						from: {
							backgroundColor: oldColor						
						},
						to: {
							backgroundColor: newColor
						},
						duration: 1,
						easing: Y.Easing.easeIn
					});
					oneAnim.on('end',init);
					oneAnim.run();
				};
				
				//when the dom is ready call init
				Y.on('domready',init);
			});
			/* ]]> */
		</script>
	</body>
</html>
This entry was posted in Uncategorized. Bookmark the permalink.