Baudin999/index.html

## index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="board">

  </div>


  <script src="script.js"></script>
</body>
</html>

## script.js

var cards = [
  { name: 'A', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRykrF9oZfo1NiPXHkdt1VOTxZbnjBfHh9Pw1AA8Ah-tz4EfJqcSA" },
  { name: 'B', url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlASZkxXmba-WkMh_WhXISAmZ9SbCCaOHaL-qBdQek7j3WsOQd" },
  { name: 'C', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXCVSZ8kqefQdih-7EJuRenh4VxBg3eAH6Z_mISF2BZgJ_bYW29A" },
  { name: 'D', url: "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSsIZ2qJkkE1JAx6upOxXBm6MT0Zw6mtO4E67qtvecdZaAzoFdU" },
  { name: 'E', url: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTeeLpXvjU0mQsoRsmC8ZT5PddwJ7QyvG2-E9Igel_fG_Gi8Cyg" },
  { name: 'F', url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcEJDUrrtrd6G0NumX-H84BbbrTNXu0k7DkYYnezJMSBf3EBL_nw" },
  { name: 'G', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQzsJhWM1AJJH_XMTMuTfUAVVDB20IjiqRmMgKXqtySw_OTK_0qew" },
  { name: 'H', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTe8ZrvwEiYua5OS6eM5H-TqUNKJiE3grTQg8flwoo4GU-k7fF0LQ" }
];
var board = document.querySelector('.board');
var selectedCard;
var suspend = false;

(function init() {

  var _cards = shuffle(cards.concat(cards));

  _cards.forEach(function(card) {
    var div = document.createElement('div');
    div.className = 'card';
    div.cardName = card.name;
    var img = document.createElement('img');
    img.className = 'img';
    img.setAttribute('src', card.url);
    var cover = document.createElement('div');
    cover.className = 'cover';

    div.appendChild(img);
    div.appendChild(cover);
    board.appendChild(div);

    div.onclick = function() {
      if (suspend) return;

      div.classList.add('show');

      if (!selectedCard) {
        selectedCard = div;
      }
      else if(selectedCard.cardName === card.name) {
        delete selectedCard.onclick;
        delete div.onclick;
        selectedCard = null;
      }
      else {
        suspend = true;
        setTimeout(function() {
          selectedCard.classList.remove('show');
          div.classList.remove('show');
          selectedCard = null;
          suspend = false;
        }, 300);
      }
    }
  })
}());


function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

## styles.css
/* todo: add styles */

* {
  box-sizing: border-box;
}

.board {
  display: flex;
  flex-wrap:wrap;
  width: 400px;
}

.board .card {
  flex: 0 0 100px;
  height: 100px;
  border: 1px solid black;
  z-index: 0;

  position: relative;
}


.board .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.board .cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: orange;
}

.board .card.show .cover {
  opacity: 0;
}
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>

	<div class="board">

	</div>


	<script src="script.js"></script>
	</body>
	</html>

	var cards = [
	{ name: 'A', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRykrF9oZfo1NiPXHkdt1VOTxZbnjBfHh9Pw1AA8Ah-tz4EfJqcSA" },
	{ name: 'B', url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlASZkxXmba-WkMh_WhXISAmZ9SbCCaOHaL-qBdQek7j3WsOQd" },
	{ name: 'C', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXCVSZ8kqefQdih-7EJuRenh4VxBg3eAH6Z_mISF2BZgJ_bYW29A" },
	{ name: 'D', url: "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSsIZ2qJkkE1JAx6upOxXBm6MT0Zw6mtO4E67qtvecdZaAzoFdU" },
	{ name: 'E', url: "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTeeLpXvjU0mQsoRsmC8ZT5PddwJ7QyvG2-E9Igel_fG_Gi8Cyg" },
	{ name: 'F', url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRcEJDUrrtrd6G0NumX-H84BbbrTNXu0k7DkYYnezJMSBf3EBL_nw" },
	{ name: 'G', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQzsJhWM1AJJH_XMTMuTfUAVVDB20IjiqRmMgKXqtySw_OTK_0qew" },
	{ name: 'H', url: "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTe8ZrvwEiYua5OS6eM5H-TqUNKJiE3grTQg8flwoo4GU-k7fF0LQ" }
	];
	var board = document.querySelector('.board');
	var selectedCard;
	var suspend = false;

	(function init() {

	var _cards = shuffle(cards.concat(cards));

	_cards.forEach(function(card) {
	var div = document.createElement('div');
	div.className = 'card';
	div.cardName = card.name;
	var img = document.createElement('img');
	img.className = 'img';
	img.setAttribute('src', card.url);
	var cover = document.createElement('div');
	cover.className = 'cover';

	div.appendChild(img);
	div.appendChild(cover);
	board.appendChild(div);

	div.onclick = function() {
	if (suspend) return;

	div.classList.add('show');

	if (!selectedCard) {
	selectedCard = div;
	}
	else if(selectedCard.cardName === card.name) {
	delete selectedCard.onclick;
	delete div.onclick;
	selectedCard = null;
	}
	else {
	suspend = true;
	setTimeout(function() {
	selectedCard.classList.remove('show');
	div.classList.remove('show');
	selectedCard = null;
	suspend = false;
	}, 300);
	}
	}
	})
	}());



	function shuffle(array) {
	var currentIndex = array.length, temporaryValue, randomIndex;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {

	// Pick a remaining element...
	randomIndex = Math.floor(Math.random() * currentIndex);
	currentIndex -= 1;

	// And swap it with the current element.
	temporaryValue = array[currentIndex];
	array[currentIndex] = array[randomIndex];
	array[randomIndex] = temporaryValue;
	}

	return array;
	}
	/* todo: add styles */

	* {
	box-sizing: border-box;
	}

	.board {
	display: flex;
	flex-wrap:wrap;
	width: 400px;
	}

	.board .card {
	flex: 0 0 100px;
	height: 100px;
	border: 1px solid black;
	z-index: 0;

	position: relative;
	}


	.board .img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}


	.board .cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: orange;
	}

	.board .card.show .cover {
	opacity: 0;
	}