1
00:00:00,390 --> 00:00:05,490
It's about time we get something visual on our screen again in this lesson, we'll show you how to do

2
00:00:05,490 --> 00:00:05,730
that.

3
00:00:06,030 --> 00:00:10,650
So we're going to do the short card function and this is the one that's going to actually show the card.

4
00:00:10,830 --> 00:00:12,660
So we're passing in a couple parameters.

5
00:00:12,670 --> 00:00:19,200
We've got temp, which is actually going to be the card so that we've picked up from the game deck.

6
00:00:19,200 --> 00:00:20,610
So it's the top card.

7
00:00:20,970 --> 00:00:23,670
And then also we need an element that we want to update.

8
00:00:23,980 --> 00:00:30,660
And I also want to update these values and I want to move them above the card and just clear them out.

9
00:00:31,670 --> 00:00:37,650
So we don't need to have the word deal anymore as we're going to be updating that element in the show

10
00:00:37,660 --> 00:00:45,330
card, so we do have that element and do the text content and let's let's write ready in there for now.

11
00:00:46,080 --> 00:00:46,820
So press.

12
00:00:46,920 --> 00:00:47,340
Deal.

13
00:00:47,640 --> 00:00:48,570
And then we've got the word.

14
00:00:48,870 --> 00:00:49,140
Ready.

15
00:00:49,310 --> 00:00:51,750
Set means that we can get the contents of the card.

16
00:00:52,050 --> 00:00:52,740
And if we do.

17
00:00:52,770 --> 00:00:53,440
Console.

18
00:00:53,550 --> 00:00:54,870
Log of the card.

19
00:00:54,920 --> 00:00:55,380
Object.

20
00:00:55,950 --> 00:00:56,850
And clear that.

21
00:00:57,120 --> 00:00:57,540
And press.

22
00:00:57,570 --> 00:00:58,050
Deal.

23
00:00:58,290 --> 00:01:01,230
You can see that this is going to be a six of diamonds.

24
00:01:01,650 --> 00:01:08,930
So if we wanted to, we could set the card value and we could use the card rank.

25
00:01:09,360 --> 00:01:10,620
And then let's do that.

26
00:01:10,640 --> 00:01:13,520
Ampersand and card suit.

27
00:01:13,890 --> 00:01:15,290
And adding in a colon.

28
00:01:15,990 --> 00:01:20,490
And this should actually be in our HMO because this is an H2 metal object.

29
00:01:21,180 --> 00:01:23,790
So that will give us the eight of spades.

30
00:01:24,220 --> 00:01:25,630
It's really, really tiny there.

31
00:01:25,680 --> 00:01:26,850
But you can see it.

32
00:01:26,880 --> 00:01:29,070
And we need to apply some styling.

33
00:01:29,310 --> 00:01:34,290
But this is the general ideas where we're going to be updating and we're going to be adding content.

34
00:01:34,740 --> 00:01:38,130
So we need to have a particular container assigned to it.

35
00:01:39,000 --> 00:01:40,830
So let's use a condition.

36
00:01:41,190 --> 00:01:44,550
And just make sure that card is not undefined.

37
00:01:45,090 --> 00:01:51,000
And if it is, then we're not going to try to work with the card object because that means that we're

38
00:01:51,000 --> 00:01:52,510
not being passed in anything.

39
00:01:52,540 --> 00:01:56,970
We just simply want to not have any action for the show cards so best.

40
00:01:57,000 --> 00:01:59,370
This will help prevent throwing some errors.

41
00:01:59,790 --> 00:02:03,690
So I'm going to just simply remove that because we're gonna style it a little bit better.

42
00:02:03,870 --> 00:02:05,340
So it actually looks like a card.

43
00:02:05,970 --> 00:02:13,170
So taking the style and let's update the background color to make sure that it's white and then using

44
00:02:13,230 --> 00:02:14,300
element div.

45
00:02:15,030 --> 00:02:21,810
And then document create elements and element that we're gonna be creating is gonna be a div and I'll

