1
00:00:00,490 --> 00:00:03,910
All right, I know what you're thinking, build the board already, so that's what we're going to do

2
00:00:03,910 --> 00:00:04,720
in this lesson.

3
00:00:04,840 --> 00:00:07,840
But before we do that, we need to output our solutions.

4
00:00:07,840 --> 00:00:09,100
So we've got a word.

5
00:00:09,280 --> 00:00:12,340
But this word is not within an array format.

6
00:00:12,490 --> 00:00:15,610
And as we can see when we hit start, it's just a string value.

7
00:00:15,880 --> 00:00:24,610
So before we conclude, we need to build this out within a string format so we can use the player object

8
00:00:24,910 --> 00:00:32,200
and we can use a value like solution, take the word that we've got as a string value and we're going

9
00:00:32,200 --> 00:00:34,410
to use the JavaScript method of split.

10
00:00:34,720 --> 00:00:41,170
So what split does is it splits a string object into an array of strings by separating the string into

11
00:00:41,170 --> 00:00:42,000
some strings.

12
00:00:42,370 --> 00:00:45,180
So we need to specify how we want to split it.

13
00:00:45,430 --> 00:00:50,740
So if you do the double quotes there without any space in there, if you add in a space that's going

14
00:00:50,740 --> 00:00:55,960
to split, depending on how many spaces are and we don't have any spaces, so we don't want to split

15
00:00:55,960 --> 00:01:01,720
by anything, we just want to split them all into separate each one of the characters into a separate

16
00:01:01,870 --> 00:01:03,420
value in the array.

17
00:01:03,730 --> 00:01:10,330
So outputting that instead of the word and updating the console output, we should now see an array

18
00:01:10,330 --> 00:01:18,430
object with all of the characters that are available from our randomly selected item from our array.

19
00:01:18,640 --> 00:01:25,600
And we can use this to loop through and show the player how many characters they need to solve.

20
00:01:25,930 --> 00:01:32,170
And it also will help us as we loop through each one of those and selecting the different values within

21
00:01:32,170 --> 00:01:32,660
the words.

22
00:01:33,460 --> 00:01:36,010
So now we're ready to build our board.

23
00:01:36,140 --> 00:01:37,920
That's what we're going to do as well.

24
00:01:38,350 --> 00:01:45,550
So create a function to build the board and this will kick off the function called build board.

25
00:01:45,680 --> 00:01:48,860
We're going to build out the visual part of our gameplay.

26
00:01:48,880 --> 00:01:58,030
So now that our value is within array format, we can iterate through that array so we can use for each.

27
00:01:59,340 --> 00:02:04,920
And iterating through each one of the items within that array, and these are all letters.

28
00:02:05,160 --> 00:02:11,610
So I would put it as a letter value and now we can console logout letter if you want.

29
00:02:12,360 --> 00:02:17,910
So you see that when I refresh and I hit start, you're going to see that we're outputting each one

30
00:02:17,910 --> 00:02:18,480
of those letters.

31
00:02:18,520 --> 00:02:22,050
So this is coming from that console message there on line thirty three.

32
00:02:22,470 --> 00:02:26,700
We want to use our JavaScript and create some device.

33
00:02:27,540 --> 00:02:32,340
So creating a div that we can add in those element values into the device.

34
00:02:32,370 --> 00:02:40,020
So using create elements method in JavaScript, what it does is creates a specified elements in the

35
00:02:40,020 --> 00:02:44,610
element that we want to create our device and then we can update that object.

36
00:02:44,620 --> 00:02:48,300
So with class list, we can add to that class list.

37
00:02:48,540 --> 00:02:53,840
So let's give it a class of letter and then we can update some of the success so we can output it.

38
00:02:54,090 --> 00:02:58,710
Actually, we're going to update it and we'll call it letter two and then the other ones will be letter.

39
00:02:58,980 --> 00:03:06,480
So the div and entire text of the div by default is just going to be underscore because we don't want

40
00:03:06,480 --> 00:03:09,630
to show the player the solution quite yet, of course.

41
00:03:10,080 --> 00:03:14,010
And within the div, we're going to add in a value for my letter.

42
00:03:14,190 --> 00:03:18,960
So we're adding in a hidden object value because this div is a giant object.

43
00:03:18,960 --> 00:03:24,060
So each one of the elements is an object and you can hide, add additional values into the object.

44
00:03:24,240 --> 00:03:29,130
So we're creating one called my letter and we're adding the value of letter into it.

45
00:03:29,130 --> 00:03:33,030
So we know when we select that element, we know what the value is.

46
00:03:33,030 --> 00:03:39,720
We can also get it from the entire text, of course, but this way we can see what the value is supposed

47
00:03:39,720 --> 00:03:45,090
to be and then selecting our output to we're going to attend a child.

48
00:03:45,240 --> 00:03:48,380
And the child that we're spending is that div that we've just created.

49
00:03:48,390 --> 00:03:50,310
And before we do that, this is an add.

50
00:03:50,310 --> 00:03:57,960
It's actually decided that it so we see we've got each one of the spaces, the underscores for the solution

51
00:03:57,960 --> 00:03:58,290
letter.

52
00:03:58,290 --> 00:04:01,990
And this one is course we can see it within our console, of course.

53
00:04:02,250 --> 00:04:03,960
So go ahead and add this into your project.

54
00:04:04,200 --> 00:04:09,050
And next, we need to do a little bit of success to make it output in line.

55
00:04:09,180 --> 00:04:12,180
So that's more visually represented for the player.

56
00:04:12,450 --> 00:04:18,000
And then coming up next as well, we need to create an alphabet list that the player can select from

57
00:04:18,000 --> 00:04:22,820
different letters, and then we're going to check them off to see if they're available within the solution.

58
00:04:22,980 --> 00:04:24,630
So all of that is still yet to come.