DEV Community

Cover image for Build a Memory Game in vanilla JavaScript
Ania Kubow
Ania Kubow

Posted on


Build a Memory Game in vanilla JavaScript

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 on @ania_kubow or mention me on Youtube so I can find it and see :)

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!