1
00:00:02,830 --> 00:00:09,850
So in this lesson, we are going to be providing an option to load the sheet data and also create a

2
00:00:09,850 --> 00:00:15,720
shareable Web URL that the user can just simply share as a Web URL.

3
00:00:16,180 --> 00:00:19,760
So if it doesn't have an ID, then it's going to give us an opportunity to load the ID.

4
00:00:20,020 --> 00:00:24,970
So there's quite a few conditions that we still want to add in to this application before we complete

5
00:00:24,970 --> 00:00:25,810
the functionality.

6
00:00:26,380 --> 00:00:29,860
But we are going to have the option to load Web URL.

7
00:00:30,190 --> 00:00:38,140
So depending on what the sheet ID is, you can enter in and you can create different sheet IDs and load

8
00:00:38,290 --> 00:00:39,250
them here.

9
00:00:39,430 --> 00:00:44,290
And then when you go to the Web page, it will load the sheet contents there.

10
00:00:44,500 --> 00:00:52,570
So this will load in within the array, the word list, whatever words we've got from the first column

11
00:00:52,570 --> 00:00:53,400
of the array.

12
00:00:53,710 --> 00:01:00,010
In addition as well, if we have spaces because we only want to load single words, then if we have

13
00:01:00,010 --> 00:01:04,630
spaces, the array that we're going to be producing is going to split the words.

14
00:01:04,640 --> 00:01:10,120
So if there's multiple words that's going to split them by the spaces and then load those into our word

15
00:01:10,130 --> 00:01:14,090
list and then once we're ready to start the game, we can click start game.

16
00:01:14,290 --> 00:01:16,210
It also produces a shareable link.

17
00:01:16,390 --> 00:01:21,160
So if you want to share any of these wordlist links, we can share those.

18
00:01:21,190 --> 00:01:25,880
There's also a clickable link so that we can see that particular wordlist being loaded.

19
00:01:26,470 --> 00:01:27,460
This one loaded.

20
00:01:27,580 --> 00:01:33,610
And what it's doing is it's taking the ID from the request, your URL, and it's automatically loading

21
00:01:33,610 --> 00:01:36,150
and also loading out as the shared ID link.

22
00:01:36,430 --> 00:01:39,310
So we still need to make some updates to the way it's being displayed.

23
00:01:39,460 --> 00:01:44,800
But we do have the start game functionality where it's taking the value and this is coming directly

24
00:01:44,980 --> 00:01:51,730
from the spreadsheet list and outputting it so it's not scrambled yet and also providing a place for

25
00:01:51,730 --> 00:01:53,950
the user to type in their guess.

26
00:01:54,190 --> 00:01:58,660
And then there's a button for the user to be able to click and check their guess.

27
00:02:00,290 --> 00:02:04,910
So that's what we're doing in this lesson, we're going to continue to build out this word scramble

28
00:02:04,910 --> 00:02:09,920
game from scratch where it's generating word lists coming from spreadsheets.

29
00:02:11,780 --> 00:02:17,690
Let's go ahead and update the application so that we can launch and create a game out of it.

30
00:02:17,700 --> 00:02:19,550
So we've got a few different word lists.

31
00:02:19,550 --> 00:02:24,710
We've got the basic default word lists, and then we're also able to load word lists from the sheet.

32
00:02:24,920 --> 00:02:30,980
You can also provide the option to load multiple wordless so you don't have to clear out what's already

33
00:02:30,980 --> 00:02:35,750
contained within the my word so you can remove out my words length.

34
00:02:35,900 --> 00:02:40,220
And then that will allow you to concatenate to the my words array.

35
00:02:40,250 --> 00:02:42,590
So always adding and updating to that array.

36
00:02:42,860 --> 00:02:46,850
But for this example, what I'm going to do is I'm just going to keep it at whatever the current word

37
00:02:46,850 --> 00:02:53,540
list is and load all of the sheet data and have all of the words there.

