1
00:00:00,960 --> 00:00:06,780
The previous lesson we built out our success, now let's apply that to the element that we're building

2
00:00:06,780 --> 00:00:11,940
dynamically using JavaScript, and if you didn't build it, the success, you can copy and paste it

3
00:00:11,940 --> 00:00:15,170
out from the source files attached to this section.

4
00:00:15,900 --> 00:00:22,590
So we've got our HTML and now we're going to be building out a second HTML container where we're going

5
00:00:22,590 --> 00:00:27,050
to be holding our different our other card elements.

6
00:00:27,060 --> 00:00:28,860
So we've got a small one and a big one.

7
00:00:29,990 --> 00:00:36,290
So it's going to look relatively the same, having the card and then also the suit, but we're not going

8
00:00:36,290 --> 00:00:38,470
to have a space between there, a line break.

9
00:00:39,140 --> 00:00:43,010
We also need to account for all of the current cards.

10
00:00:44,300 --> 00:00:45,950
So using documents.

11
00:00:46,700 --> 00:00:50,160
So we want to position the cards a little bit over.

12
00:00:50,210 --> 00:00:55,460
So this is where we need to count how many existing cards there are on the page.

13
00:00:55,700 --> 00:01:02,090
So we're using the current cards object in order to contain all of that node list, just as we did with

14
00:01:02,090 --> 00:01:03,110
the buttons earlier.

15
00:01:03,910 --> 00:01:07,850
Now we go into creating the element and the element that we've just created.

16
00:01:07,850 --> 00:01:13,460
So that div that we've just created, this is our main container where we're going to set an attribute

17
00:01:13,460 --> 00:01:22,100
to that element and we're going to set a attribute of class because we don't have any content in the

18
00:01:22,100 --> 00:01:22,940
class yet.

19
00:01:23,360 --> 00:01:29,390
So we can set it within this type of format where we're setting an attribute and because we've positioned

20
00:01:29,390 --> 00:01:34,610
it absolute, we can take that div and we can position it to the left.

21
00:01:35,570 --> 00:01:39,490
And this is where we're going to calculate out how many current cards there are.

22
00:01:39,500 --> 00:01:41,130
What's the length of the current cards?

23
00:01:41,510 --> 00:01:47,150
Multiply that by 25 so that we know where we're going to position the new card.

24
00:01:47,420 --> 00:01:48,860
So it's going to be moved over.

25
00:01:49,040 --> 00:01:52,740
Every new card is going to be twenty five over to the left.

26
00:01:53,060 --> 00:01:57,900
So that's going to be a little bit of overlap to the new cards as we're building them out.

27
00:01:59,570 --> 00:02:02,240
Let's set a current card value.

28
00:02:03,160 --> 00:02:09,970
So our current card value and this is that global object value that we have and that we set up in the

29
00:02:09,970 --> 00:02:10,460
beginning.

30
00:02:10,750 --> 00:02:14,620
So this is the one that's going to contain whatever the existing card is.

31
00:02:14,620 --> 00:02:20,500
And we're going to use this as our calculation when the player selects either higher or lower to determine

32
00:02:20,800 --> 00:02:24,070
what card is in play and what the value of that card is.

33
00:02:24,250 --> 00:02:28,030
And that's the only value that we actually need to know from the card.

34
00:02:28,240 --> 00:02:31,180
We don't need to know any more of this object information.

35
00:02:31,330 --> 00:02:33,240
We just need to know the current card value.

36
00:02:33,490 --> 00:02:38,590
So grabbing that and once it's visually represented, we're going to hide that in the background and

37
00:02:38,590 --> 00:02:41,270
then use that to determine if it's higher or lower.

38
00:02:42,010 --> 00:02:50,020
We also need to use the card and check to see the suit and if the suit is equal to Haaz.

39
00:02:51,260 --> 00:02:57,500
Then we know that it's going to be red or if the card is equal to suit.

40
00:02:58,720 --> 00:03:00,550
And the suit is diamonds.

41
00:03:02,920 --> 00:03:05,470
Then we're going to select that div.

42
00:03:06,340 --> 00:03:13,690
Selecting the class list, because now we've already created that attribute class, so we need to add

43
00:03:13,690 --> 00:03:20,170
to it so using JavaScript to select the class list and just as we were before toggling it, we can add

