1
00:00:00,060 --> 00:00:04,470
Creating visual stuff in eight simple and JavaScript is always fun.

2
00:00:04,620 --> 00:00:09,000
So this lesson is going to be a lot of fun because this is where we generate the card.

3
00:00:09,120 --> 00:00:16,020
And instead of having six Dimond's or six diamond, we're going to have more of a visual representation

4
00:00:16,350 --> 00:00:20,850
going into our code where we have function ready to make a card.

5
00:00:21,150 --> 00:00:28,410
We want to pass in a value into the make a card so this can be a value of the card, let's say card.

6
00:00:28,950 --> 00:00:38,640
And where we have make deck draw card, we've got our make card here and we've got our my card value

7
00:00:38,670 --> 00:00:40,640
that we can pass in to make it.

8
00:00:40,980 --> 00:00:45,240
So essentially we're selecting and we've got all of that object information.

9
00:00:45,390 --> 00:00:47,730
So we've got a suit, a rank and a value.

10
00:00:47,830 --> 00:00:53,610
And of course, if you had more object information contained within that card, that could be passed

11
00:00:53,610 --> 00:00:54,660
through as well.

12
00:00:54,810 --> 00:00:59,970
So if you want to extend on it and make it even more complex and interesting, you could add additional

13
00:00:59,970 --> 00:01:02,470
values and parameters into that deck.

14
00:01:02,880 --> 00:01:08,870
So for now, we'll just console, logout the card, just make sure that we are getting everything properly.

15
00:01:09,030 --> 00:01:10,140
We should hit start.

16
00:01:10,320 --> 00:01:14,580
We can see that we've got the clubs, the ten of clubs has been selected.

17
00:01:14,730 --> 00:01:17,940
So let's draw that out and visually represent that.

18
00:01:18,690 --> 00:01:21,300
First of all, creating some HTML containers.

19
00:01:21,990 --> 00:01:25,310
We've got our card object that we can utilize.

20
00:01:25,800 --> 00:01:27,960
We've got a rank within that card.

21
00:01:30,230 --> 00:01:38,270
And now it's to a little bit of each time to draw that out, and the reason that I used the different

22
00:01:38,450 --> 00:01:46,280
values here within the suits is that these are also can be represented in HTML characters and ask to

23
00:01:46,280 --> 00:01:46,920
characters.

24
00:01:47,120 --> 00:01:53,910
So if I take and hearts, I can output that value as a suit and I'll show you how that works.

25
00:01:54,350 --> 00:02:03,350
So we've got our rank, which is going to be a ten, and then underneath I'm going to add in that visual

26
00:02:03,350 --> 00:02:05,110
representation of the heart.

27
00:02:05,840 --> 00:02:10,080
So taking the card suit value.

28
00:02:10,430 --> 00:02:12,490
So we see that as clubs in this case.

29
00:02:13,580 --> 00:02:18,920
And this is where that end is important because placing that in front is going to represent that visually

30
00:02:19,430 --> 00:02:21,920
and then the semicolon to close that off.

31
00:02:22,530 --> 00:02:25,280
So that's going to be the card that we're building out.

32
00:02:27,170 --> 00:02:32,480
Let's create a div in order to house that information, so document.

33
00:02:33,670 --> 00:02:40,180
Using create element in JavaScript allows us to create elements on the fly dynamically and the element

34
00:02:40,180 --> 00:02:41,550
we want to create is a diff.

35
00:02:41,560 --> 00:02:43,330
I move this up so it's more centered.

36
00:02:45,200 --> 00:02:46,850
So creating a div next.

37
00:02:48,150 --> 00:02:56,790
We'll take gameplay so that gameplay object that we set up earlier and append child to that and the

38
00:02:56,790 --> 00:03:02,400
child that we're going to pending is a div and then within this div that we've just freshly created,

39
00:03:02,610 --> 00:03:04,980
let's set some inner HTML into it.

40
00:03:07,370 --> 00:03:15,190
So taking the d'Hiv, updating our inner turmoil, and for now we'll set it up as HTML one value and

41
00:03:15,200 --> 00:03:15,930
let's try that out.

42
00:03:15,950 --> 00:03:23,090
So now when we start, we see this jack of diamonds and we can actually get rid of that output here

43
00:03:23,090 --> 00:03:27,500
where we're setting our gameplay into HTML and we can blank that out.

44
00:03:28,760 --> 00:03:32,030
So hit start, we've got our queen of spades.

45
00:03:32,420 --> 00:03:37,940
So it looks a little bit better and of course, we can use some styling to really update this.

