Build a JavaScript Memory Match Game - NO frameworks or libraries!!

You don’t need a JavaScript framework to build something fun! In this video, let’s create a Pokemon memory match game with vanilla HTML, CSS, and JavaScript. No frameworks or libraries!

*** Sponsor ***

*** Source code ****

*** Resources ***

STAY IN TOUCH 👋

QUESTIONS...?

[sayeghjoe]

I haven’t even watched the video yet, but I’ve already hit the like button. You’re awesome James 👏

[christopheanfry]

Very nice video I made the game for my daughter she loves it. Thanks very much for your content would love to see more vanilla JavaScript projects using rapidApi.

[universecode]

Nice project and nice Thumbnail, James ✌🏻

[MikeBifulco]

Really enjoyed this, James. It's a good reminder that good ol' standard JS is tons of fun!

[paulthomas]

Great tutorial. Thanks and all the best from UK.

[arnoeagleeyes]

Thanks for this. I learned a ton of new things like the rotating css stuff and also the map and spread stuff. btw, i did actually code along with the video..a ton of fun ;-)

[Tomapon]

Nice! It'd be cool to see the exact same, but in Svelte instead to get a good comparison between vanilla and Svelte.

[codearenaofficial]

This is just an amazing guide James!! 😍😍

[PureTranceSoul]

would be cool to release like.. a pseudocode so learners can take a stab or writing their own off some psuedocode and then watch the video to see if we did it or what we may be stuck on

[MrGarfield]

Hi, Nice Video, i watched a few of this Memory Game video's everyone is handling it an other way but this one is very neat and smooth coded.
A-special the await Promise.all section i never got this running right bc i don't understood the usage 😄

But now i got it 🙂

Thanks and it was very educative again

[TimeLords]

i need to learn js and html5 css3 because trying to learn how to make my own game afterwards with a framework

[charlesscholton]

It was driving me crazy with the missing H2 tag close.. until you did it. Lol

[michaellarocca]

Great content as always, James!

For more ideas 💡, I would like to learn projects that include sound effects & music!

( 🎶 including sources for sounds and music for game development 🎼 )

[minimalistEXTREM]

Hey thanks, this was fun indeed. You're explaining the JS very nicely.

1 thing I don't understand - maybe someone can explain:
Why would the CSS position-property on .card need to be relative? I cannot find a good reason in Docs/Specs as it acts as if static without

[britzolas]

I loved it and so did my child after playing the game!! How does one add a dropdown list with different sizes grid? For example 4x6 or 6x6

[robrever]

Why doesn't this boiler plate thing work?

[carlooos]

i wanted to use not pokemon but warhammer and cant find an api, f

[Jpark_Student]

Love the tutorial, however, around 19:51 I'm getting an error where const game = gives the error of ReferenceError: document is not defined.
From what I've tried to solve, document.getElementById is not possible due to using node.js. I tried to use the exact code you wrote on another project file without node, but I am getting the same error.

Furtheremore:
"The most common reason for this error is because you're using Node. That is to say, you are trying to access the document object on the server, but the server does not have access to the document object because it lives on the browser. Node is a server-side runtime so if you're on Node, you cannot reference the document object, which is an in-memory representation of the Document Object Model. That also includes when you're doing server-side rendered applications, which can sometimes have universal code that can run on both the server and the browser."

The above is basically the fundamental problem, but is there some way we can still work around this?

[david-holmes]

Boilerplate extension fails for me with "Cannot read properties of undefined (reading '0')".

[ashwinkumar]

You should make a site for Spongebob just like pokemon.