Skip to content

Instantly share code, notes, and snippets.

@albertodelax

albertodelax/index.html

Created March 9, 2016 13:54
Show Gist options
  • Save albertodelax/e20e3c3421161a9d2555 to your computer and use it in GitHub Desktop.
Save albertodelax/e20e3c3421161a9d2555 to your computer and use it in GitHub Desktop.
Download ZIP
Letter Storm
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment