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
Price: $9.99
Unlimited Memory: How to Use Advanced Learning Strategies to Learn Faster, Remember More and be More Productive
(2982)
Price: $7.99
Memory: The Origins of Alien
(509)
Price:
Corsair Vengeance LPX 16GB (2x8GB) DDR4 DRAM 3200MHz C16 Desktop Memory Kit - Black
Hand-sorted memory chips ensure high performance with generous overclocking headroom. VENGEANCE LPX is optimized for wide compatibility with the latest Intel and AMD DDR4 motherboards. A low-profile height of just 34mm ensures that VENGEANCE LPX even... (as of September 26, 2020 - More infoProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Price:
![Tetris #1 – HTML5 Game Programming Tutorial [javascript]](https://img.youtube.com/vi/Z3wvP27eW98/0.jpg "Tetris #1 – HTML5 Game Programming Tutorial [javascript]")
Good tutorial!
Fantastic tutorial. It hit on so many different key skill sets to know.
it’s amazing, pretty work!!
Great tutorial! Thank you.
Great tutorial. Thanks!
You have explained really very well but the problem is that it is not working on my web browser.
My bad !!!
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.
very good work. A lot a good stuff. Thank you very much for that.
Thank you for this awesome video
Marina tu é Zika 🙂
In visual studio code you can get extensions like bioler html templates…. ‘” ! TAB” generates it instantly..
Congrats for this awesome tut’.
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.
Fantastic tutor. Thanks!
Love the tutorial, thank you!
ps.: I can recognize a brazilian accent from miles away 🙂
What font-family type are you using in your vs code font, is it an plugin?
Thank you so much Code Sketch for this and freeCodeCamp for sharing, learned so much.
Very good tutorial Marina ! Do you use a visual studio plugin to live reload ?
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!
thanks heres my version: https://codepen.io/theweeknd/pen/gjKVVg i spent more work on it 😀
Amazing, you are so cool and smart!!!!
*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.
Thks i like it
Doesn’t work in Safari 🙁
Great tutorial! Please make a tutorial on how to make a chatbot with voice in JS ASAP! I really need it!
Awesome tutorial!!! I learnt a lot from this – css positioning, dataset framework etc.
This code could have been simplified.
holy crap that was the best position: absolute / relative explanation I’ve seen
Thanks for this great Tutorial.
Great tutorial. Thank you!
all my cards are on top of each other?
superv tutorial….. many many thanks
Wish this was in Scrimba!
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/
great tutorial. does anyone know how to add a counter feature and a message at the end when all tiles are flipped?
You remind me of bmo from adventure time! Thanks for the tut.
How can I get this to work in Internet explorer??
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.