Memory Card Game – JavaScript Tutorial
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:
💻Repo:
💻Finished files:
⭐️ 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:
—
Learn to code for free and get a developer job:
Read hundreds of articles on programming:
And subscribe for new videos on technology every day:
Great tutorial! It gave me a hype to develope a badass memory card game.
the most awesome simple explanation of the position absolute and relative…ur so sweet
Really good tutorial. great explanation of position. made it so clear.
it works for me in mozilla but in opera, chrome and safari I don't see the backface when the card flips. Does anybody know why?
This was a really great tutorial! Super clear and pedagogical. Thank you so much.
Excellent tutorial!
Thank you.
Greate video with basic things about css, html and javascript. Thanks a lot
this is the best explanation for position: absolute and relative. thanks!
is a great tutorial, i try playing the code in chrome for ipad, and don't work, maybe is the "click" feature of the each card
I rarely ever like any youtube video.. surely less than 1 in 10000 videos watched (I'm just wondering if we could look our view-like ratio up). This video is packed with SO MUCH easily understandbale new, and especially USABLE (to me) information, I just had to like it.
And that's coming from someone who has been 'in touch' with HTML for no less than 20 years. Lately I often have to work on ancient web frontends (IE 7 and ActiveX Controls/COM Objects anyone?) and the information I can take from this video will make my life a whole lot easier.
What's the preview extension you're using?
You do a great job of making this easy to understand. Thanks!
You have taught me more about CSS in 10 minutes than my professor in a whole semester.
How to show alert of "you win" after the game finished?
Awesome. Thank you. 🙂
Gamecrook is the I think only authentic website for free coins and gems for free.
How to add "play again" for user to play from beginning?
Brilliant expose!
One of the strengths of this presentation is seeing Flexbox, CSS calc, box-sizing, transform and transition explained in a practical and non-verbose way.
I just love how she explains step by step what she's doing and why. More tutorials like this PLEASE!
How to are you man ?
I wish there was a "Love" button. This is the most concise and clear javascript tutorial I have seen. The animations were extremely helpful.
I was making this game without watching any tutorial and i was stuck at storing the cards in variables, thanks for the solution 👍
Hello. I think that the left side of the screen is a code editor like Visual Studio Code, but what program is on the right side of the screen? How do you get that display?
Thank you very much for that! Keep up the good work!
Mindblown, guess I need to study basics.
I didn't expect to be responding to her questions like im talking to Dora the explorer 🤣🤣🤣 good tuto tho
hi nice work please help me can you change this code into simple matching game for kids like A for Apple B For Ball without flipping animation 😀🙄🙄🙄
i copied it 1:1 but i cant flip the cards over
Hi, thank you for tutorial. How did you make responsive? Did you use @media, beacuse i cant make responsive like you did.
A newbie question for anyone willing to answer. At 14:21in the line 8th it says card => card.eventListener. Should it be cards => cards.eventListener. It works both ways. but it still confusing to me why we cab use card instead of cards?
Hi this is great but i have a question about the calculating the width of the memory card. she says you need to take the margin into consideration so why does she then take away 10px when the margin is set to 5px? thanks if anyone can help me on this I would greatly appreciate it!
More tutorials from this woman! Where is her YouTube channel!?!?!?!
Thanks for the video, I'm pretty noob in coding but I could learn a good amount, and this help with my studies, really thank you very much.
My brain is burningg. Such a good project and tutorial. Extremly hard tutorial and ı like it
Thanks for your help . I am french but you speak slowly and I understood a lot thanks to you
Fun little tutorial, learnt a lot. Absolute position example was gold, and also really liked the explanation of restructuring. Thank you!
We need a channel from you especially for the css.
With inspect element I can see back-face card, anyone know how to fix it?
how to flip all the card @@ ?? please help !
really good video.. and thanks for the code as well!!!
Aí representa o Brasil.
Very cool and very nice tutorial! Thank you, very much!
why do we set the value of HasFlippedCard to false?
Just a little tip for those who are not getting the card flipping animation properly, chnage the memory card active attribute to hover, that should do it
absolutely great!
Beautiful!!! Great tutorial. Thanks
Need more tutorial from her!
thats a lot, but i have problems view this on my iphone or ipad with safari ( javascript enabled) can anyone help?
The best explanation about memory game in js! Great job!
Hola no tendrás este tutorial en español =( , saludos