46
00:02:21,810 --> 00:02:23,700
move this up so you can see it a little bit better.

47
00:02:23,820 --> 00:02:26,400
We're gonna create a class called Card.

48
00:02:26,820 --> 00:02:34,950
So class list add and adding in the class of card to that, just as we did before we were constructing

49
00:02:35,010 --> 00:02:36,240
all of the elements.

50
00:02:36,840 --> 00:02:38,550
And this is where we've got a condition.

51
00:02:38,580 --> 00:02:45,600
So we're checking to see if the card suit is equal to hearts when we we're passing all of this information.

52
00:02:45,640 --> 00:02:47,550
It's already contained within the card object.

53
00:02:47,910 --> 00:02:52,020
So we just need to have the proper conditions to pick up the information.

54
00:02:52,350 --> 00:02:55,740
So check to see if card suit is hearts or diamonds.

55
00:02:56,100 --> 00:02:58,800
And that means that we can produce it as red.

56
00:02:59,310 --> 00:03:02,760
So the class will create another class.

57
00:03:03,180 --> 00:03:04,320
So class list.

58
00:03:05,000 --> 00:03:09,140
That's how you can add multiple classes to an element that you're constructing.

59
00:03:09,190 --> 00:03:14,580
So again, and we're going to add red to it and otherwise it'll just be black.

60
00:03:14,610 --> 00:03:20,070
So just if if we don't add in red and we've got to make sure that we update the styling accordingly

61
00:03:20,070 --> 00:03:20,490
as well.

62
00:03:21,180 --> 00:03:31,110
And let's create a span and then do documents create elements and creating another div and span one

63
00:03:31,950 --> 00:03:33,690
update the inner H to Amelle.

64
00:03:34,660 --> 00:03:44,460
So we're going to use that card rank plus the ampersand and then card suit and then concatenate it with

65
00:03:44,550 --> 00:03:45,210
the colon.

66
00:03:45,450 --> 00:03:49,830
You do need to have the colon because this is putting the H.

67
00:03:49,850 --> 00:03:53,120
Timal code for the card icon.

68
00:03:53,250 --> 00:03:54,000
The suit icon.

69
00:03:54,360 --> 00:03:55,570
So span one.

70
00:03:56,490 --> 00:03:58,250
And class list again.

71
00:03:58,920 --> 00:04:03,420
And this one, we're gonna make a little tiny value at the top.

72
00:04:03,450 --> 00:04:04,950
So it looks like a real card.

73
00:04:06,300 --> 00:04:10,040
And then for the div will pend the child.

74
00:04:11,530 --> 00:04:13,950
And the child that we're going to spend is the span one.

75
00:04:15,310 --> 00:04:20,050
So I know that I've called these device and I've called these spans, but we're gonna apply styling

76
00:04:20,050 --> 00:04:20,380
to them.

77
00:04:20,380 --> 00:04:24,250
So for now, we can actually also create them as span's.

78
00:04:24,370 --> 00:04:27,430
It actually doesn't really matter because we're gonna be applying the styling to them.

79
00:04:28,720 --> 00:04:30,490
But we can keep them as diverse as well.

80
00:04:31,010 --> 00:04:32,770
This was just to avoid the confusion.

81
00:04:33,070 --> 00:04:36,820
And of course, you can style these and you can update the styling as needed.

82
00:04:37,310 --> 00:04:38,260
I'm to have another one.

83
00:04:38,350 --> 00:04:40,080
I call this one span, too.

84
00:04:40,490 --> 00:04:44,410
And let's keep this one as a div and we'll make all of the updates with the styling.

85
00:04:45,130 --> 00:04:48,680
And this will be the bigger part where we've got the bigger content.

86
00:04:49,850 --> 00:04:53,840
And the inner part of this one is just going to show the card ring.

87
00:04:54,050 --> 00:04:56,710
So this will be whatever the card rank is.

