albertodelax/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Letter Storm</title>
	<style type="text/css">
	div{
		display: inline-block;
		height: 13px;
		padding: 3px 0 3px 0;
		width: 95px;
		font-family: sans-serif;
		color: white;
		background-color: gray;
		font-size: 10px;
		text-align: center;
		cursor: pointer;
	}
	input{
		display: inline-block;
		width: 150px;
	}
	</style>
</head>
<body>
	<input type="text" placeholder="Enter a letter" id='textform'></input>
	<div onclick="activateStorm()">Submit</div>
<script type="text/javascript">
var activateStorm = function(){

	var fontsArray=["Arial", "Helvetica", "Comic Sans MS", "Gadget", "cursive", "fantasy", "Impact", "Lucida Sans Unicode", "Georgia", "Palatino Linotype", "Book Antiqua", "Times New Roman", "Times", "Courier New", "Lucida Console"];
	var fontType = ["uppercase", "lowercase"];
	var textForm = document.getElementById('textform');
	var pTags = document.getElementsByTagName('p');
	var body = document.getElementsByTagName('body')[0];
	if(textForm.value.length > 1){
		textForm.value="";
		textForm.placeholder = "Please enter only 1 character";
	} else if (pTags.length > 1) {

		for (var i=pTags.length-1; i>=0; i--){
			var p = pTags[i];
			p.style.fontFamily=fontsArray[randomFont];
			p.style.textTransform=textForm.value;
			p.innerHTML = textForm.value;
		}

	} else{
		for (i=0; i<=25000; i++){
			var randomFont = Math.round(Math.random()*fontsArray.length);
			var letter = document.createElement('p');
			letter.style.fontFamily=fontsArray[randomFont];
			letter.style.top= Math.random()*100 + '%';
			letter.style.left= Math.random()*100 + '%';
			letter.style.position="absolute";
			letter.style.textTransform=fontType[Math.round(Math.random())];
			letter.innerHTML=textForm.value;
			document.getElementsByTagName('body')[0].appendChild(letter);
		}
	}
};
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Letter Storm</title>
	<style type="text/css">
	div{
	display: inline-block;
	height: 13px;
	padding: 3px 0 3px 0;
	width: 95px;
	font-family: sans-serif;
	color: white;
	background-color: gray;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	}
	input{
	display: inline-block;
	width: 150px;
	}
	</style>
	</head>
	<body>
	<input type="text" placeholder="Enter a letter" id='textform'></input>
	<div onclick="activateStorm()">Submit</div>
	<script type="text/javascript">
	var activateStorm = function(){

	var fontsArray=["Arial", "Helvetica", "Comic Sans MS", "Gadget", "cursive", "fantasy", "Impact", "Lucida Sans Unicode", "Georgia", "Palatino Linotype", "Book Antiqua", "Times New Roman", "Times", "Courier New", "Lucida Console"];
	var fontType = ["uppercase", "lowercase"];
	var textForm = document.getElementById('textform');
	var pTags = document.getElementsByTagName('p');
	var body = document.getElementsByTagName('body')[0];
	if(textForm.value.length > 1){
	textForm.value="";
	textForm.placeholder = "Please enter only 1 character";
	} else if (pTags.length > 1) {

	for (var i=pTags.length-1; i>=0; i--){
	var p = pTags[i];
	p.style.fontFamily=fontsArray[randomFont];
	p.style.textTransform=textForm.value;
	p.innerHTML = textForm.value;
	}

	} else{
	for (i=0; i<=25000; i++){
	var randomFont = Math.round(Math.random()*fontsArray.length);
	var letter = document.createElement('p');
	letter.style.fontFamily=fontsArray[randomFont];
	letter.style.top= Math.random()*100 + '%';
	letter.style.left= Math.random()*100 + '%';
	letter.style.position="absolute";
	letter.style.textTransform=fontType[Math.round(Math.random())];
	letter.innerHTML=textForm.value;
	document.getElementsByTagName('body')[0].appendChild(letter);
	}
	}
	};
	</script>
	</body>
	</html>