1 00:00:01,740 --> 00:00:06,360 The last lesson we applied, styling and with styling, it really makes it look. 2 00:00:06,570 --> 00:00:07,410 Bring it to life. 3 00:00:07,500 --> 00:00:08,730 Bring what we're doing to life. 4 00:00:09,120 --> 00:00:15,090 So we do want to be able to hide the first card for the dealer to make the game a little bit more interesting 5 00:00:15,120 --> 00:00:17,850 because we don't want the dealer's cards to be visible. 6 00:00:18,120 --> 00:00:23,490 So we're creating another card B class, and this is going to be the one where it's the hidden part. 7 00:00:23,910 --> 00:00:30,990 So in this case, let's position and absolute and we're going to essentially be putting a cover on top 8 00:00:31,050 --> 00:00:31,920 of the card. 9 00:00:32,460 --> 00:00:35,250 So we're we want to position it so top. 10 00:00:36,360 --> 00:00:38,380 And third team picks. 11 00:00:39,060 --> 00:00:45,810 And to the left of nine picks and a lot of this, the rest of the parameters are gonna be the same. 12 00:00:46,620 --> 00:00:48,810 I do a background color of the blue. 13 00:00:51,360 --> 00:00:53,150 You can keep the border radius. 14 00:00:53,840 --> 00:00:54,710 We can. 15 00:00:56,370 --> 00:00:57,840 Keep that border color for what? 16 00:00:59,030 --> 00:01:00,690 And but let's see how this looks. 17 00:01:01,070 --> 00:01:08,850 So going into the script, we're going to check to see if that boolean value or if doing the show card 18 00:01:09,330 --> 00:01:12,630 and passing it there, that's hidden or not within the take card. 19 00:01:12,990 --> 00:01:16,530 And we're going to do the construction to see if we need to hide it. 20 00:01:17,040 --> 00:01:19,290 And if we don't hide it, then we can show it. 21 00:01:19,350 --> 00:01:21,680 So that h h. 22 00:01:22,380 --> 00:01:26,460 Depending on whatever the boolean value is, we're gonna play a cover on top. 23 00:01:27,180 --> 00:01:28,940 So do true for the first one. 24 00:01:30,180 --> 00:01:42,330 And the condition is gonna be if h then we're going to add into the game card back and using document 25 00:01:42,840 --> 00:01:47,520 create elements and adding in to create a div. 26 00:01:48,120 --> 00:01:49,590 This one's gonna float on top. 27 00:01:50,280 --> 00:01:52,600 And game card back. 28 00:01:52,890 --> 00:01:55,210 Class list add. 29 00:01:55,770 --> 00:02:05,040 And the class that we're adding is gonna be card B and then taking the elements and appending that new 30 00:02:05,640 --> 00:02:10,380 car game card back element that we constructed. 31 00:02:10,470 --> 00:02:11,370 So see what happens. 32 00:02:12,000 --> 00:02:12,810 So we do a deal. 33 00:02:13,260 --> 00:02:15,690 We need to make a few tweaks and adjustments. 34 00:02:16,040 --> 00:02:16,920 That's not quite right. 35 00:02:16,950 --> 00:02:17,730 We've got to move it up. 36 00:02:19,380 --> 00:02:22,440 So position of card, be it actually with us. 37 00:02:22,740 --> 00:02:29,310 Should work for being able to cover any of the cards so it doesn't look like we need to have the border. 38 00:02:29,790 --> 00:02:31,740 So let's adjust the top position. 39 00:02:31,890 --> 00:02:36,480 So bring it down to 63 and we don't need the border either. 40 00:02:36,540 --> 00:02:40,250 So you get rid of that and maybe it's 64. 41 00:02:40,710 --> 00:02:43,920 So until it's covered and once it's covered, then that's fine. 42 00:02:43,950 --> 00:02:44,580 That's all we need. 43 00:02:44,640 --> 00:02:46,320 We just need to make sure that it is covered. 44 00:02:46,890 --> 00:02:51,930 You might have to make some adjustments depending on if you shift other things around on the page, 45 00:02:52,920 --> 00:02:54,720 depending on the content that we have here. 46 00:02:54,960 --> 00:02:58,380 So there might be some additional tweaks, adjustments we need to be able to make to it. 47 00:02:58,800 --> 00:03:02,850 But in this case, we do see that it's showing or hiding the card. 48 00:03:03,150 --> 00:03:04,650 So that's what we initially wanted. 49 00:03:05,100 --> 00:03:09,480 And there's also one other thing that I want to add in before we complete with the take card function. 50 00:03:10,070 --> 00:03:17,040 And this is actually the ideal spot to check to see if the game deck because rubber, we're taking away 51 00:03:17,280 --> 00:03:22,980 the cards from the game deck and we can check to see if the length of that is equal to zero. 52 00:03:23,400 --> 00:03:29,370 And if it is, then we just run build deck one more time and it'll create a brand new deck of cards. 53 00:03:29,640 --> 00:03:32,960 So essentially, we're never gonna run out of cards for the gameplay. 54 00:03:33,660 --> 00:03:35,760 So let's save this and try the deal. 55 00:03:35,850 --> 00:03:40,080 Just make sure it's working and we're ready to move on to the next lesson where we can take some more 56 00:03:40,080 --> 00:03:42,420 advanced functionality of the gameplay. 57 00:03:42,730 --> 00:03:43,800 And that's coming up next. 58 00:03:44,070 --> 00:03:50,430 So go ahead and set up your game area to be functioning the same way where you've got the cards, you're 59 00:03:50,440 --> 00:03:51,420 displaying the cards. 60 00:03:51,690 --> 00:03:54,570 The first card is hidden and it's showing the other cards. 61 00:03:54,780 --> 00:03:59,130 And we're gonna do some calculations allowing the buttons to either hit and stand. 62 00:03:59,370 --> 00:04:01,250 So that's all coming up in upcoming lessons.