Feeling lucky? Let's play cards! - Advanced New Media Production

One of your freecodecamp.org lessons gave you a brief introduction to Javascript's random number generator but it probably didn't feel all that exciting. In this lesson we are about to take random numbers to another level by using them to construct poker hands with actual cards.
1. Download cards.zip and move the unzipped folder to your work area.
2. Look at cards.html. As you can see, it already contains a div named #deck, a link to cards.js, and a button that calls a function named shuffle.
3. With a bit more poking around, you should also discover that there there are 52 card images inside of the cards folder which are conveniently referenced by name in an array inside of cards.js.
4. Your job at this point is to build that function inside of cards.js and get it to randomly assemble the images of five separate cards inside of #deck.
5. Now that the preliminaries are out of the way, the first step is to create a variable named deck and assign it to the #deck div tag. You know how 🙂
6. Next create the shuffle function that is going to sort the cards for us.
7. Now our job is to generate a suitable random number. Let's do that by creating a new variable named outcome and setting it to Math.random as in
  let outcome = Math.random(). As you know, this will generate a fraction between 0 and 1. We need a much bigger number, so multiply that by 52, the number of cards in the deck, as outcome = Math.random() * 52.
8. Now make the outcome value appear in the deck as shown below.
9. Do values appear when you click the button? If so, you may notice potential problems for our next steps. First, we will need to reference the items in the cards array by integers as in 0,1,2, 3 etc. but the numbers that appear are not integers. If you click enough, you will also observe that some of the numbers are higher than 51.5. Because our array has 52 items and the count starts at 0, we need to cap our number at 51. Luckily, the Math.floor function was designed for just this task because it always rounds down.

1. 1. Let's start humbly and see if we can add just one card to the deck with code that starts something like
  2. If things work properly, that should place one card in the deck but we need five. Now it's time to exercise your coding powers and . add a loop. The for loop shown below would be a very functional starting point.
    You should be terminate this loop on your own.
  3. Now that you have a loop, put your declaration of outcome along with the line that begins with deck.innerHTML = inside and test again.
  4. See a problem? do you keep getting a card but only one? That's because the content of deck is changing with each new card but you need it to increment, as in add 5 cards. To solve that problem, change deck.innerHTML = to deck.innerHTML += and try again.
  5. Did it work? Click again and likely you will find yet another problem. Now you have 10 cards and they multiply by five each time you click. One short line of code, right at the beginning of the shuffle function will resolve this problem: deck.innerHTML = ""; will strip everything out of the #deck div tag each time the function runs.
  6. Want to drag those cards around by any chance. Cards.html is already connected to jquery and jqueryui (on lines 7 and 8) in order for you to easily accomplish this. Add the simple function shown below (that sets all images to draggable), to the shuffle function just before the final bracket.
    Please note that this function uses jquery notation. You may or may not have encountered jquery before, but it's basically a library that extends the functionality of standard Javascript, and also offers additional options for calling functions and accessing elements within the dom.
  7. At this point you have a nice function that produces five cards on command but you still don't have a poker game. If you have played poker, you know that you still need a way to discard (up to 3 cards in standard poker) and to add cards back to the deck. Adding the nice little function (just after the draggable function) shown below, should do the trick. As you may have notice, this function also uses jquery notation.
    In this case you are telling any image (card) that is double-clicked to disappear.
  8. Now we are almost ready to figure out how to add additional cards to the deck (we are playing 5 card draw btw) after the discard but there is one big problem we have to overcome first. The way things are currently set up, our players are drawing from a full deck. Which means that a player could potentially have five cards of the same kind! If we get to the point of developing a multi-player game, things could get even more complicated. (knives and guns come to mind).
  9. To remove those cards you need to use an array method called splice. Splice can be used to both add and remove elements from an array. For removing, which is what you need, it has two arguments. The first argument tells it where to start. The second argument tells it how many elements to remove. For your purposes, simply add this command to your for loop:
    cards.splice(outcome , 1); which will, one by one as the loop progresses, remove the same five cards that appear in your browser.
  10. Click the shuffle button a few times. Do you see a problem? Chances are, the deck is missing cards after the first couple of shuffles. That is because your for loop has 52 hard coded into it, but your deck is shrinking. Whenever a number larger than the current length of the deck appears, the function tries to add a missing card to the deck. Change the number 52 to cards.length to solve this small problem.
  11. Now it's time for you to TRY to accomplish some tasks with much less handholding.
    1. Create a second function that can add cards back to the deck after the discard, and tie it to a button.
    2. Create a third function named reset, that will return the value of the cards array to the original value.
    3. Figure out a way to add, and fill, another div tag with five cards.
    4. Figure out how to add cards to the second array after the discard. Perhaps by adding an argument to the second function or by creating an additional function and button. Your choice, just make it work.

Have fun!