38
00:02:53,840 --> 00:03:01,010
So I also want to have an option that if the user wants to create a Web you URL that they can share,

39
00:03:01,160 --> 00:03:08,800
that it takes in this ID value and we're going to populate that ID value into the Web URL.

40
00:03:09,020 --> 00:03:14,390
So we want to pick up that information from the window location.

41
00:03:14,390 --> 00:03:17,990
So let's create a variable.

42
00:03:17,990 --> 00:03:26,270
We can call it Qs for query string and then using the window object, take the location property and

43
00:03:26,870 --> 00:03:28,160
do a search

44
00:03:31,070 --> 00:03:31,660
value.

45
00:03:32,360 --> 00:03:39,410
And for now we'll just look at what we get back for the Qs and if there is an ID there.

46
00:03:39,420 --> 00:03:41,870
So this is the request value there.

47
00:03:41,880 --> 00:03:47,860
So we've got the questionmark I.D. and then we can use this and get the parameters from there.

48
00:03:48,230 --> 00:03:50,000
So let's get the euro.

49
00:03:50,910 --> 00:04:00,750
Parameters, paradigms, and create a new you URL, search parameters, object, and let's use the content

50
00:04:00,750 --> 00:04:12,210
from the Qs object and let's hope put those parameters into the console and now we can search and we

51
00:04:12,210 --> 00:04:14,370
can get anything that's contained for ID.

52
00:04:14,640 --> 00:04:19,130
So we have the options to use the different Eurorail search parameters methods.

53
00:04:19,440 --> 00:04:26,950
So let's get the one by with the name of ID and that's going to return back to ID value.

54
00:04:27,270 --> 00:04:33,380
So if there is a value, so if it does exist, if it does, if it doesn't exist.

55
00:04:33,380 --> 00:04:36,460
So if we do something like ID X, we're going to return back now.

56
00:04:37,860 --> 00:04:45,540
So that way we can have instead of populating the sheet value with the ID, we can have a condition

57
00:04:45,540 --> 00:04:52,320
whenever the page loads that will populate it and we're going to update the value of ID.

58
00:04:52,350 --> 00:04:54,200
So let's have a condition.

59
00:04:55,230 --> 00:05:04,260
And if we do load, so if it does exist, then we'll set the value of ID and this we're going to make

60
00:05:04,260 --> 00:05:10,980
it so that we can manipulate it and set the value of ID to whatever we've got there.

61
00:05:12,240 --> 00:05:24,270
So if it does exist, then it will load the ID and let's also remove out the default ID.

62
00:05:25,020 --> 00:05:29,850
So whenever it loads it automatically now is populating from here.

63
00:05:30,000 --> 00:05:33,990
And this is also going to provide us a way to share the ID as well.

64
00:05:34,710 --> 00:05:41,820
So if we do have an ID and if we have populated it, then let's update and add to the output area.

65
00:05:42,030 --> 00:05:44,300
We're going to spend that this is the website URL.

66
00:05:45,330 --> 00:05:55,080
So if we output the window location and this is a window object, again is similar to the document object

67
00:05:55,200 --> 00:06:02,430
where it just is a giant JSON file with a lot of different objects and properties and values and also

68
00:06:02,430 --> 00:06:03,920
methods that we can access.

69
00:06:04,230 --> 00:06:12,960
So selecting the window location and if we do that, HSF, that's going to return back the port that

70
00:06:12,960 --> 00:06:13,710
we're using.

71
00:06:14,370 --> 00:06:22,620
So if we add those together where we've got the ID with the value, so let's construct our temporary

72
00:06:22,620 --> 00:06:29,550
URL and add to it so we've got the questionmark ID and ID equals.

73
00:06:30,730 --> 00:06:39,370
And then whatever we've got for the idee value and I'm going to output that on the page as a shareable

74
00:06:40,420 --> 00:06:46,120
link you URL, so let's create an object.

75
00:06:46,130 --> 00:06:48,820
So document create elements.

76
00:06:48,820 --> 00:06:54,880
And the element that we're creating is going to be an input and then within the input.

77
00:06:56,530 --> 00:07:05,890
So my URL is going to have a value of whatever we've got for the temp euro and then also let's spend

78
00:07:05,890 --> 00:07:15,220
it to the page that way if the user wants to, if if there is an address, they can easily select that.

79
00:07:16,240 --> 00:07:18,580
So let's take the material object.

80
00:07:20,290 --> 00:07:28,810
And at an event listener and that listener is going to be when we make a selection and we just want

81
00:07:28,810 --> 00:07:36,880
to make a selection of all of the content, so we'll take the mural and then run the select method,

82
00:07:37,180 --> 00:07:39,190
and that's going to select all of the content.

83
00:07:40,240 --> 00:07:43,000
And actually, I'm going to update this to on focus.

84
00:07:45,520 --> 00:07:50,050
So whatever we focus, it's going to make a selection of the input content.

85
00:07:52,090 --> 00:07:58,300
And then the user can easily copy and paste it into their Web browser or share the link.

86
00:08:00,990 --> 00:08:07,050
And that's only going to show up if we have an ID, if we don't have an ID, is just going to load whatever

87
00:08:07,050 --> 00:08:08,400
the default ID is.

88
00:08:08,940 --> 00:08:11,760
So that gives us a way to have a shareable link.

89
00:08:11,970 --> 00:08:18,960
And also another way to add the link that in case we do load an ID, that we want to create that shareable

90
00:08:18,960 --> 00:08:19,200
link.

91
00:08:19,230 --> 00:08:24,510
So if the user comes in and they all have separate ID, that it's going to generate the sharable link.

92
00:08:24,640 --> 00:08:30,210
So we're going to put all of this information into a function that when we're creating the input and

93
00:08:30,210 --> 00:08:33,890
adding it to the page, that this is going to be the shareable link.

94
00:08:33,900 --> 00:08:40,620
So we've got the value that's coming in from the temporal so we can pass in and create a function that

95
00:08:40,620 --> 00:08:50,970
can handle passing in those values, create, share, link and whatever the euro is going to be.

96
00:08:51,660 --> 00:08:53,340
And actually, I'm not going to use your URL.

97
00:08:54,570 --> 00:08:56,730
I'll just use link value.

98
00:08:59,260 --> 00:09:07,900
And so this way we can pass it into a function and we can also generate a link whenever the user loads

99
00:09:07,900 --> 00:09:13,150
a new ID and that way that we can have the links in a number of ways, we can display the links.

100
00:09:13,960 --> 00:09:23,080
So let's pass the value of the temp, your URL into the shareable link, and then that way we're going

101
00:09:23,080 --> 00:09:27,190
to append it to the output, whatever we've got for the link value.

102
00:09:28,090 --> 00:09:34,420
And let's just double check to make sure that it is still working and this is only going to work if

103
00:09:34,420 --> 00:09:37,110
we have ID is equal to.

104
00:09:37,870 --> 00:09:41,240
And we also need to update and construct that my URL.

105
00:09:41,950 --> 00:09:45,310
So that was the other part that we created a new URL.

106
00:09:46,240 --> 00:09:49,340
So let's add the option for creating the link.

107
00:09:50,260 --> 00:09:55,240
So now it's creating the link and we also want to create the links whenever we do the share of the URL.

108
00:09:55,570 --> 00:10:02,640
And also alternatively, we also want to have an anchor link as well.

109
00:10:03,190 --> 00:10:13,480
So using the document create element, let's create an anchor tag and then within the anchor link.

110
00:10:15,600 --> 00:10:17,670
The text content.

111
00:10:20,010 --> 00:10:30,900
Is going to see Sharable Link and then for the anchor link, let's set that attribute.

112
00:10:32,960 --> 00:10:38,300
And the attribute that we're setting is going to be the rough, so the location of where it's going,

113
00:10:38,300 --> 00:10:40,400
so it's going to whatever the link value is.

114
00:10:40,880 --> 00:10:43,810
And let's also append this to the page as well.

115
00:10:44,480 --> 00:10:45,940
So we're going to spend it above.

116
00:10:46,430 --> 00:10:53,360
So that way we can add multiple shareable links and then just whatever the you are all for the sharable

117
00:10:53,360 --> 00:10:53,650
link.

118
00:10:54,680 --> 00:10:56,320
And that actually should be link value.

119
00:10:56,450 --> 00:10:59,780
So not to my URL because we're passing in the object.

120
00:11:00,020 --> 00:11:02,330
So let's double check and see what happened here.

121
00:11:02,450 --> 00:11:08,210
So we did get the shareable link and it does look like we've got the link, but then we're adding it

122
00:11:08,210 --> 00:11:08,600
again.

123
00:11:08,630 --> 00:11:11,300
So let's make an update and make a fix to this.

124
00:11:11,540 --> 00:11:17,960
And the reason for that and we can see more information about what the window object is.

125
00:11:18,110 --> 00:11:23,690
So let's take away the ATRA location from the console and that's going to return back the object.

126
00:11:23,990 --> 00:11:29,210
And within the object when we're using the HSF, that's going to include the full path with the request

127
00:11:29,210 --> 00:11:30,350
variable of the ID.

128
00:11:30,650 --> 00:11:36,980
And whereas we're pulling out the request variable from the search value just over here and returning

129
00:11:36,980 --> 00:11:37,850
back to the ID.

130
00:11:38,060 --> 00:11:40,720
So the one that we actually want to use is the origin.

131
00:11:40,730 --> 00:11:45,040
So let's update that and set that to or origin.

132
00:11:45,770 --> 00:11:53,150
And that should just return back the clean value and allow us to check for the ID and add the ID and

133
00:11:53,150 --> 00:11:53,860
properly.

134
00:11:53,870 --> 00:11:55,250
So let's see what happens now.

135
00:11:55,490 --> 00:12:01,070
Now it looks like we're just getting that object and when we click it, we're able to go to the page

136
00:12:01,070 --> 00:12:03,570
and it's displaying that value.

137
00:12:04,190 --> 00:12:08,990
Let's also make this text a whole lot smaller as it's awfully large.

138
00:12:09,710 --> 00:12:11,590
We can add in a styling to it.

139
00:12:11,750 --> 00:12:21,860
So doing a class list and add and just create a class called my link and then within the styling.

140
00:12:24,050 --> 00:12:30,410
So this way we can add the font size and we'll make it really small.

141
00:12:31,080 --> 00:12:36,010
So zero point six M so it's readable on the page.

142
00:12:36,710 --> 00:12:47,990
We'll also text a line so we can center text line and set it to display and do a block display so it

143
00:12:47,990 --> 00:12:54,410
takes up the full with shareable link and we'll remove the text decoration.

144
00:12:54,890 --> 00:13:01,610
So remove it underlined and will actually do the text decoration to none.

145
00:13:02,420 --> 00:13:11,850
So I will remove the underlined and also add in some padding around it and margin at the bottom.

146
00:13:12,740 --> 00:13:15,990
So let's separate it out and just slight margin at the bottom.

147
00:13:17,300 --> 00:13:23,120
So there we've got the shareable link and what we want to do is have the option to reproduce this.

148
00:13:23,120 --> 00:13:28,250
So whenever it gets clicked, it's going to reproduce more links, append them to the bottom.

149
00:13:29,030 --> 00:13:33,050
So we want to have that option that when we click the button, we create another share link.

150
00:13:34,960 --> 00:13:37,070
So let's do that as well.

151
00:13:37,990 --> 00:13:44,080
And in this case, maybe what we want to do is just pass through the I.D. So instead of passing in the

152
00:13:44,080 --> 00:13:51,670
temporary URL, we just want to pass through that I.D. So let's grab that.

153
00:13:51,670 --> 00:13:57,790
And when we create the share link within the function, we're just going to pick up whatever the ID

154
00:13:57,790 --> 00:13:58,090
is.

155
00:14:00,820 --> 00:14:10,750
And just call it my ID and that will update, and that way we can generate the temporary URL and that

156
00:14:10,750 --> 00:14:12,960
can all be done with just the ID.

157
00:14:13,900 --> 00:14:19,710
And that way we're not using because we're reusing a global variable within here.

158
00:14:20,080 --> 00:14:28,090
So let's update that and set the ID that way and I'll update the name of this to be whatever the link

159
00:14:28,090 --> 00:14:28,660
value is.

160
00:14:28,870 --> 00:14:30,840
So that way, once again, it's working.

161
00:14:31,360 --> 00:14:39,910
Let's updates and add in an attribute that we're going to set the target of the hyperlink to open up

162
00:14:39,910 --> 00:14:40,890
on a new page.

163
00:14:42,940 --> 00:14:45,740
So it's the underscore blank for the target.

164
00:14:46,690 --> 00:14:52,060
So now when we click it, it open up in a new tab and we want to load another.

165
00:14:52,270 --> 00:14:59,350
You are another shareable euro and actually going to remove that margin at the bottom as we don't exactly

166
00:14:59,350 --> 00:14:59,890
need that.

167
00:15:01,030 --> 00:15:08,920
And for the input, I'll add in a margin at the bottom of Tempest's, so that will provide some separation

168
00:15:08,920 --> 00:15:09,620
for the input.

169
00:15:10,720 --> 00:15:17,080
So now that we've got the shareable link, we want to be able to create our shareable link as well whenever

170
00:15:17,080 --> 00:15:19,320
we properly load the ID.

171
00:15:19,990 --> 00:15:26,110
So that will just create a shareable link whenever we make a fetch request and we've got a successful

172
00:15:26,350 --> 00:15:32,920
Futch request that will create shareable links and adding it to the bottom of the page.

173
00:15:34,730 --> 00:15:40,700
So that way we can take that link and we can share it as needed to others, and that also lists the

174
00:15:40,700 --> 00:15:46,460
words one other thing that I did want to take care of, and that was that we do want to have a word

175
00:15:46,460 --> 00:15:46,940
scramble.

176
00:15:46,940 --> 00:15:48,260
So we just want one word.

177
00:15:48,260 --> 00:15:49,670
We don't want multiple words.

178
00:15:50,000 --> 00:15:56,810
So the option here is that as we listen through the word list, we want to separate out the words and

179
00:15:56,810 --> 00:15:57,950
have them independently.

180
00:15:58,310 --> 00:16:03,920
So whatever we're getting and returning back, we want to split it by the spaces.

181
00:16:04,730 --> 00:16:09,680
So whatever we got for temp, we want to split the values.

182
00:16:10,100 --> 00:16:17,390
So let's create a temporary holder variable and then we're going to take temp and use the string method

183
00:16:18,500 --> 00:16:21,410
to split them into an array.

184
00:16:21,650 --> 00:16:28,300
So split it by space and then let's push into the array, the holder content.

185
00:16:29,480 --> 00:16:30,500
So let's see what happens.

186
00:16:30,740 --> 00:16:36,290
So now, instead of having separate words, we were able to slice them.

187
00:16:36,560 --> 00:16:39,950
And so let's take a second look and see what we've got here.

188
00:16:40,160 --> 00:16:44,870
And in the output, it looks like we've got extra spaces, but we don't have those spaces within the

189
00:16:44,870 --> 00:16:45,500
WORDLIST.

190
00:16:45,710 --> 00:16:51,740
So when we load it and we take a look at the array, what's happening is that it's adding in the arrays

191
00:16:51,740 --> 00:16:52,570
into the arrays.

192
00:16:52,570 --> 00:16:56,180
So we're creating multiple arrays within the array and that's not exactly what we want.

