JSFiddle - React, Tailwind, and code Playground

by mboguslaw97

HTML

<!DOCTYPE html>
<html>
<head>
<style>
h1{
	text-align: center;
}
#board{
	width: 656px;
	height: 512px;
	border-radius: 16px;
	background-color: aqua;
	margin: auto;
}
#board > div{
	width: 80px;
	height: 96px;
	background: teal;
	border: 2px solid blue;
	border-radius: 8px;
	margin-left: 24px;
	margin-top: 24px;
	float: left;
	cursor: pointer;
	text-align: center;
	font-size: 75px;
}
</style>
<script>
var game_over = false;
var cards_flipped = [];
var letters = 'ABCDEFGHIJKL'.repeat(2).split('');
var board;
function new_game(){
	letters = shuffle(letters);
	board = '';
	for(var i= 0; i < 24; i++){
		board += '<div id="card_'+i+'" onclick="choose_card(this, '+i+')"></div>';
	}
	document.getElementById('board').innerHTML = board;
}
function shuffle(a){
	var s = [];
	for(var i = a.length; i > 0; i--){
		var rnd = Math.floor(Math.random() * i)
		s.push(a.splice(i-1, 1));
	}
	return s;
}
function choose_card(card, i){
	if(cards_flipped.indexOf(i) == -1 && !game_over){
		if(cards_flipped.length == 2){
		letter1 = letters[cards_flipped[0]];
		letter2 = letters[cards_flipped[1]];
		alert(letter1 == 'L');
		alert(letter2 == 'L');
		alert(letter1 == letter2)
		//Displays true, true, false
			if(letters[cards_flipped[0]] == letters[cards_flipped[1]]){
				alert('Match!');
			}
			else{
				flip(document.getElementById('card_'+cards_flipped[0]), 'teal', "");
				flip(document.getElementById('card_'+cards_flipped[1]), 'teal', "");
			}
			cards_flipped = [];
		}
		flip(card, 'tan', letters[i]);
		cards_flipped.push(i);
	}
}
function flip(card, color, text){
	card.style.background = color;
	card.innerHTML = text;
}
</script>
</head>
<body>
<h1>Matching!</h1>
<div id='board'></div>
<script>new_game()</script>
</body>
</html>