46
00:03:38,270 --> 00:03:44,540
So let's open up our scissors and we'll update the styling of these elements.

47
00:03:46,920 --> 00:03:51,870
And if you're not interested in the styling, you can skip through the rest of this lesson as it's just

48
00:03:51,870 --> 00:03:58,050
going to be working through some default styling so that we can output the visuals of the card in a

49
00:03:58,050 --> 00:04:00,140
bit better, more appropriate fashion.

50
00:04:00,330 --> 00:04:02,760
So I'm using absolute position, absolute.

51
00:04:02,970 --> 00:04:08,850
And then I'm going to be attaching in these classes into that particular element that we built and will

52
00:04:08,850 --> 00:04:10,680
be doing that in the upcoming lesson.

53
00:04:10,890 --> 00:04:14,130
So for now, I'm just setting up some default styling.

54
00:04:14,400 --> 00:04:22,350
So display in line block that we're going to be using in the next lesson in order to build out the look

55
00:04:22,350 --> 00:04:23,370
and feel of our card.

56
00:04:24,270 --> 00:04:28,710
So adding in some padding of seven picks height.

57
00:04:29,920 --> 00:04:31,660
So this is the height of our card.

58
00:04:33,000 --> 00:04:40,030
We also need to set a width for the card, and this could also change as well, depending on what the

59
00:04:40,140 --> 00:04:46,140
suit your needs is, the background color are going to make it white, but not exactly whites or white

60
00:04:46,140 --> 00:04:48,210
smoke border.

61
00:04:48,870 --> 00:04:51,450
So one pixelate black border.

62
00:04:52,740 --> 00:05:00,210
I usually like to round the sides of the cards so we can use border radius for that, set up five pics

63
00:05:00,210 --> 00:05:03,090
of border radius and also a box shadow.

64
00:05:03,100 --> 00:05:08,190
So that has a nice more 3D effect adding in that 3D effect for the cards.

65
00:05:09,450 --> 00:05:14,640
And the way that I want to do the card is a more of a typical card where we're going to output the queen

66
00:05:14,640 --> 00:05:19,590
of hearts or queen of spades twice, and we're going to have a big, big one in the center and then

67
00:05:19,590 --> 00:05:21,650
a small one up in the top right corner.

68
00:05:21,870 --> 00:05:22,680
So a tiny one.

69
00:05:23,950 --> 00:05:30,110
So let's set up our big class and this will output for the center.

70
00:05:30,720 --> 00:05:33,630
We need to have a font size, fairly large font size.

71
00:05:33,630 --> 00:05:34,710
I can use three M.

72
00:05:36,690 --> 00:05:43,230
Using text line can go ahead and send her text a line setting the line height so we can always force

73
00:05:43,230 --> 00:05:49,980
a specific height for the line height so we don't get out of shape for our content in our content margin

74
00:05:49,980 --> 00:05:50,430
auto.

75
00:05:51,030 --> 00:05:52,710
And I'll do a display block.

76
00:05:53,340 --> 00:05:55,050
Also, some of the cards are red.

77
00:05:55,050 --> 00:05:57,690
Some of them are going to be blue black.

78
00:05:57,900 --> 00:06:05,550
So we're going to apply a red class to the red ones and we can set that color to red.

79
00:06:05,560 --> 00:06:10,350
So that's going to set the display text display color to red.

80
00:06:10,560 --> 00:06:15,600
And then lastly, we've got one more class that we need to build out before we conclude this lesson.

81
00:06:15,750 --> 00:06:20,680
And that's going to be our tiny element using display block.

82
00:06:21,660 --> 00:06:22,970
So this one's small.

83
00:06:23,520 --> 00:06:34,280
So point a.T.M also make sure you set that line height so that we get the positioning and vertical aligned.

84
00:06:34,290 --> 00:06:36,360
So we're going to vertically align this to the top.

85
00:06:37,710 --> 00:06:41,190
So we refresh it and we have an added in these classes.

86
00:06:41,190 --> 00:06:46,140
Yet we're going to do that in the upcoming lesson so we'll have a more visual representation for that

87
00:06:46,470 --> 00:06:47,420
particular card.

88
00:06:47,850 --> 00:06:49,580
So that's still coming up in the next lesson.

89
00:06:49,800 --> 00:06:55,950
So go ahead and add this in to your project and you have to be ready for the next lesson where we continue

90
00:06:55,950 --> 00:07:01,410
as we build out these elements, we're going to apply some classes and we're going to style it to look

91
00:07:01,410 --> 00:07:02,250
more like a card.

92
00:07:02,490 --> 00:07:03,300
That's still to come.