193
00:16:56,400 --> 00:16:58,310
There's a quick and easy solution to this.

194
00:16:58,490 --> 00:17:04,820
So add the three dots in and that's going to add in the array items properly into your array.

195
00:17:04,850 --> 00:17:07,530
So now we've got a list of all of the words.

196
00:17:07,530 --> 00:17:14,470
So all of the different words that are available within the first column, so separated out.

197
00:17:14,600 --> 00:17:19,730
So even if we have spaces, it's going to add in those spaces and create that word list that we've been

198
00:17:19,730 --> 00:17:20,170
after.

199
00:17:20,390 --> 00:17:24,150
So single words and now we're ready to create the gameplay.

200
00:17:24,830 --> 00:17:29,080
So once we load this, we want to show the start button.

201
00:17:29,510 --> 00:17:32,860
So let's create the start button for the game.

202
00:17:32,900 --> 00:17:36,170
So document and create elements.

203
00:17:36,200 --> 00:17:39,770
The element that we're creating is just a button object.

204
00:17:40,280 --> 00:17:44,130
And then with the start button, let's add that.

205
00:17:44,870 --> 00:17:45,830
So start button.

206
00:17:46,640 --> 00:17:48,900
And I want to add that under the input.

207
00:17:50,750 --> 00:17:58,580
So where we're appending to the sheet, we're spending to the button and then afterwards we want to

208
00:17:58,580 --> 00:18:01,770
output and append the start button.

209
00:18:01,790 --> 00:18:06,130
And what we're going to do first off, is we're going to disable the start button.

210
00:18:06,140 --> 00:18:08,950
So we're going to do a display, none of the start button.

211
00:18:09,590 --> 00:18:11,240
So there's our start button.

212
00:18:11,420 --> 00:18:12,680
No content in it yet.

213
00:18:13,070 --> 00:18:21,460
So take the start button and let's add some text content to the button start game.

214
00:18:23,390 --> 00:18:28,190
So we've got our start game button and add it to the page.

215
00:18:28,910 --> 00:18:35,420
And then whenever we hit the start button, let's add an event listener to the start button and listening

216
00:18:35,420 --> 00:18:36,560
for the click event.

217
00:18:37,340 --> 00:18:44,480
And that's just going to run the function to start the game and then the whole start game function we

218
00:18:44,480 --> 00:18:46,490
can do down here at the end.

219
00:18:47,300 --> 00:18:54,700
And this is just going to take one of the words from the list and present the word in a scrambled format.

220
00:18:55,490 --> 00:19:03,670
So let's create a start game so that when whatever we click the start button ready to start the game.

221
00:19:04,490 --> 00:19:09,610
So we have an option to load the sheet by it or just use whatever the default words are.

222
00:19:10,370 --> 00:19:13,430
And this is going to provide us the list of words.

223
00:19:13,610 --> 00:19:15,680
And then we're also ready to start the game.

224
00:19:16,430 --> 00:19:17,750
And there's our words.

225
00:19:17,750 --> 00:19:19,790
So let's scramble the letters.

226
00:19:20,970 --> 00:19:27,660
So let's go back into the JavaScript and we want to have a game area, so let's have that game area

227
00:19:28,860 --> 00:19:35,400
and we'll just create a device for that and give it a class of game area so that we can select and we

228
00:19:35,400 --> 00:19:40,730
can launch the game within this area and as well we can separate output and height that output area.

229
00:19:41,100 --> 00:19:44,030
So within the console, create a game area.

230
00:19:44,400 --> 00:19:50,820
And this is going to be using the document query selector, selecting the element with a class of the

231
00:19:50,820 --> 00:19:51,670
game area.

232
00:19:52,050 --> 00:19:55,440
So that will select it from the page and allow us to use it.

233
00:19:55,710 --> 00:20:02,460
When we click and we start the game, we want to take the output and update its style.