88
00:04:56,720 --> 00:05:01,880
So, you know, 10 Ace King Short, nice and big in the middle of the.

89
00:05:02,880 --> 00:05:08,010
The card and let's do one more, and this one is going to be the suit.

90
00:05:09,060 --> 00:05:10,920
So this one is going to be big as well.

91
00:05:11,100 --> 00:05:12,600
And we'll keep this one as a div.

92
00:05:14,100 --> 00:05:19,790
And as I said, right now, it's going to show as the default element properties.

93
00:05:20,220 --> 00:05:22,870
But we're going to update some of the styling later on.

94
00:05:23,460 --> 00:05:28,570
And the inner turmoil of this one is going to show the character code.

95
00:05:29,340 --> 00:05:33,080
So that and card suit.

96
00:05:34,620 --> 00:05:37,020
And then add in the in there.

97
00:05:37,740 --> 00:05:40,470
So you always have to add the coal and otherwise you're not going to work.

98
00:05:40,710 --> 00:05:45,540
And also make sure you don't have any spaces because again, it's not going to work if there are spaces.

99
00:05:46,890 --> 00:05:49,260
So now it's just a matter of appending them.

100
00:05:49,290 --> 00:05:52,830
So we've appended the child with appended spanned two.

101
00:05:53,130 --> 00:05:57,150
And I think that we need to do probably or we can just keep it with the span, too.

102
00:05:57,270 --> 00:05:58,860
So see what happens to it, it looks like.

103
00:05:59,970 --> 00:06:06,150
Oh, and of course, lastly, we need to take the elements and we need to append child.

104
00:06:06,690 --> 00:06:11,250
And let's spend that give to the element, that was the lesson that we are missing.

105
00:06:11,670 --> 00:06:15,280
So, see, we've got the jack of diamonds and then the jacket diamonds.

106
00:06:15,510 --> 00:06:20,130
So it's nice and neatly kind of structured and a look a lot better when we apply the styling.

107
00:06:20,690 --> 00:06:23,550
And what we want to do is actually want to take four cards.

108
00:06:23,820 --> 00:06:26,430
So I take two cards for the dealer hand.

109
00:06:26,790 --> 00:06:28,830
And then two cards for the player hand.

110
00:06:29,550 --> 00:06:31,910
And let's just update these two player.

111
00:06:33,090 --> 00:06:36,390
And this will go into the player cards element.

112
00:06:37,600 --> 00:06:38,430
This is why it's nice.

113
00:06:38,430 --> 00:06:45,000
In the beginning, if you set up all of your objects, element up page objects that you're going to

114
00:06:45,000 --> 00:06:47,280
have to work with later on in the game.

115
00:06:47,460 --> 00:06:48,360
Nice and neatly.

116
00:06:48,600 --> 00:06:50,850
And this way you can see that content being output.

117
00:06:51,750 --> 00:06:52,260
So there we go.

118
00:06:52,290 --> 00:06:57,510
So we've got the eight of spades, the nine of clubs, the king of diamonds and the two of diamonds.

119
00:06:58,050 --> 00:07:00,000
So it doesn't look great right now.

120
00:07:00,240 --> 00:07:02,460
And that's because we need to play some styling.

121
00:07:02,670 --> 00:07:04,920
And we're going to do this with CSX.

122
00:07:05,370 --> 00:07:09,570
And we're not going to attempt to do a JavaScript is quite a bit of styling to get this to look right.

123
00:07:09,870 --> 00:07:14,460
So next lesson is going to be applying styling to the cards that are being output.

124
00:07:14,560 --> 00:07:15,510
So that's coming up next.

125
00:07:15,840 --> 00:07:18,350
So go ahead and structure your card object.

126
00:07:18,720 --> 00:07:20,990
And coming up next, we're going to play the styling to it.

127
00:07:21,690 --> 00:07:24,060
We've already applied it, pide, all of the classes.

128
00:07:25,200 --> 00:07:27,360
That are necessary in order to construct the cards.