We need to start out with a little bit of styling and then we're going to build out all of our alphabet
letters on our page as well for the user to be able to interact with and then add that interaction with
JavaScript.
So creating a class of letter, we're going to be adding these.
So these are going to be the ones that are going to be selectable by the player in order to select all
the different letters of the alphabet.
So adding in a little bit of padding in around the corners, a bit with a border radius do margin left.
So there's the left spacing between them.
We can have a cursor, so a pointer so we know it's clickable and make a font size.
How about one point five M?
Now let's also do one four, letter two.
So this is where the solution is.
So we want to display these as in line block as well with a parting of five picks.
So keep it the same and margin left can also be Tempest's so that one can be the same as well.
And then font size to make.
These are really big.
So this is the solution.
So once we've added that in, we click start.
So refresh clicks start and then you can see all of those letters are there.
We've got all of the spacing for the word JavaScript.
Next, let's build out our alphabet so we know for an alphabet we're looking at twenty six letters.
So setting a value of X and looping through while X is less than twenty six, let's increment X by one.
So we've got our loop and this is where we're going to create all of the letters.
And let tump.
So using the string object, we can construct a string and using from character code.
So this returns back a string created from a specified sequence of unique Unicode values.
And with the Unicode values, if we start at 65 and we add X to them, that's going to give us all of
the letters that we need.
And you can see that when we like it out into the console under temp, you see, that's gives us all
of the letters and notes.
They are uppercase.
If you want the lowercase ones, you can start at 91, I believe.
So sixty five plus twenty six.
And that will give you the lowercase letters.
So all of the characters are there within the character codes to do.
Now that we've got the letters we need to create some divs just like we did before, and using document
to create elements and the elements that we want to create our device some more divs.
And we're going to set some properties to these debates that we're creating.
It's taking the class list.
We're going to add a class of letter.
So it's a new class that we created up in the style.
Also, let's set my letter value for this one to be whatever the value of Tempest's so that we know
how what the letter is within the object.
And we're going to update the inner HTML to be whatever the value of Tempest's.
And then lastly, we're going to output it as append child and we're going to pen that div to our main
container to see what that looks like.
So a start.
And there's all of our letters and there's our solution.
And we also need to hide that start button.
So it's another thing that we should do is where we should apply a style to that button where we're
going to play display.
None to that.
So once we click the button where it hit the button, object use style display and equal that to none
so we can hide the button because we don't need it anymore and we don't want it interfering with our
gameplay.
So we hit start and we've got our option.
There are a solution and we've got all the letters.
Next we need to make them clickable and then check those values back in to the solution.
So that's still to come in the upcoming lessons and this should actually be three.
So coming up next, we are going to make these buttons, these letters clickable and apply all the functionality
that we need.