Skip to content

Instantly share code, notes, and snippets.

@LottieVixen

LottieVixen/random.html

Created March 27, 2016 15:53
Show Gist options
  • Save LottieVixen/ef3dc46e07fb4b9bb49b to your computer and use it in GitHub Desktop.
Save LottieVixen/ef3dc46e07fb4b9bb49b to your computer and use it in GitHub Desktop.
Download ZIP
WIP
Raw
random.html
<html lang="en">
<input type="text"></input>
<input type="button" value="Render!" onclick="render();"></input><br>
<pre id="output">
</pre>
<script>
var input = document.querySelector('input');
var output = document.querySelector('#output');
var line1 = line2 = line3 = line4 = line5 = "";
function addLetter(letter){
if (letter === "a") {
line1 += " ";
line2 += " ";
line3 += " ####";
line4 += "# ##";
line5 += " ## #";
} else if (letter === "A") {
line1 += "#####";
line2 += "# #";
line3 += "#####";
line4 += "# #";
line5 += "# #";
} else if (letter === "G") {
line1 += "#####";
line3 += "# ###";
line2 += "# ";
line4 += "# #";
line5 += "#####";
} else if (letter === "o") {
line1 += " ";
line2 += " ";
line3 += "#####";
line4 += "# #";
line5 += "#####";
} else if (letter === "d") {
line1 += " #";
line2 += " #";
line3 += "#####";
line4 += "# #";
line5 += "#####";
} else if (letter ===" ") {
line1 += "";
line2 += "";
line3 += "";
line4 += "";
line5 += "";
addSpace();
addSpace();
addSpace();
addSpace();
addSpace();
line1 += "";
line2 += "";
line3 += "";
line4 += "";
line5 += "";
} else {
line1 += "NUL!#";
line2 += "NUL!#";
line3 += "NUL!#";
line4 += "NUL!#";
line5 += "NUL!#";
}
}
function addSpace(l){
if (l === 1) {
line1 += " ";
} else if (l === 2) {
line2 += " ";
} else if (l === 3) {
line3 += " ";
} else if (l == 4) {
line4 += " ";
} else if (l === 5) {
line5 += " ";
} else {
line1 += " ";
line2 += " ";
line3 += " ";
line4 += " ";
line5 += " ";
}
}
function terminateLines(){
line1 += "<br>";
line2 += "<br>";
line3 += "<br>";
line4 += "<br>";
line5 += "<br>";
}
function outputLines(){
output.innerHTML = line1 + line2 + line3 + line4 + line5;
}
function whiten() {
// for (var i = 0; i < document.getElementsByClassName('dots').length; i++) {
// document.getElementsByClassName('dots')[i].style.color = 'white';
// }
//line1 =line1.replace('.','<span style=\"color: white;\" class=\"dots\">.</span>','g');
//line2 =line2.replace('.','<span style=\"color: white;\" class=\"dots\">.</span>','g');
//line3 =line3.replace('.','<span style=\"color: white;\" class=\"dots\">.</span>','g');
//line4 =line4.replace('.','<span style=\"color: white;\" class=\"dots\">.</span>','g');
//line5 =line5.replace('.','<span style=\"color: white;\" class=\"dots\">.</span>','g');
}
function render(){
line1 = line2 = line3 = line4 = line5 = "";
text = input.value;
for (var i = 0; i < text.length; i++) {
addLetter(text[i]);
if (i !== (text.length-1)) {
addSpace();
} else {
terminateLines();
}
}
whiten();
outputLines();
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment