1
00:00:00,390 --> 00:00:05,250
Welcome back, this lesson, we're going to do some styling and make these actually look like cards

2
00:00:05,250 --> 00:00:11,310
instead of just outputs as text outputs, so we are adding in a class of card.

3
00:00:11,500 --> 00:00:15,960
And as we build the cards, the visual cards, we're adding those in.

4
00:00:15,990 --> 00:00:19,560
So let's set some values into that class.

5
00:00:19,830 --> 00:00:21,810
So we've got a display of block.

6
00:00:22,230 --> 00:00:24,110
We can also do margin of auto.

7
00:00:24,120 --> 00:00:28,050
So that will center the element, add some padding in there.

8
00:00:28,050 --> 00:00:30,690
The padding set that up as seven picks.

9
00:00:30,960 --> 00:00:36,150
And we also want to force the height of the card as well as a width for the card.

10
00:00:36,330 --> 00:00:39,060
And I'm also going to add in a margin at the top.

11
00:00:39,220 --> 00:00:44,880
So but we do 10 picks, so it's not sitting right at the top background color for the card.

12
00:00:45,000 --> 00:00:48,780
And let's make it white or an off-White so we can do a white smoke.

13
00:00:48,780 --> 00:00:55,410
So it's not exactly white, also a border so that we can see where the card is sitting and do the border

14
00:00:55,410 --> 00:00:56,160
block for now.

15
00:00:56,310 --> 00:00:58,290
And we'll check that out and we'll see how that looks.

16
00:00:58,830 --> 00:00:59,960
Also, border radius.

17
00:00:59,960 --> 00:01:02,120
So most cards are not exactly square.

18
00:01:02,310 --> 00:01:03,690
They've got rounded sides.

19
00:01:03,690 --> 00:01:04,860
So we've got to add that in.

20
00:01:04,990 --> 00:01:09,360
And then lastly, just for a nicer effect, we can add in a box shadow.

21
00:01:09,600 --> 00:01:12,810
So this will add in a slight shadow underneath the card.

22
00:01:13,110 --> 00:01:16,130
So let's see what that looks like when we refresh and we start.

23
00:01:16,410 --> 00:01:18,860
So we've got something that looks a little bit more like a card.

24
00:01:19,560 --> 00:01:23,430
Also, let's set up some classes to hold the big area.

25
00:01:23,430 --> 00:01:25,140
We can just call this one big.

26
00:01:25,170 --> 00:01:30,330
So this is going to be one of the representations of what's on the card and this is going to be the

27
00:01:30,330 --> 00:01:30,820
bigger one.

28
00:01:30,820 --> 00:01:35,300
So setting up our font size one four five M sounds good.

29
00:01:35,340 --> 00:01:36,510
We can text a line.

30
00:01:36,510 --> 00:01:45,360
So center text align that do the line height so that we have more, we have an option to more to center

31
00:01:45,360 --> 00:01:46,080
it as well.

32
00:01:46,650 --> 00:01:47,730
Margin top.

33
00:01:47,730 --> 00:01:49,860
So it's not sitting right at the top as well.

34
00:01:50,340 --> 00:01:54,420
So we can do ten picks and by default what's display block.

35
00:01:54,810 --> 00:01:59,400
There's also one that I want to add in so we know that hearts and diamonds are red in color.

36
00:01:59,610 --> 00:02:05,910
So this is another class that we can add if one of those matches, the criteria of the suit that we're

37
00:02:05,910 --> 00:02:06,510
looking for.

38
00:02:06,690 --> 00:02:09,720
And then lastly, there's another one that we wanted to create.

39
00:02:09,720 --> 00:02:15,600
And this is going to be the tiny representation of what's on the card in a really smaller format.

40
00:02:15,840 --> 00:02:20,880
And as we've got the two representations, so this one is going to have a smaller font size.

41
00:02:21,090 --> 00:02:22,890
It's also going to have a smaller line.

42
00:02:23,160 --> 00:02:29,280
And we can vertical align this one at the top and text line and this time we're going to text align

43
00:02:29,280 --> 00:02:29,700
left.

44
00:02:30,090 --> 00:02:36,060
So let's go back into our JavaScript code and we're going to add the appropriate classes where we're

45
00:02:36,060 --> 00:02:37,140
showing the card.

46
00:02:37,320 --> 00:02:40,440
So here's where we were constructing the card in the show card function.

47
00:02:40,470 --> 00:02:44,280
So as we're building the card, let's add a class.

48
00:02:44,280 --> 00:02:50,790
So we've got the card attribute and we can do a condition here that we can check to see if the card

49
00:02:51,030 --> 00:02:55,560
suit as remember, this is an object that we can select that object information.

50
00:02:55,830 --> 00:03:06,570
So if it's equal to Haaz or if card suit is equal to Dimond's, then we want to apply a class of red

51
00:03:06,570 --> 00:03:10,380
to it and otherwise we're just going to leave it blank or black.

52
00:03:10,950 --> 00:03:11,670
So do.

53
00:03:12,610 --> 00:03:18,490
Class list and then add to the class list at that class of red, so see how that looks.

54
00:03:18,820 --> 00:03:20,080
So fresh start.

55
00:03:20,230 --> 00:03:22,290
So now the hearts and the diamonds are red.

56
00:03:22,300 --> 00:03:28,090
So it's looking a little bit more like the actual cards also as we're building out the first spin.

57
00:03:28,540 --> 00:03:35,710
So let's take spane one and using class list, we can add to the class so we can set an attribute because

58
00:03:35,710 --> 00:03:37,720
we don't have any classes quite yet.

59
00:03:38,290 --> 00:03:43,750
But in this case, let's just do the tiny one first as this is going to be the small one that's going

60
00:03:43,750 --> 00:03:50,980
to show up, and then the next one is going to have CSPAN two and then this is going to be the big one.

61
00:03:51,370 --> 00:03:52,810
So now let's see what that looks like.

62
00:03:53,110 --> 00:03:57,280
So now we've got a more representation of what the cards look like.

63
00:03:57,440 --> 00:04:00,100
And of course, you can style this as needed.

64
00:04:00,220 --> 00:04:02,200
And you can see that it looks fairly good.

65
00:04:02,200 --> 00:04:04,960
It looks fairly much more like a card.

66
00:04:05,110 --> 00:04:09,800
The content that's being output is more visually appealing in this type of format.

67
00:04:10,300 --> 00:04:14,470
So coming up next, we need to introduce the gameplay in the game Logic.

68
00:04:14,710 --> 00:04:15,820
So that's still to come.

69
00:04:15,970 --> 00:04:21,400
So go ahead and update your styling and you can style this the way that I did it, or you can make it

70
00:04:21,400 --> 00:04:22,330
look even better.

71
00:04:22,480 --> 00:04:23,440
So that's up to you.

72
00:04:23,890 --> 00:04:25,960
So coming up next is Game Logic.