diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
index dce57e5..d55afde 100644
--- a/CONTRIBUTORS.md
+++ b/CONTRIBUTORS.md
@@ -32,6 +32,16 @@
+
+
+
+
+
+ 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%;