<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
	<head>
		<title>LANTERN DEMO</title>
		<style>
			body	{
				background-color : #190f00;
			}
		</style>
	</head>
	<body>
		<input 	id			= "wordBox"
				class		= "wordInput"
				type		= "text"
				maxlength	= "5"
				value		= "LOVE"
				onkeypress	= "return (event.charCode > 64 && event.charCode < 91)"
		>
	</body>
	<script>

	</script>
</html>
@keyframes fadein {
	0% {
		opacity : 0.0;
	}
	100% {
		opacity : 1.0;
	}
}
@keyframes fadeout {
	0% {
		opacity : 1.0;
	}
	50% {
		opacity : 0.0;
	}
	100% {
		opacity : 0.0;
	}
}
.wordInput, .fakeInput{
	position : absolute;
	bottom : 25px;
	left : 25px;
}
.wordInput {
	height : 30px;
	width : 100px;
	color : #a88600;
	font-size : 25px;
	font-family : Arial;
	text-align : center;
	border : 3px;
	border-radius : 15px;
	border-style : solid;
	background-color : #fff9e5;
	border-color : #fff9e5;
	animation : fadein 1s ease-in;
}
.wordInput:hover,  .wordInput:focus{
	border-color : #a88600;
}
.fakeInput {
	height : 30px;
	width : 100px;
	color : #a88600;
	font-size : 25px;
	font-family : Arial;
	text-align : center;
	border : 3px;
	border-radius : 15px;
	border-style : solid;
	background-color : #fff9e5;
	border-color : #fff9e5;
	animation : fadeout 2s ease-out;
}
var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));

var wordBox = document.getElementById("wordBox");
var word = "";

wordBox.addEventListener("focusout", wordBoxFocusOut);

function wordBoxFocusOut()
{
	word = wordBox.value;
	var fakeBox = document.createElement("DIV");
	fakeBox.setAttribute('class', 'fakeInput');
	fakeBox.textContent = word;
	wordBox.style.display = "none";
	brd.appendChild(fakeBox);
	setTimeout(function(){
		fakeBox.parentNode.removeChild(fakeBox);
	}, 2000);
	arrangeLanterns(word);
	wordBox.addEventListener("focusout", wordBoxFocusOut);
}

window.onkeydown = function(e)
{
	key = e.keyCode;
	if(key == 13)
	{
		wordBox.blur();
	}
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.