Right now, our aliens aren't very interesting.
They don't actually look like aliens, so this lesson, we're going to apply some styling and make them
look more interesting.
We already created an elements.
We called it alien.
Let's add in another another class.
We can call this AI.
So this one is position absolute as well, so that we can move it and position it.
We're needed.
Give it a width of 20 picks, border radius.
Want to make this round as it is an AI 25 percent and the color can be black and then height can also
be 20 picks and a lighter background color.
So it's the same class we're going to set an after value.
So using the content prop..
So this is going to add in a circle in AI and also wanted to add in a mouth as well.
So Muzo, create the styling for that and setting a height for it and positioning it.
Bottom 10 picks left 10 percent and the border is where it's going to get interesting because we'll
do a four pick border and do it DOTD White.
So it looks like teeth and the background color can be black as well.
So we're ready to add in all of those classes.
So going back to where we're creating the element where we're dynamically creating the element of alien,
we need to append both of the eyes as well as the mouth to it so we can use JavaScript in order to do
this.
So just as we created that element initially and gave it a class of random, we can also position so
we can create our first, I call it I won and using a document create element.
So just as we did with the d'Hiv, we're going to create a span in this case and taking I one class
list at the class of ice or adding an eye to it, and then we're going to make eye one style left.
And let's position this at 10 picks from the left and then taking the div append a child.
And the child that we're spending is I want to see how that looks.
So we refresh and now we've got one eye.
We need another eye.
So each alien should have two eyes.
So to I, too, and in this case, we just need to position it different, so instead of off, the left
would go off of the right so as to how that looks.
So now we've got aliens.
They've got kind of a face going on.
And we need to also add in the mouth that we created this the style for the most.
So just as we did the I set up object for the mouth.
So document create element in this can also be a spam mouth.
And using class list, we add the class of mouth to give it the right style to it and then taking the
div append child we can append the mouth to it.
So suit that looks like so refresh start game.
So now all of our aliens have a mouth and they're ready to move along the page.
And there's one other thing that I wanted to do before we conclude this lesson.
Add in a random color, so just create a quick function for that and random color.
So what this function will do is it will return back a random color.
And what we're returning back and I just see in the console that what we're doing.
So we're taking we're using math, JavaScript, math, random.
And as you can see, random generates this huge string.
And what we want to do is transform it into a string object and 16.
So that's going to be in a hex value.
And we know that with the colors there, hexadecimal values.
So that means that they can be numbers and digits up to ABCDE, PEF.
So we're grabbing our string value and now we just need the six characters from there.
So taking the substring is another JavaScript method.
We're going to return back only six of those characters.
So they're we're generating essentially randomly a color value.
And all we have to do is add the hash in front of that formula and that's going to return back a random
color.
So instead of having all of the aliens as blue, we can take div style background color and set a background
color using random color.
So now we can try that and you can see now each one of the aliens is going to have a different color.
So they're always going to have different colors randomly generated.
So you could have any number of colors displaying the aliens.
So ready to move on to the next lesson.
And this is a really useful, handy function where you can generate a hex color really easily using
JavaScript.
So go ahead and add this into your project.