234
00:20:05,280 --> 00:20:09,210
To display and set out to the display on.

235
00:20:11,910 --> 00:20:19,980
So when we start the game, it's going to do a display, none, if we lowered the sheet data that will

236
00:20:19,980 --> 00:20:23,640
give us the wordlist that we want if we start the game.

237
00:20:23,670 --> 00:20:25,380
So just go to display none.

238
00:20:31,690 --> 00:20:35,440
And we're logout the value of the bywords.

239
00:20:41,640 --> 00:20:45,150
And we'll do a check to see if my words.

240
00:20:46,700 --> 00:20:55,490
Length, and if it's less than or equal to zero, that's going to mean that the game is over because

241
00:20:55,490 --> 00:21:00,530
we don't have any more words within the wordlist, so just type in game over.

242
00:21:01,160 --> 00:21:06,100
And if the game isn't over, then that means that the game is in play.

243
00:21:17,720 --> 00:21:25,820
And I'm going to create a global game object that we can use and for this global global game object,

244
00:21:26,600 --> 00:21:29,660
so it will have whatever the selected word is.

245
00:21:29,960 --> 00:21:35,420
So currently it's is going to be blank and this is just going to populate the selected word.

246
00:21:39,060 --> 00:21:45,420
And also the scramble word value, so just adding in some placeholders within this game object.

247
00:21:48,110 --> 00:21:57,230
And let's do one four words left and right now, that's zero, and we'll populate this information when

248
00:21:57,230 --> 00:21:58,210
we start the game.

249
00:22:02,110 --> 00:22:03,910
So once we start the game.

250
00:22:07,940 --> 00:22:13,040
We're going to take the game, select and take the my words.

251
00:22:14,940 --> 00:22:21,660
And using the shift method, because this is going to be an array, we can remove out the first word

252
00:22:21,810 --> 00:22:28,950
within the list and add it into our gameplay area and then also we can calculate the number of words

253
00:22:28,950 --> 00:22:29,370
left.

254
00:22:29,940 --> 00:22:32,670
So that will just be coming from the my words length.

255
00:22:37,220 --> 00:22:43,760
And so we can show the user how many words are left and then what we also want to do is we want to scramble

256
00:22:43,760 --> 00:22:45,320
the letters of the words.

257
00:22:45,980 --> 00:22:50,650
So let's create the scramble of this word.

258
00:22:50,990 --> 00:22:54,280
So we need to track the the correct word.

259
00:22:54,560 --> 00:23:00,980
And then we also need to track whatever the scrambled version of the word is and we'll create a function

260
00:23:00,980 --> 00:23:01,520
for it.

261
00:23:01,570 --> 00:23:02,540
We call it Sautter.

262
00:23:02,990 --> 00:23:08,070
And this is going to take in the game word and that's contained within the game select.

263
00:23:08,450 --> 00:23:11,360
So this will scramble the content of the word.

264
00:23:17,280 --> 00:23:19,170
And then within the game area.

265
00:23:26,940 --> 00:23:30,960
And within the game area, you can do this with JavaScript or you can have.

266
00:23:40,720 --> 00:23:46,030
I'll call it word output, so that's where we're going to put the scrambled word and then also will

267
00:23:46,030 --> 00:23:50,380
have an input type and equal not to text.

268
00:23:57,900 --> 00:23:59,610
And then also that side on a button.

269
00:24:04,040 --> 00:24:11,000
And have a guess area, so now the user can show that, see the word, they can enter in their guess

270
00:24:11,120 --> 00:24:14,630
and then they can click the guests to check to see if they've got the right word.

271
00:24:15,260 --> 00:24:18,310
So selecting the content.

272
00:24:18,890 --> 00:24:24,920
So we've got the game area object and let's take the game area.

273
00:24:26,780 --> 00:24:35,720
And using query selector, we're going to select the first div there that's available and then update

274
00:24:35,720 --> 00:24:41,330
the text content of the div to have the game, the selected word.

