TSA Randomizer

Randomize your security checks with a fiddle!

HTML

<div id="left-arrow" class="arrow">&#x2190</div>
<div id="right-arrow" class="arrow fade">&#x2192</div>

CSS

html {
	background: #00ccff;
	cursor: pointer;
}
.arrow {
	font-size: 500px;
	transition: opacity 500ms ease;
	position: absolute;
	width: 500px;
	height: 500px;
	margin-top: -300px;
	margin-left: -250px;
	top: 50%;
	left: 50%;
	color: white;
}

.fade {
	opacity: 0;
}

JavaScript

window.addEventListener("click", function() {

	var leftArrow = document.getElementById("left-arrow");
	var rightArrow = document.getElementById("right-arrow");

	leftArrow.classList.add("fade")
	rightArrow.classList.add("fade");

	setTimeout(function() {
		if (Math.random() > 0.5) {
			rightArrow.classList.remove("fade");
		} else {
			leftArrow.classList.remove("fade")
		}
	}, 500);
});