Memory Card Game – JavaScript Tutorial

Learn the fundamentals of pure javascript by building a memory card game. No frameworks or libraries, just vanilla JavaScript.

This video will cover how to:
‣ select elements in the DOM with querySelector
‣ iterate through lists with forEach
‣ add/remove an element class
‣ add/remove event listeners
‣ timeout
‣ html5: data-attribute
‣ css3: positioning, flexbox, perspective, backface-visibility, transitions

🔗Demo: https://marina-ferreira.github.io/memory-game/
💻Repo: https://github.com/code-sketch/memory-game/
💻Finished files: https://marina-ferreira.github.io/projects/js/memory-game/

⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (00:47) Basic Structure / Create the Project
⌨️ (03:53) Board HTML
⌨️ (07:13) Board Styles
⌨️ (12:41) Flip Card
⌨️ (15:53) 3d Effect / CSS3 Perspective
⌨️ (18:25) Store Cards
⌨️ (22:37) Match Cards
⌨️ (25:12) Refactoring
⌨️ (27:27) Lock Board
⌨️ (28:53) Card Double Click
⌨️ (31:04) Shuffling

🎥Tutorial by Code Sketch. Check out the Code Sketch channel for more great tutorials: https://www.youtube.com/channel/UCHFmShpjG-8N52O0JD2ut3A/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Comments

Noah G says:

Good tutorial!

kamaboko1 says:

Fantastic tutorial. It hit on so many different key skill sets to know.

Carlos Uehara says:

it’s amazing, pretty work!!

Hai Nguyen Phuc says:

Great tutorial! Thank you.

Walter Mitty says:

Great tutorial. Thanks!

Mirror View says:

You have explained really very well but the problem is that it is not working on my web browser.
My bad !!!

You never know. says:

1) Right click – Inspect Element? Game over. 2) Should be made pure dynamic, i.e. values dynamically added to cards, without hard-coded values. 3) Auto-reset after all matches or reset button present. 4) The firstCard shouldn’t turn if you wait more than 1500 ms. etc.

Ralf Spinoza says:

very good work. A lot a good stuff. Thank you very much for that.

Abhishek Kumar says:

Thank you for this awesome video

Josué Rodrigues says:

Marina tu é Zika :)

bjaeken says:

In visual studio code you can get extensions like bioler html templates…. ‘” ! TAB” generates it instantly..

Rainyer Santiago says:

Congrats for this awesome tut’.

george sohulov says:

Hey there, first of all great tutorial!
Could you, please help me out adding an audio button that plays some instructions for example when clicked? Also how can be an audio added on each pair match and on each fail? And one final thing – how could you add a button that starts the game, before it’s pressed the cards stay revealed to the player?
Thanks in advance.

Vaso Beruashvili says:

Fantastic tutor. Thanks!

Eduardo Carvalho says:

Love the tutorial, thank you!
ps.: I can recognize a brazilian accent from miles away :)

Mal Dev says:

What font-family type are you using in your vs code font, is it an plugin?

Faissal Absml says:

Thank you so much Code Sketch for this and freeCodeCamp for sharing, learned so much.

Erwan Poupard says:

Very good tutorial Marina ! Do you use a visual studio plugin to live reload ?

David says:

I love this tutorial a lot. I feel like an idiot because I didn’t knew half of what I saw here but I liked it a lot. I insta-subscribed to Code Sketch. Waiting for more videos!

Othman Alamody says:

thanks heres my version: https://codepen.io/theweeknd/pen/gjKVVg i spent more work on it 😀

expiring pixels says:

Amazing, you are so cool and smart!!!!

vamsi krishna reddy bevara says:

*ERROR* in the code

firstly….this was a awesome tutorial by the instructor..thank you so much for that….
but there is error

i have tried the code by myself and giving the suggestion that there is a error….
in the double click logic

when we click the first time then “this”= the item we clicked and firstcard is not assigned …so returns..

but..when we click the second time we dont enter the if block again because hasflippedcard = true …so even when we double click on same cards the cards are matched….so adding ` if(this === firstcard){ return;} ` in the if block is wrong…. we should add it in the else block…that will work…

Try it… both the codes (said by the instructor and mine) and decide yourself.

herbert kavuma says:

Thks i like it

Philippe Rigovanov says:

Doesn’t work in Safari :(

powerful duas and wazifas says:

Great tutorial! Please make a tutorial on how to make a chatbot with voice in JS ASAP! I really need it!

prateek goyal says:

Awesome tutorial!!! I learnt a lot from this – css positioning, dataset framework etc.

Ares Xena says:

This code could have been simplified.

Solar Flare says:

holy crap that was the best position: absolute / relative explanation I’ve seen

Muhammet ESER says:

Thanks for this great Tutorial.

Margo Rosh says:

Great tutorial. Thank you!

Habib Ullah says:

all my cards are on top of each other?

Emad Uddin says:

superv tutorial….. many many thanks

Therover19 says:

Wish this was in Scrimba!

ramona Saintandre says:

I just want to say thank you so much for this tutorial
I am part of the Udacity Grow with Google Scholarship program and one of our projects is to build a memory game.
I had the hardest time grasping the JS part of it.
your tutorial helped so much and I passed my project with flying colors
Here is my version of your memory game
Enjoy
https://thenewmona.github.io/davidsmemorygame/

three eggsaday says:

great tutorial. does anyone know how to add a counter feature and a message at the end when all tiles are flipped?

Kris Briscoe says:

You remind me of bmo from adventure time! Thanks for the tut.

Prabhnoor Kaur says:

How can I get this to work in Internet explorer??

VeeWalk says:

I’ve been putting off this same project off for about a year and this is awesome! Thanks for the very thorough explanation on all of the concepts.

Write a comment

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours