1
00:00:00,460 --> 00:00:05,530
We need to start out with a little bit of styling and then we're going to build out all of our alphabet

2
00:00:05,530 --> 00:00:11,860
letters on our page as well for the user to be able to interact with and then add that interaction with

3
00:00:11,860 --> 00:00:12,520
JavaScript.

4
00:00:12,940 --> 00:00:15,990
So creating a class of letter, we're going to be adding these.

5
00:00:16,120 --> 00:00:22,000
So these are going to be the ones that are going to be selectable by the player in order to select all

6
00:00:22,000 --> 00:00:23,420
the different letters of the alphabet.

7
00:00:23,740 --> 00:00:31,860
So adding in a little bit of padding in around the corners, a bit with a border radius do margin left.

8
00:00:31,900 --> 00:00:33,650
So there's the left spacing between them.

9
00:00:33,910 --> 00:00:39,560
We can have a cursor, so a pointer so we know it's clickable and make a font size.

10
00:00:39,580 --> 00:00:40,990
How about one point five M?

11
00:00:41,320 --> 00:00:43,900
Now let's also do one four, letter two.

12
00:00:44,140 --> 00:00:46,060
So this is where the solution is.

13
00:00:46,060 --> 00:00:52,100
So we want to display these as in line block as well with a parting of five picks.

14
00:00:52,120 --> 00:00:57,160
So keep it the same and margin left can also be Tempest's so that one can be the same as well.

15
00:00:57,160 --> 00:00:59,340
And then font size to make.

16
00:00:59,350 --> 00:01:00,290
These are really big.

17
00:01:00,550 --> 00:01:01,660
So this is the solution.

18
00:01:01,840 --> 00:01:04,050
So once we've added that in, we click start.

19
00:01:04,720 --> 00:01:09,090
So refresh clicks start and then you can see all of those letters are there.

20
00:01:09,130 --> 00:01:12,010
We've got all of the spacing for the word JavaScript.

21
00:01:12,490 --> 00:01:19,900
Next, let's build out our alphabet so we know for an alphabet we're looking at twenty six letters.

22
00:01:20,290 --> 00:01:28,390
So setting a value of X and looping through while X is less than twenty six, let's increment X by one.

23
00:01:29,830 --> 00:01:32,740
So we've got our loop and this is where we're going to create all of the letters.

24
00:01:34,820 --> 00:01:36,050
And let tump.

25
00:01:37,500 --> 00:01:44,950
So using the string object, we can construct a string and using from character code.

26
00:01:44,970 --> 00:01:51,210
So this returns back a string created from a specified sequence of unique Unicode values.

27
00:01:51,570 --> 00:01:59,640
And with the Unicode values, if we start at 65 and we add X to them, that's going to give us all of

28
00:01:59,640 --> 00:02:00,930
the letters that we need.

29
00:02:01,620 --> 00:02:06,660
And you can see that when we like it out into the console under temp, you see, that's gives us all

30
00:02:06,660 --> 00:02:07,800
of the letters and notes.

31
00:02:07,800 --> 00:02:08,820
They are uppercase.

32
00:02:08,820 --> 00:02:12,820
If you want the lowercase ones, you can start at 91, I believe.

33
00:02:13,050 --> 00:02:15,180
So sixty five plus twenty six.

34
00:02:15,330 --> 00:02:17,190
And that will give you the lowercase letters.

35
00:02:17,370 --> 00:02:20,640
So all of the characters are there within the character codes to do.

36
00:02:20,670 --> 00:02:27,090
Now that we've got the letters we need to create some divs just like we did before, and using document

37
00:02:27,090 --> 00:02:32,070
to create elements and the elements that we want to create our device some more divs.

38
00:02:32,640 --> 00:02:35,550
And we're going to set some properties to these debates that we're creating.

39
00:02:35,700 --> 00:02:37,460
It's taking the class list.

40
00:02:37,470 --> 00:02:39,570
We're going to add a class of letter.

41
00:02:39,580 --> 00:02:42,300
So it's a new class that we created up in the style.

42
00:02:42,330 --> 00:02:50,040
Also, let's set my letter value for this one to be whatever the value of Tempest's so that we know

43
00:02:50,040 --> 00:02:52,680
how what the letter is within the object.

44
00:02:52,680 --> 00:02:56,870
And we're going to update the inner HTML to be whatever the value of Tempest's.

45
00:02:57,090 --> 00:03:04,920
And then lastly, we're going to output it as append child and we're going to pen that div to our main

46
00:03:04,920 --> 00:03:06,750
container to see what that looks like.

47
00:03:06,760 --> 00:03:07,590
So a start.

48
00:03:07,890 --> 00:03:10,760
And there's all of our letters and there's our solution.

49
00:03:10,770 --> 00:03:12,990
And we also need to hide that start button.

50
00:03:13,000 --> 00:03:19,350
So it's another thing that we should do is where we should apply a style to that button where we're

51
00:03:19,350 --> 00:03:20,640
going to play display.

52
00:03:20,640 --> 00:03:21,340
None to that.

53
00:03:21,660 --> 00:03:29,310
So once we click the button where it hit the button, object use style display and equal that to none

54
00:03:29,340 --> 00:03:33,030
so we can hide the button because we don't need it anymore and we don't want it interfering with our

55
00:03:33,030 --> 00:03:33,510
gameplay.

56
00:03:34,080 --> 00:03:36,960
So we hit start and we've got our option.

57
00:03:36,960 --> 00:03:39,380
There are a solution and we've got all the letters.

58
00:03:39,750 --> 00:03:44,570
Next we need to make them clickable and then check those values back in to the solution.

59
00:03:44,880 --> 00:03:49,050
So that's still to come in the upcoming lessons and this should actually be three.

60
00:03:49,320 --> 00:03:55,920
So coming up next, we are going to make these buttons, these letters clickable and apply all the functionality

61
00:03:55,950 --> 00:03:56,490
that we need.