275
00:24:43,130 --> 00:24:47,740
So Head Start game and we don't have a function sautter yet.

276
00:24:53,160 --> 00:24:58,200
And for right now, they'll just return back the word so it's not going to scrambled up and we can handle

277
00:24:58,200 --> 00:25:04,830
that later on, so we start the game provides us the word that we're scrambling.

278
00:25:13,950 --> 00:25:18,960
And we actually should update this list of single words within our default list.

279
00:25:21,850 --> 00:25:25,810
So that was why we're throwing an error there with the extra spacing.

280
00:25:28,490 --> 00:25:30,630
So we can have an option to start the game.

281
00:25:31,100 --> 00:25:36,980
That's the word this is where the user enters in the word and then they click the button to check if

282
00:25:36,980 --> 00:25:38,270
they've got the correct word.

283
00:25:45,080 --> 00:25:48,500
And let's update and apply some styling to these elements.

284
00:25:50,370 --> 00:25:57,480
And we do a text online source, center the text and make a font size, so this will be too easy for

285
00:25:57,480 --> 00:26:00,560
the font size start game.

286
00:26:00,570 --> 00:26:05,970
So there's our scrambled word and then for the game area input.

287
00:26:07,450 --> 00:26:24,540
So game area input will do a larger font size of one point to see what that looks like and then also

288
00:26:24,540 --> 00:26:26,180
for the game area itself.

289
00:26:26,700 --> 00:26:29,760
And we're still going to do some more styling to clean it up.

290
00:26:30,900 --> 00:26:33,030
It can set a background color.

291
00:26:36,840 --> 00:26:38,430
And in some padding.

292
00:26:41,320 --> 00:26:42,730
And also border.

293
00:26:47,920 --> 00:26:54,380
And you could apply whatever styling, so start the game and it shows the interface.

294
00:26:54,760 --> 00:26:57,820
So right off the bat we should hide the game area.

295
00:26:58,990 --> 00:26:59,710
So the game.

296
00:27:02,370 --> 00:27:10,590
Area object, apply style and display is equal to none, and so when we start the game that we actually

297
00:27:10,590 --> 00:27:11,700
want to see this.

298
00:27:12,090 --> 00:27:18,990
So we're going to when we click the start game button will set this to block.

299
00:27:21,360 --> 00:27:27,630
So start the game that shows the scrambled word we're going to scramble in the next lesson and then

300
00:27:27,630 --> 00:27:31,590
allows the user to input and have a guess at to whatever the word is.

301
00:27:32,220 --> 00:27:40,560
So coming up next, let's output's and update this application to wrap up and create the full gameplay.

302
00:27:40,950 --> 00:27:43,670
So it's still a few bugs and a few tweaks that need to be made.

303
00:27:44,880 --> 00:27:52,350
The task for this lesson are to use the window object and get the Web you URL as well as the request

304
00:27:52,350 --> 00:27:57,990
values and then use them within the JavaScript code in order to set the ID in the web.

305
00:27:57,990 --> 00:28:02,610
You URL link also linked to the game without using a specific sheet.

306
00:28:02,760 --> 00:28:08,400
So provide the user the option to update the sheet content, provide an option for the sheet for new

307
00:28:08,400 --> 00:28:14,250
wordlist and have that sheet load in different word lists depending on what the sheet ID is.

308
00:28:14,430 --> 00:28:17,960
Also create the game area where we've got the functionality.

309
00:28:18,120 --> 00:28:25,470
So we've got the different fields within the web page where we have our ability to add in the scrambled

310
00:28:25,470 --> 00:28:31,110
word also to provide the user an area where they can enter in their guess and then a button that the

311
00:28:31,110 --> 00:28:34,050
user can click in order to track their guess.

312
00:28:35,230 --> 00:28:40,720
So add all of that into your project and you're going to be ready to move on to the next lesson, we're

313
00:28:40,720 --> 00:28:42,340
going to finalize the gameplay.