It’s not really a deck of card without face cards. Right now we just have the number 13 instead of a king. That really won’t do. The first thing I had to do was get some images. I used clker.com and searched king, queen, and jack. I saved those individual pictures into my images folder in my project. I added several “If” conditions to my code to check for each one. Jack is number 11; queen is number 12; king is number 13.

This is doing things as usual if the number is less than 11. Otherwise, it’s individually checking for the different numbers and defining the variable numberImg (number image) as the face card image. It puts the suit picture on once, and it puts the face card image on the page in the spot the number would usually go. I controlled the size of the face image by using the selector .number img in the CSS. That’s an image with the class number. I gave mine a height of 120px and assigned the width to automatically adjust (width:auto;).

Read through my code in English! What is it saying? Remember to use two or three equals signs when you are doing comparisons. You can’t use one or you are assigning the value.

if (number1<11){

for (i=0; i<number1; i++) {

$firstPlayerSuit.append(suit1);

};

} else {

if (number1 == 11) {

numberImg1 = “<img src=’./images/jack.png’/>”;

$firstPlayerSuit.append(suit1);

$firstPlayerNumber.html(numberImg1);

}

if (number1 == 12) {

numberImg1 = “<img src=’./images/queen.png’/>”;

$firstPlayerSuit.append(suit1);

$firstPlayerNumber.html(numberImg1);

}

if (number1 == 13) {

numberImg1 = “<img src=’./images/king.png’/>”;

$firstPlayerSuit.append(suit1);

$firstPlayerNumber.html(numberImg1);

}

}

You can watch this lesson as well.