diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index dce57e5..d55afde 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -32,6 +32,16 @@ + + + Nitin Kumar Gupta +
+ + Harsh Narayan + +
+
+ diff --git a/index.js b/index.js index da6ae3b..4aea160 100644 --- a/index.js +++ b/index.js @@ -87,6 +87,8 @@ function restartGame(){ { flippedCards.forEach(flippedCard=>{ flippedCard.children[0].src="#"; // Removing image src so that it isn't visible through HTML + // Removing class so that it can be flipped again + flippedCard.classList.remove('flip'); flippedCard.children[0].alt="card front face"; // Removing image alt so that it isn't visible through HTML flippedCard.children[1].style.display="block"; }) @@ -107,7 +109,9 @@ function restartGame(){ card.children[0].src=cardImageSrcs[i]; // Setting image source for flipped front face card.children[0].alt=cardImageSrcs[i].split('/').slice(-1)[0].split('.').slice(0, -1).join('.'); // Setting image file name as alt text for flipped front face card.children[1].style.display="none"; - + console.log(card); + // Adding flip class to card to flip it + card.classList.add('flip'); //when we have filled two cards check for the match if(flippedCards.length === 2) { diff --git a/style.css b/style.css index e6bb7c1..7eac9ae 100644 --- a/style.css +++ b/style.css @@ -74,6 +74,11 @@ header{ background-color: white; } +.memory-card.flip { + transform: rotateY( 180deg ) ; + transition: transform 0.5s; +} + .memory-card>img{ position: absolute; top:50%;