Make MEMORY GAME in JavaScript, HTML and CSS for your portfolio


Memory Game, also known as the Concentration card game or Matching Game, is a simple card game where you need to match pairs by turning over 2 cards at a time.

In this walkthrough, I will be putting extra focus on setting Attributes in JavaScript. If you want to learn how to use setAttritube and getAttribute effectively, please do code along.

We are also going to be looking at:
* for loops
* addEventListener
* setAttribute
* getAttribute
* data-name
* document.querySelector
* createElement
* Sort
* math.random.

As always I have kept the styling at a bare minimum for you to go wild and make it your own.

I would love to see what you made so please tag me on twitter ( or Instagram ( or mention me on Youtube so I can find it and see 🙂

I would love to hear your thoughts on my video, so please do reach out to me on YouTube, Twitter ( or Instagram ( 🙂

Oh and please do Subscribe and hit that bell button! It would mean a lot to me and motivate me to make more videos for you all!



Xem thêm bài viết khác:


  1. Please what is the meaning of retro-grid? You said in the github repo that MG is a retro-grid based game. Thanks

  2. Thanks for the video! I just made my version of the game with my dog as a star, also changed some functionalities, like from flexbox to grid and adding a little bootstrap:

  3. Thanks a lot for this interesting Tutorial. Looking forward to learn from all the 7 games. Since you have mentioned about sharing ideas(if any). I have figured out something so far.

    There are two bugs that I have came across and solved 🙂 ! Would like to share.

    1. If a user clicks on the same card two times, "It is also considered as match and we left with chaos".
    2. If a user was clicking on the matched cards – the white png images to be very precise.

    Now the solutions:
    1. For the first bug, the 2nd time a card is clicked within our checkforMatch() function I am not only checking whether cardsChosen[0] === cardsChosen[1] but also checking, are the cardsChosenIds different or not, like this :
    if (

    cardsChosen[0] === cardsChosen[1] &&

    cardsChosenId[0] !== cardsChosenId[1]


    If our cardsChosenId[0] === cardsChosenId[1]
    , this means the user is clicking on the same card, two times. 🙂 . So with just one extra boolean check we have happily resolved this bug 🙂

    2. For the 2nd bug, I am disabling the click event for my matched cards by simply using CSS property : pointer-events :none; in mycheckforMatch() function by writing:

    cards[optionOneId].style.pointerEvents = "none";

    cards[optionTwoId].style.pointerEvents = "none";


    I have yet to implement the score part, which I am planing to do tomorrow.
    If I could find some more ideas I will definitely share:

    To check the updated code you guys can visit my github repo for this project .

  4. Hello Ania, I learnt a lot with your video! Just want to know if we can add a short audio for each card in the memory game? Like when we click on a card, it will play the audio? Thanks 🙂

  5. Several issues need to be addressed, most important one being:
    The if statement checking for similar cards will never be true, since the 'data-id' attributes of each element in the array is unique.

  6. Ma'am are you an A.l because you seems to be..
    Btw you teach very well.. Love from india..
    Ma'am please give me references for books.. Namaste🙏🙏

  7. Hi, I am your new subscriber.
    I want to know if I am making a game I want to check is there any built-in function for my project in js on any language , how to find that function, because we don't know exactly what is called that function in js in the documentation.
    If my question is not clear.sorry for that.


Please enter your comment!
Please enter your name here