44
00:03:20,170 --> 00:03:20,560
to it.

45
00:03:21,130 --> 00:03:23,320
So adding a value of red.

46
00:03:23,620 --> 00:03:26,830
This is the class that we created in the previous lesson.

47
00:03:26,950 --> 00:03:29,950
And all it's going to do is color that element.

48
00:03:29,950 --> 00:03:30,880
Text red.

49
00:03:32,380 --> 00:03:39,760
Now, we also need to create those smaller units that we want to house, so let's create those, we

50
00:03:39,760 --> 00:03:41,710
can create one as a span.

51
00:03:42,800 --> 00:03:50,630
Documents create element, so just as we did with the device, let's create a span in order to hold

52
00:03:50,780 --> 00:03:51,630
this content.

53
00:03:52,010 --> 00:03:57,560
This is going to be the smaller of the spam contents, so setting an attribute to it.

54
00:03:58,070 --> 00:04:05,270
So we're updating and giving it a class of tiny to match with the styling that we produced in the previous

55
00:04:05,270 --> 00:04:05,780
lesson.

56
00:04:06,140 --> 00:04:13,850
CSPAN one will have an inner HTML and this is where we're going to use that HTML to structure for the

57
00:04:13,850 --> 00:04:21,500
card so we can output that and then we're going to spend that spanned one to the div so that we're not

58
00:04:21,500 --> 00:04:27,890
we have no put the div yet, but we can also still append it to the div while we're building this card

59
00:04:27,890 --> 00:04:28,220
out.

60
00:04:28,640 --> 00:04:31,330
And then next we need to build out another spane.

61
00:04:31,340 --> 00:04:34,190
I'm going to copy this because some of the code is going to be very similar.

62
00:04:34,490 --> 00:04:36,280
So we call that span too.

63
00:04:36,710 --> 00:04:40,340
So creating a span, we need to set an attribute to it.

64
00:04:40,580 --> 00:04:45,560
The attribute that we're setting, the class that we're starting out and setting it to is big.

65
00:04:46,010 --> 00:04:49,520
Next, the span, too, and the inner HTML.

66
00:04:49,520 --> 00:04:50,410
This one is one.

67
00:04:50,420 --> 00:04:55,550
So no, it's a little bit reverse there where we're using one and two in reverse there.

68
00:04:55,760 --> 00:05:01,220
And then we need to append it to the div sort of pending span to to the div and then we're still ready

69
00:05:01,220 --> 00:05:08,180
to update an output that div we can get rid of that our HTML and now let's try it and see what our card

70
00:05:08,180 --> 00:05:08,640
looks like.

71
00:05:08,990 --> 00:05:09,620
So there we go.

72
00:05:09,620 --> 00:05:12,980
We've built out a card and we've got higher or lower.

73
00:05:13,220 --> 00:05:17,000
So right now these buttons aren't doing anything and that's what we're going to introduce in the next

74
00:05:17,000 --> 00:05:17,510
lesson.

75
00:05:17,660 --> 00:05:22,190
So this time the objective was to build out a visual representation of the card.

76
00:05:22,340 --> 00:05:25,730
And next, we need to make some actions for these buttons.

77
00:05:25,940 --> 00:05:27,340
So let's try that one more time.

78
00:05:27,350 --> 00:05:30,350
So the nine of diamonds start the king of hearts.

79
00:05:30,590 --> 00:05:32,480
And this is a nice representation.

80
00:05:32,480 --> 00:05:37,190
And of course, you can play around with the success and style it however you want.

81
00:05:37,220 --> 00:05:39,850
You can also add another tiny one here at the bottom.

82
00:05:39,980 --> 00:05:45,830
So depending on what you want your cards to look like and for me, I think this is a good visual representation

83
00:05:45,830 --> 00:05:48,410
for the card, so I'm not going to do any more success.

84
00:05:48,410 --> 00:05:52,030
But of course, you are welcome to update and adjust that as needed.

85
00:05:52,370 --> 00:05:59,300
So go ahead and add this part in where we're making the visual card, adding in and creating the elements

86
00:05:59,300 --> 00:06:05,480
on the fly and then setting the different classes that are attached to those attributes and then update

87
00:06:05,490 --> 00:06:13,310
an inner HTML and appending those elements as needed to the parent in order to output it for the player.