First of think of creating the grid dynamically using JavaScript. You might want to save all of the classes in an array and then iterate over that array to create cards grid
Then define what happens when someone clicks on a card.?* Maybe save matched cards in an array and opened cards also in array
Define what happens when number of opened cards = 2
What happens when matched cards = 16 ( show a modal )
Along with that you need to display a timer which starts when the game starts and count the number of moves according to which you need to display stars as well.

[x] Shuffle cards (was given)
[x] Cards Deck Grid (Array, 4x4)
[x] 1st/2nd Guess: 'click', flip, CSS (flip animation)
[x] How many cards clicked? (count === 2, Max 2)
[x] Match? (Yes. Matched, Cards stay)
[x] Match? (No. Cards Face down),
[x] How many cards matched?
[x] Matched card === 16, show modal (inside popup): Text, # of moves, Score(stars), Play again BTN
[x] Timer (mm:ss)
[x] Move counter
[x] Score (Stars)
[x] Restart (Reset)
[x] Recheck the score script
[ ] CSS Animation research
[x] Find right fonts: Montserrat 100, 400, 900
[ ] Using Git & Github
[ ] Make the project live in Github

markup

    <button id="myBtn">Open Modal</button>

javascript

// Get the modal
var btn = document.getElementById("myBtn");
btn.onclick = function() {
    gameResult.style.display = "block";
}

in progress

results matching ""