Team P’New

✨ SUPACHAI KHEAWJUY

<html>
<head>
	<title>Let's Start</title>
<style>
	body{
     background-color: #54111d;
  	}
	.card{
      width: 250px;
      height: 380px;
      margin: 1em;
/*      background-color: black; */
      background-image: url("https://cdn.discordapp.com/attachments/798210237013164052/806467590012141568/image0.png");
      background-size: 250px 380px;
      border-radius: 20px;
    }
    .grid{
      display: flex;
      flex-wrap: wrap;
      width: 1200px;
      height: 760px;
    }
</style>
</head>
<body>
	<div class="grid"></div>
</body>
<script>
    const card = [
      {
			name: "1",
        	img: 'url("https://cdn.discordapp.com/attachments/791173296900800554/806536257576370196/jabont.jpg")'
      },
      {
			name: "1",
        	img: 'url("https://media.discordapp.net/attachments/791173296900800554/806536267072405524/jabont2.jpg?width=936&height=936")'
      },
      {
			name: "2",
        	img: 'url("https://media.discordapp.net/attachments/791173296900800554/806536278991699988/Ppim.jpg?width=936&height=935")'
      },
      {
			name: "2",
        	img: 'url("https://cdn.discordapp.com/attachments/791173296900800554/806536282154336304/Ppim2.jpg")'
      },
      {
			name: "3",
        	img: 'url("https://media.discordapp.net/attachments/791173296900800554/806536265511993384/Pget.jpg")'
      },
      {
			name: "3",
        	img: 'url("https://cdn.discordapp.com/attachments/791173296900800554/806536270230454342/Pget2.jpg")'
      },
      {
			name: "4",
        	img: 'url("https://cdn.discordapp.com/attachments/791173296900800554/806536478048911370/image0.jpg")'
      },
      {
			name: "4",
        	img: 'url("https://media.discordapp.net/attachments/791173296900800554/806536271693479946/Pnew.jpg?width=936&height=936")'
      },
    ]
    
    card.sort(() => 0.5-Math.random())
    var choosed = [];
  	 var choosedid = [];
  	 var matched = [];
    const grid = document.querySelector(".grid");
  	 
    function createGrid(){
      for (let i = 0;i<card.length;i++) {
        var c = document.createElement("div");
        c.setAttribute("class", "card");
        c.setAttribute("data-id", i);
        c.onclick = flip;
        grid.appendChild(c);
      }
    }
    
    function match(){
      var cards = document.querySelectorAll(".card");
		var cardone = choosedid[0];
      var cardtwo = choosedid[1];
      if (choosed[0] === choosed[1]){
			cards[cardone].style.backgroundImage = "linear-gradient(to bottom, #54111d, #54111d)";
        	cards[cardtwo].style.backgroundImage = "linear-gradient(to bottom, #54111d, #54111d)";
        	matched.push(choosed);
      }
      else{
			cards[cardone].style.backgroundImage = 'url("https://cdn.discordapp.com/attachments/798210237013164052/806467590012141568/image0.png")';
        	cards[cardtwo].style.backgroundImage = 'url("https://cdn.discordapp.com/attachments/798210237013164052/806467590012141568/image0.png")';
      }
      choosed = [];
      choosedid = [];
      if (matched.length === 4){
			alert("Congratulation!");
        	window.location.reload();
        	matched = []
      }
    }
  
    function flip(){
    	var cardid = this.dataset.id;
      choosed.push(card[cardid].name);
      this.style.backgroundImage = card[cardid].img;
      choosedid.push(cardid);
      if (choosed.length === 2){
			setTimeout(match, 500);
      }
    }
    
    createGrid();
</script>
</html>