1 00:00:00,190 --> 00:00:03,480 So, we have our bear, and we can pick all of our choices, but 2 00:00:03,480 --> 00:00:08,020 only the only the color actually gets, you know, referenced. 3 00:00:09,040 --> 00:00:13,480 So, how do we draw the bear? 4 00:00:13,480 --> 00:00:14,930 I like that. I actually like that. 5 00:00:14,930 --> 00:00:15,840 Let's go for the yellow. 6 00:00:16,840 --> 00:00:17,730 Yeah, the yellow is pretty cool. 7 00:00:17,730 --> 00:00:18,790 All right. 8 00:00:18,790 --> 00:00:21,030 So, drawing the bear is a little bit more complicated and 9 00:00:21,030 --> 00:00:27,000 this is kind of just as a result of how we're building this in HTML or CSS. 10 00:00:28,690 --> 00:00:29,390 But it's pretty cool. 11 00:00:29,390 --> 00:00:30,800 We're gonna go ahead and do it. 12 00:00:30,800 --> 00:00:33,030 And, I know you'll be able to follow along. 13 00:00:33,030 --> 00:00:38,660 So, we have this bear ID div. 14 00:00:38,660 --> 00:00:39,580 That's where we're drawing the bear. 15 00:00:39,580 --> 00:00:43,520 That's, that's this big, yellow, currently yellow, box. 16 00:00:43,520 --> 00:00:46,190 And, inside that, we have these three things, which is the bear's body, 17 00:00:46,190 --> 00:00:48,250 the bear's head, and the bear's nose. 18 00:00:48,250 --> 00:00:52,470 So, what we want to do is we need to layer in some more items, 19 00:00:52,470 --> 00:00:59,110 that will show off whatever it is that the bear is wearing. 20 00:00:59,110 --> 00:01:04,760 So, here after the body, we're gonna add a new div with 21 00:01:04,760 --> 00:01:09,970 a class of footwear, which I keep mistyping, so watch out for that. 22 00:01:11,450 --> 00:01:18,859 And, the source is gonna be static/img/bear_items_footwear. 23 00:01:20,190 --> 00:01:24,490 And, then, whatever has come out of here. 24 00:01:24,490 --> 00:01:25,715 See, footwear. 25 00:01:25,715 --> 00:01:30,660 [SOUND] So, there's a problem though. 26 00:01:30,660 --> 00:01:33,400 What if they haven't picked any footwear? 27 00:01:33,400 --> 00:01:34,863 So, let's add an if. 28 00:01:34,863 --> 00:01:38,137 [SOUND]. 29 00:01:38,137 --> 00:01:42,210 So, if we get any footwear, then render the tag. 30 00:01:43,210 --> 00:01:45,740 Otherwise, just leave the tag off. 31 00:01:45,740 --> 00:01:47,020 We've picked footwear. 32 00:01:47,020 --> 00:01:48,440 We picked these sandals. 33 00:01:48,440 --> 00:01:51,550 So, we should be able to refresh and see the sandals on the bear. 34 00:01:51,550 --> 00:01:53,280 Check it out, there's the bear sandals. 35 00:01:53,280 --> 00:01:54,080 All right, awesome. 36 00:01:55,100 --> 00:01:56,620 Okay, so now. 37 00:01:56,620 --> 00:01:57,670 That's for footwear. 38 00:01:57,670 --> 00:01:59,290 So now, let's add it for pants. 39 00:02:00,380 --> 00:02:03,910 And, you know, we're going to do the exact same thing, so lets just copy and paste. 40 00:02:05,100 --> 00:02:10,680 So, if we can get pants, then we want to have a class of pants. 41 00:02:11,930 --> 00:02:16,980 We don't want bear items footwear, we want bear items pants. 42 00:02:16,980 --> 00:02:18,710 We want saves pants. 43 00:02:20,520 --> 00:02:22,450 And, that's it. All right, we've picked some pants too. 44 00:02:22,450 --> 00:02:24,800 So, let's check out the pants. 45 00:02:24,800 --> 00:02:26,150 Ey, there is our pants. 46 00:02:26,150 --> 00:02:28,110 Cool. All right. 47 00:02:28,110 --> 00:02:31,560 Now, let's do the shirt. 48 00:02:33,350 --> 00:02:35,050 So, we are again gonna change this. 49 00:02:35,050 --> 00:02:36,910 So, we are gonna change this to shirts. 50 00:02:38,540 --> 00:02:39,720 And, this to shirts. 51 00:02:40,740 --> 00:02:44,300 Oh, I'm sorry.We're going to change that to shirt. 52 00:02:44,300 --> 00:02:49,210 Bear items, shirts, saves, shirts. 53 00:02:50,750 --> 00:02:51,665 That's it. All right. 54 00:02:51,665 --> 00:02:53,400 We've picked a shirt already as well. 55 00:02:55,800 --> 00:02:57,130 There's our shirt. 56 00:02:57,130 --> 00:02:58,570 Cool! Our bear's coming together. 57 00:02:59,900 --> 00:03:00,640 All right. 58 00:03:00,640 --> 00:03:02,970 So, we've done footwear, we've done pants, we've done shirts. 59 00:03:02,970 --> 00:03:04,986 We need to do glasses and the hat. 60 00:03:04,986 --> 00:03:09,650 So, we've got the head, we need to put the glasses above the head, so 61 00:03:09,650 --> 00:03:11,325 it'll come after head. 62 00:03:11,325 --> 00:03:15,469 And, we're gonna change this to glasses. 63 00:03:15,469 --> 00:03:18,209 Glasses. 64 00:03:18,209 --> 00:03:21,739 Bear items. 65 00:03:21,739 --> 00:03:25,774 Glasses saves glasses. 66 00:03:25,774 --> 00:03:28,178 [BLANK_AUDIO] 67 00:03:28,178 --> 00:03:30,012 All right, refresh. 68 00:03:30,012 --> 00:03:32,480 There's our cool blue glasses that we picked. 69 00:03:33,810 --> 00:03:35,670 And, the last thing we wanna is the hat. 70 00:03:35,670 --> 00:03:39,440 The hat goes on top of everything, so it's at the very bottom of the stack. 71 00:03:40,470 --> 00:03:47,922 So, if we have a hat, then our class is hat, bear item, 72 00:03:47,922 --> 00:03:53,400 items hat, saves hat. 73 00:03:53,400 --> 00:03:55,330 And, we have a hat, right? 74 00:03:55,330 --> 00:03:56,400 Yeah, we picked the headband. 75 00:03:57,420 --> 00:03:58,460 Refresh. 76 00:03:58,460 --> 00:03:59,900 There's our headband. 77 00:03:59,900 --> 00:04:01,480 All right. So, that's pretty cool. 78 00:04:01,480 --> 00:04:03,470 We have our background color working. 79 00:04:03,470 --> 00:04:05,140 We have our, and let's see if we can change our name. 80 00:04:05,140 --> 00:04:06,400 What if we change the name here to Kenneth? 81 00:04:07,740 --> 00:04:09,320 And, we update. 82 00:04:09,320 --> 00:04:11,190 Cool. My bear is still called Kenneth. 83 00:04:12,250 --> 00:04:16,610 And, if we were to change to like these stripe-y pants, the sunglasses, 84 00:04:16,610 --> 00:04:20,100 the yolo hat, and the purple shirt. 85 00:04:22,840 --> 00:04:24,720 Boom, everything updates. 86 00:04:24,720 --> 00:04:26,350 So, that is awesome. 87 00:04:26,350 --> 00:04:30,440 We need to add some messages in though, that tell the user what's going on. 88 00:04:30,440 --> 00:04:31,510 Lets do that in the next video.