1 00:00:00,060 --> 00:00:02,560 Right now, our aliens aren't very interesting. 2 00:00:02,580 --> 00:00:07,230 They don't actually look like aliens, so this lesson, we're going to apply some styling and make them 3 00:00:07,230 --> 00:00:08,440 look more interesting. 4 00:00:08,730 --> 00:00:10,170 We already created an elements. 5 00:00:10,170 --> 00:00:11,160 We called it alien. 6 00:00:11,460 --> 00:00:14,400 Let's add in another another class. 7 00:00:14,400 --> 00:00:15,600 We can call this AI. 8 00:00:16,380 --> 00:00:21,510 So this one is position absolute as well, so that we can move it and position it. 9 00:00:21,510 --> 00:00:22,050 We're needed. 10 00:00:22,470 --> 00:00:26,430 Give it a width of 20 picks, border radius. 11 00:00:26,440 --> 00:00:35,670 Want to make this round as it is an AI 25 percent and the color can be black and then height can also 12 00:00:35,670 --> 00:00:39,870 be 20 picks and a lighter background color. 13 00:00:40,470 --> 00:00:43,950 So it's the same class we're going to set an after value. 14 00:00:44,340 --> 00:00:46,590 So using the content prop.. 15 00:00:46,780 --> 00:00:53,630 So this is going to add in a circle in AI and also wanted to add in a mouth as well. 16 00:00:53,640 --> 00:00:58,890 So Muzo, create the styling for that and setting a height for it and positioning it. 17 00:00:58,890 --> 00:01:06,240 Bottom 10 picks left 10 percent and the border is where it's going to get interesting because we'll 18 00:01:06,240 --> 00:01:10,290 do a four pick border and do it DOTD White. 19 00:01:10,300 --> 00:01:14,260 So it looks like teeth and the background color can be black as well. 20 00:01:14,580 --> 00:01:16,990 So we're ready to add in all of those classes. 21 00:01:17,340 --> 00:01:23,340 So going back to where we're creating the element where we're dynamically creating the element of alien, 22 00:01:23,520 --> 00:01:30,480 we need to append both of the eyes as well as the mouth to it so we can use JavaScript in order to do 23 00:01:30,480 --> 00:01:30,780 this. 24 00:01:31,720 --> 00:01:41,680 So just as we created that element initially and gave it a class of random, we can also position so 25 00:01:41,680 --> 00:01:49,000 we can create our first, I call it I won and using a document create element. 26 00:01:49,960 --> 00:01:56,890 So just as we did with the d'Hiv, we're going to create a span in this case and taking I one class 27 00:01:56,890 --> 00:02:06,040 list at the class of ice or adding an eye to it, and then we're going to make eye one style left. 28 00:02:06,790 --> 00:02:14,500 And let's position this at 10 picks from the left and then taking the div append a child. 29 00:02:14,710 --> 00:02:18,610 And the child that we're spending is I want to see how that looks. 30 00:02:18,610 --> 00:02:21,240 So we refresh and now we've got one eye. 31 00:02:21,490 --> 00:02:22,440 We need another eye. 32 00:02:22,480 --> 00:02:24,790 So each alien should have two eyes. 33 00:02:25,900 --> 00:02:33,280 So to I, too, and in this case, we just need to position it different, so instead of off, the left 34 00:02:33,280 --> 00:02:36,940 would go off of the right so as to how that looks. 35 00:02:37,180 --> 00:02:38,470 So now we've got aliens. 36 00:02:38,890 --> 00:02:40,990 They've got kind of a face going on. 37 00:02:41,440 --> 00:02:46,150 And we need to also add in the mouth that we created this the style for the most. 38 00:02:46,720 --> 00:02:51,240 So just as we did the I set up object for the mouth. 39 00:02:51,250 --> 00:02:56,200 So document create element in this can also be a spam mouth. 40 00:02:56,410 --> 00:03:04,840 And using class list, we add the class of mouth to give it the right style to it and then taking the 41 00:03:04,840 --> 00:03:10,180 div append child we can append the mouth to it. 42 00:03:10,420 --> 00:03:12,910 So suit that looks like so refresh start game. 43 00:03:13,120 --> 00:03:18,790 So now all of our aliens have a mouth and they're ready to move along the page. 44 00:03:18,790 --> 00:03:22,390 And there's one other thing that I wanted to do before we conclude this lesson. 45 00:03:22,570 --> 00:03:28,400 Add in a random color, so just create a quick function for that and random color. 46 00:03:29,200 --> 00:03:32,620 So what this function will do is it will return back a random color. 47 00:03:32,750 --> 00:03:37,900 And what we're returning back and I just see in the console that what we're doing. 48 00:03:38,290 --> 00:03:42,580 So we're taking we're using math, JavaScript, math, random. 49 00:03:43,270 --> 00:03:46,960 And as you can see, random generates this huge string. 50 00:03:47,380 --> 00:03:53,520 And what we want to do is transform it into a string object and 16. 51 00:03:53,530 --> 00:03:55,360 So that's going to be in a hex value. 52 00:03:55,690 --> 00:04:00,030 And we know that with the colors there, hexadecimal values. 53 00:04:00,250 --> 00:04:05,800 So that means that they can be numbers and digits up to ABCDE, PEF. 54 00:04:06,250 --> 00:04:11,000 So we're grabbing our string value and now we just need the six characters from there. 55 00:04:11,140 --> 00:04:15,100 So taking the substring is another JavaScript method. 56 00:04:15,280 --> 00:04:18,040 We're going to return back only six of those characters. 57 00:04:18,400 --> 00:04:22,960 So they're we're generating essentially randomly a color value. 58 00:04:22,960 --> 00:04:28,510 And all we have to do is add the hash in front of that formula and that's going to return back a random 59 00:04:28,510 --> 00:04:28,920 color. 60 00:04:29,230 --> 00:04:38,440 So instead of having all of the aliens as blue, we can take div style background color and set a background 61 00:04:38,440 --> 00:04:40,100 color using random color. 62 00:04:40,720 --> 00:04:44,830 So now we can try that and you can see now each one of the aliens is going to have a different color. 63 00:04:45,080 --> 00:04:48,430 So they're always going to have different colors randomly generated. 64 00:04:48,520 --> 00:04:52,390 So you could have any number of colors displaying the aliens. 65 00:04:53,050 --> 00:04:54,850 So ready to move on to the next lesson. 66 00:04:54,970 --> 00:05:01,900 And this is a really useful, handy function where you can generate a hex color really easily using 67 00:05:01,900 --> 00:05:02,510 JavaScript. 68 00:05:02,920 --> 00:05:04,510 So go ahead and add this into your project.