Fun but Fake JavaScript translator
Yesterday I posted a #tbt post about using JavaScript to dynamically change images. It was no real “business” purpose behind the post more just something fun and different and a break from the norm. Last night I remembered something I had done back in High School with Turbo Pascal and I thought it might be fun to try and reproduce it.
It turned out I could, so decided to share it today.
Simple enough code and just means you need to replace the “images” with whichever version of letters you like. Perhaps Elven, Klingon, Skyrim, or another?
It’s not exactly science or even accurate but it is fun to play with, I even tried a Web Socket based chat version that translated everything typed to the different images.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Runes</title>
<style>
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 10px;
background-color: #BBB;
color: #444;
}
.box {
background-color: #ffffff;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box a">
<form>
<textarea id="inputtext" name="inputtext" cols="80" rows="5"></textarea>
<br>
</form>
</div>
<div class="box b" style="background-image: url('/codejam/tbt/runes/img/back.jpg'); height: 500px">
<div id="outputtext" name="outputtext"></div>
</div>
</div>
<script>
var area = document.getElementById('inputtext');
if (area.addEventListener) {
area.addEventListener('input', function() {
updateRunes(document.getElementById('inputtext').value);
}, false);
} else if (area.attachEvent) {
area.attachEvent('onpropertychange', function() {
updateRunes(document.getElementById('inputtext').value);
});
}
function updateRunes(text){
var lv_output = "";
var lv_text = (""+text.toLowerCase()).split("");
for (var i = 0; i < lv_text.length; i++) {
switch(lv_text[i]){
case "\n":
lv_output += "<img src='/codejam/tbt/runes/img/dots.png'>";
break;
case ".":
lv_output += "<img src='/codejam/tbt/runes/img/dot.png'>";
break;
case " ":
lv_output += "<img src='/codejam/tbt/runes/img/dot.png'>";
break;
case "i":
if( lv_text[i] === 'i' && lv_text[i+1] === 'n' && lv_text[i+2] === 'g' ){
lv_output += "<img src='/codejam/tbt/runes/img/ng.png'>";
i = i + 3;
}else if( lv_text[i] === 'i' && lv_text[i+1] === 'a' ){
lv_output += "<img src='/codejam/tbt/runes/img/ia.png'>";
i = i + 2;
}else{
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
}
break;
case "e":
if( lv_text[i] === 'e' && lv_text[i+1] === 'a' ){
lv_output += "<img src='/codejam/tbt/runes/img/ea.png'>";
i = i + 2;
}else if( lv_text[i] === 'e' && lv_text[i+1] === 'o' ){
lv_output += "<img src='/codejam/tbt/runes/img/eo.png'>";
i = i + 2;
}else{
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
}
break;
case "n":
if( lv_text[i] === 'n' && lv_text[i+1] === 'g' ){
lv_output += "<img src='/codejam/tbt/runes/img/ng.png'>";
i = i + 2;
}else{
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
}
break;
case "o":
if( lv_text[i] === 'o' && lv_text[i+1] === 'e' ){
lv_output += "<img src='/codejam/tbt/runes/img/oe.png'>";
i = i + 2;
}else{
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
}
break;
case "a":
if( lv_text[i] === 'a' && lv_text[i+1] === 'e' ){
lv_output += "<img src='/codejam/tbt/runes/img/ae.png'>";
i = i + 2;
}else{
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
}
break;
case "t":
if( lv_text[i] === 't' && lv_text[i+1] === 'h' ){
lv_output += "<img src='/codejam/tbt/runes/img/th.png'>";
i = i + 2;
}else{
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
}
break;
default:
lv_output += "<img src='/codejam/tbt/runes/img/" + lv_text[i] + ".png'>";
break;
}
}
document.getElementById('outputtext').innerHTML = lv_output;
}
</script>
</body>
</html>If I put more time in I might be able to clean up the code a lot more or even make the output more smooth but hey it was a fun evening code session.