JavaScript Tutorial - Create a Card Game 🃏

Improve your JavaScript skills by creating a basic card game with HTML and CSS. ♣️♥️♠️♦️

This tutorial not only covers creating a basic card game using JavaScript
but also:
- how to create dynamic user interactive code using vanilla JavaScript
- Creating some animation effects
- Responsive layout design using CSS grid, CSS FlexBox and media queries
- How to dynamically change the positions of grid cells, so as to randomize the positions of the cards contained in a css grid using JavaScript,
- localStorage functionality
- And much More…

⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:05:26) Getting Started
⌨️ (0:07:00) Live Server Extension
⌨️ (0:09:50) Create Cards - HTML
⌨️ (0:14:44) Create the Game Play Grid
⌨️ (0:19:55) Create Cards Dynamically - JS Code
⌨️ (0:28:46) Initialise Card Positions
⌨️ (0:34:39) Load Game and Start Game
⌨️ (0:38:43) Stack Cards
⌨️ (0:41:53) Flip Cards
⌨️ (0:45:14) Shuffle Cards
⌨️ (0:49:28) Deal Cards
⌨️ (0:54:37) Choose Card
⌨️ (1:16:56) Styling and Layout
⌨️ (1:24:28) Animation
⌨️ (1:32:39) Responsive Layout
⌨️ (1:36:43) Local Storage

🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan

--

[GavinLon]

I created this video primarily to help those interested in web development with their familiarity with JavaScript and associated web development technologies (HTML and CSS). In this video we go through the step by step creation of a basic card game that runs in the users browser which hopefully provides a great context for practicing our JavaScript skills. I hope you enjoy this video and benefit from it. A special thank you to FreeCodeCamp for sharing this video!

[quincylarsonmusic]

Gavin says he has "many" years of experience but he is very modest. He has nearly two decades of software engineering experience at companies in London. We are proud to have Gavin on the freeCodeCamp team, and excited to publish more of his fun, in-depth courses in the near future. Be sure to subscribe to his channel.

[a_____________________________]

Incredibly confusing for a learner. I'd only recommend this for intermediate coders curious on how someone else solves a problem, I know I'm autistic & maybe dyslexic but the step-by-step explanation is just "Now we'll write the method and it'll have the method like 53:01 - I'll try to understand the GItHub code instead of copying from someone copying. I'm so sorry, I'm not trying to be negative, I'm trying to type this in the most neutral way possible! I love you so much & notice how much care you put into this!

[mglsj]

53:18 return should be outside forEach loop.

[romievthedon]

I finished coding a blackjack game from scratch in javascript last week without any guidance, and I have a feeling when I finish watching this I'm gonna feel less satisfied with my effort😂

[Dreamprime]

Your coding style clearly reflects that you are a C# developer on origin Sir 🙂

[dominiquefortin]

The code "if (shuffleCount == 500) { clearInterval(id) } else { shuffleCount++ }" is a bad practice. When checking a value that changes in a range, you should always use an inequality like "if (shuffleCount < 500 ) { shuffleCount++ } else { clearInterval(id) }". This way when a bug occurs that changes the value being checked outside of the range, you don't get an infinite loop.

[tharinda]

Playing card games is my favourite hobby and JavaScript is one of my favourite languages!

Thanks so much for this tutorial ❤❤❤

[ambole]

Thank you so Mucch this was so very enlightening, enjoyed every Minute

[tejaswithme]

1st comment!!!
Viewing when 1min till publish.
☺️
We are all getting better day by day ❤️

[bonganijele]

Perfectly explain step by step I really love it

[DannyBurbol]

small request for future videos: finish typing. Say "that's done" or "like so." PAUSE for 3 seconds. THEN scroll to another random spot in the file.

currently: finished a line may or may not end with scrolling away without warning. It's really hard to follow along with because backing up the video's slider on a long video can jump really far and can often trigger another commercial. hope that helps everyone. thanks for listening.

[dodgingrain]

In your function in the video you have the return in the for each block which doesn't work, in github its outside the for each block which does work. There are a couple of other areas where const's are defined in the wrong area in the video but are in a different spot in the github code. For someone new to javascript finding and fixing these without going through the github code isn't easy and takes some time.

[romievthedon]

I'm only 30 minutes into it and I'm noticing my execution of DOM, wasn't too far off. But the fine balance of abstraction and encapsulation here is inspiring.

For the purpose of enhanced readability and curbing complexity, is it common practice to write many concise functions or fewer in-depth functions.

For example, my blackjack game required at most 11 functions. But the algorithms were sometimes 10+ lines. Hit, fold, stay, low bet, med bet, high bet, play again, reset, counter, check for aces, and check results. Some were also nested within each other.

For example, the counter kept track of the sum of a list of integers. A new randomly generated number would be added to the list when the hit button was clicked. Immediately after, the counter function is called where it sums the list and returns the value. But before summing the total, it checks for aces. While doing so it loops through the list and determines if an 11 is present. If so, it checks the new sum and if the new value brings the sum over 21, it changes the 11 to a 1.

Immediately after running the 'check for aces' function, it sums the list and checks for aces yet again, before running the rest of the hit function which will now create the new element with the appropriate class and id, as well as the src of the image according to the newly generated random value. Conditions for busting are set within the counter function as well.

But my question is, when does big O notation become problematic. And will the "many simple functions" technique make the computation more efficient?

It's probably a fairly simple question. But before a month ago, I hadn't known anything about comp sci. I'm actually starting a degree program next month and I've been running off of 4 hours of sleep per day these last few weeks out of pure interest and curiosity.

[erickarivas]

Thanks for girls who code who connected me to you ! Coming from a college student looking to pressure CS major

[isitrishi]

I've been waiting for this for a long time

[shadowboy]

Thanks for that Tutorial... loved it so much ❤

[dreamjobpotential]

Can you make video of games by java/python/pure javascripts by problem-solving guiding ?
That is: don't just say say say and then demo!
Change to: if this game involve 20 steps(say), you split into 20 steps, and ask how to complete this step, e.g.: initial of card postion, you can teach teaders how to think ask reader to try themselves ， and then you give answer

[javierneira]

Hey hi! i'am trying to make this card game but my card is not flipping. any clue??
this is my code:

:root{
--card-width: 157px;
--card-height: 220px;
}

.card-container{
margin-top: 30px;
position: relative;
}

.card{
position: absolute;
height: var(--card-height);
width: var(--card-width);
perspective: 1000px;
cursor: pointer;
}

.card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.card:hover .card-inner{
transform: rotateY(180deg);
}

.card-front, .card-back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

.card-img{
height: 100%;
}

.card-back{
transform: rotateY(180deg);
}

[mohammedmadnei]

Thank you. You provide the best ways to learn programming. You are the best educational content. I hope you add Arabic translation to your courses.