1
00:00:01,770 --> 00:00:07,620
So the first part of our project, we want to be able to load a wordlist and load dynamically load it

2
00:00:07,620 --> 00:00:13,020
from any Google sheet, so going through the Google sheet have got one here with the word list.

3
00:00:13,200 --> 00:00:16,620
And it's just going to be taking the values from the first column.

4
00:00:16,860 --> 00:00:21,450
Even if you have spaces, we've got a way to debug and to avoid any of the spaces.

5
00:00:21,630 --> 00:00:27,000
But by default, most of your lists, the word lists that you want to use for this project, they should

6
00:00:27,000 --> 00:00:28,380
not have different.

7
00:00:28,410 --> 00:00:30,290
They should not have spaces in general.

8
00:00:30,930 --> 00:00:34,860
So once you create your sheet, go ahead and share the sheet.

9
00:00:34,870 --> 00:00:42,630
So published to the web and once it's published to the Web, you can grab the ID of the sheet and go

10
00:00:42,630 --> 00:00:48,230
into the project and paste the ID and that will load the word list from the sheet.

11
00:00:48,540 --> 00:00:51,300
And even if you were to create a brand new sheet.

12
00:00:51,330 --> 00:00:53,310
So let's create another spreadsheet.

13
00:00:56,120 --> 00:00:59,150
And let's create some words.

14
00:01:00,560 --> 00:01:02,250
Go ahead and publish this one.

15
00:01:02,930 --> 00:01:09,410
So just publishing the sheet as a Web page and that's going to allow us to share via the ID so now we

16
00:01:09,410 --> 00:01:13,760
can select the ID added into the application.

17
00:01:14,090 --> 00:01:22,340
And that's going to load the new word list of content, taking the content from the first row and first

18
00:01:22,340 --> 00:01:25,100
column and putting it into a word list.

19
00:01:25,280 --> 00:01:28,700
And at this point, then we could use the array within our application.

20
00:01:29,740 --> 00:01:34,990
So this provides users a way to load their own word lists into your application.

21
00:01:36,320 --> 00:01:38,670
And that's the project that we're going to be creating.

22
00:01:38,690 --> 00:01:39,620
So let's get started.

23
00:01:40,520 --> 00:01:46,490
So we want to be able to load a list of words dynamically that are or phrases that are coming from a

24
00:01:46,490 --> 00:01:47,210
Google sheet.

25
00:01:47,520 --> 00:01:54,170
So allowing the user either to select our default list or go over and share their sheet and load their

26
00:01:54,170 --> 00:01:58,010
sheet data into our JavaScript application for the word scramble.

27
00:01:58,370 --> 00:02:02,750
So going over to the Google and you need to have a Google account for this.

28
00:02:03,050 --> 00:02:05,360
So go ahead and log into your Google account.

29
00:02:05,360 --> 00:02:09,980
Go to drive dot Google dot com forward, slash drive for my drive.

30
00:02:10,220 --> 00:02:13,100
And from there you can create new Google sheet.

31
00:02:13,550 --> 00:02:18,020
So create the sheet and give the sheet a name.

32
00:02:18,020 --> 00:02:20,010
So whatever name that you want to use.

33
00:02:20,030 --> 00:02:27,420
I'm going to just create it as word list and then within the sheet.

34
00:02:27,890 --> 00:02:33,410
So just using whatever the first sheet is, you can name it or you can just leave it just as its default

35
00:02:33,410 --> 00:02:34,040
of sheet.

36
00:02:34,280 --> 00:02:36,740
I usually like to board the first.

37
00:02:38,330 --> 00:02:46,610
Roll as it's going to be used for the header when we share the sheet information so JavaScript projects

38
00:02:46,610 --> 00:02:50,960
and then enter in some phrases that you want to use.

39
00:02:51,200 --> 00:02:54,660
So HTML and let's do one more.

40
00:02:54,980 --> 00:03:00,790
So that's going to give us a list of five possible phrases that we can use within our application.

41
00:03:01,160 --> 00:03:08,540
So we want to have the option to be able to load that just by using the ID from the sheet and load the

42
00:03:08,540 --> 00:03:11,160
content dynamically into the application.

43
00:03:11,510 --> 00:03:17,120
So let's go ahead and do to file and publish to the Web.

44
00:03:17,420 --> 00:03:26,120
So under the file option published to the web and this will actually share our web, our sheet, and

45
00:03:26,150 --> 00:03:30,200
you can find out more about it at support dot Google dot com forward slash docs.

46
00:03:30,470 --> 00:03:36,560
So more information about publishing the file and how that works and you can select either the entire

47
00:03:36,560 --> 00:03:37,610
document or the sheet.

48
00:03:37,660 --> 00:03:39,890
So in this case, we're just going to use the first sheet.

49
00:03:41,510 --> 00:03:47,700
Select, publish and hit, OK, and what this is going to do is it's going to give you a Web, your

50
00:03:47,750 --> 00:03:48,110
URL.

51
00:03:49,070 --> 00:03:55,130
You're welcome to try the Web, you URL to copy the Web, you URL and try it within the browser.

52
00:03:57,210 --> 00:04:04,410
So that lists out the contents of your sheet and we are going to be using the JSON content, we can

53
00:04:04,410 --> 00:04:07,170
also do a comma separated of the values.

54
00:04:09,980 --> 00:04:20,060
And copy that and paste that in and what that will do is that will allow us to provide a link to download

55
00:04:20,060 --> 00:04:21,110
it as a CSFI.

56
00:04:21,410 --> 00:04:26,240
So that's not exactly what we want because we want to be able to access it via the Web.

57
00:04:26,600 --> 00:04:29,810
And the same thing for the PDF for the tab separated values.

58
00:04:30,050 --> 00:04:34,160
So we want to actually have it as a Web page, and that's why we're sharing it as a Web page.

59
00:04:35,180 --> 00:04:36,340
So save that.

60
00:04:36,350 --> 00:04:41,000
And once you've got it shared to the Web, just make sure that it is published, that you do have an

61
00:04:41,000 --> 00:04:48,410
active Web URL that you can access it with and then go back into the Google sheet and copy out in the

62
00:04:48,920 --> 00:04:50,950
you are all of the sheet up at the top.

63
00:04:51,260 --> 00:04:58,490
So for it where it says docs dot Google dot com forward slash spreadsheets for slash D and then this

64
00:04:58,490 --> 00:04:59,270
ID number.

65
00:04:59,270 --> 00:05:05,320
So grab that number from the sheet, open up your editor and I've just got a new JS file.

66
00:05:05,330 --> 00:05:09,710
We've called it pro three and it just got a basic JavaScript shell.

67
00:05:10,160 --> 00:05:14,360
So let's add that ID value into the sheet.

68
00:05:14,370 --> 00:05:22,250
So with just the characters and I'm going to wrap do a code wrap so that we can see all of the code.

69
00:05:24,240 --> 00:05:33,080
So once we have the ID, we're ready to make our connection to connect to the Google ID and get the

70
00:05:33,080 --> 00:05:33,910
sheet data.

71
00:05:35,390 --> 00:05:41,660
So the URL that we're going to use, it's going to be forward slash spreadsheets, dot Google, dot

72
00:05:41,660 --> 00:05:48,050
com forward slash feeds, forward slash list, and then using that ID and forge one forward slash public

73
00:05:48,050 --> 00:05:50,790
values and then alt is adjacent.

74
00:05:51,050 --> 00:05:58,760
So this way this will create a web URL that we can use in order to make the fetch request and return

75
00:05:58,760 --> 00:05:59,680
back the content.

76
00:06:00,050 --> 00:06:03,770
So for now, let's put the Web URL into the project.

77
00:06:05,160 --> 00:06:10,170
And we can minimize this, so if we click this link, it's going to bring us over to where we've got

78
00:06:10,170 --> 00:06:17,760
the sheets and now we just want to extract out the rows of content so that we can use this content within

79
00:06:17,760 --> 00:06:19,490
our Web project.

80
00:06:20,100 --> 00:06:27,590
And if you want, you can also copy and paste this into a linked program.

81
00:06:29,760 --> 00:06:31,530
So we've got Jason Lente.

82
00:06:35,940 --> 00:06:43,080
And within the validator, it's going to make the Java JSON object a lot more readable so that you can

83
00:06:43,080 --> 00:06:47,110
go through and you can easily pick out the contents that you want to use.

84
00:06:47,520 --> 00:06:51,140
So we do have the total results.

85
00:06:51,150 --> 00:06:53,080
So we've got the total results of five.

86
00:06:53,370 --> 00:06:55,770
So we do have some information there that we can use.

87
00:06:56,190 --> 00:07:00,890
And within each one of them, we've got value.

88
00:07:01,230 --> 00:07:09,720
So we've got the title and under the title we've got type text and the text content that we want to

89
00:07:09,720 --> 00:07:10,030
use.

90
00:07:11,370 --> 00:07:17,600
So now it's up to us to make a fetch request and loop through all of the results.

91
00:07:17,610 --> 00:07:26,970
So all of the entry items that we have within the feed and output the content into an array that we

92
00:07:26,970 --> 00:07:29,160
can then use within our JavaScript.

93
00:07:29,190 --> 00:07:30,840
So it's within the entry object.

94
00:07:31,200 --> 00:07:39,750
So let's create our fetch request and adding in button on the page and we'll also create an input.

95
00:07:40,770 --> 00:07:45,240
And actually we're going to do this all with JavaScript so that we get some good JavaScript practice.

96
00:07:45,610 --> 00:07:52,800
So let's create the button using the document, create elements and the element that we want to create

97
00:07:52,800 --> 00:07:53,940
is going to be a button.

98
00:07:54,660 --> 00:08:05,790
And then within the button, add in some text content and you can say load sheet by idee and.

99
00:08:07,080 --> 00:08:09,120
Also, we need to have an input area.

100
00:08:12,190 --> 00:08:18,940
And I'll just call that sheet ID, so using the document create element and the element that we're creating

101
00:08:18,940 --> 00:08:28,300
is going to be an input and for the sheet ID, let's set an attribute and the attribute is going to

102
00:08:28,300 --> 00:08:30,790
be text type for the input.

103
00:08:30,970 --> 00:08:32,620
So just adding that in.

104
00:08:33,370 --> 00:08:37,390
And then we also want to add it to the page so we can add it in.

105
00:08:37,660 --> 00:08:41,370
We can create a basic container to add the content into.

106
00:08:41,800 --> 00:08:50,950
I'll give it a name of output and we can select that with the JavaScript and then add our newly created

107
00:08:50,950 --> 00:08:51,830
elements into that.

108
00:08:52,600 --> 00:09:01,380
So using documents and query selector, let's select the element with a class of output and then now

109
00:09:01,390 --> 00:09:04,900
let's put it all together where we're going to add to output.

110
00:09:08,190 --> 00:09:13,260
And first will upend the sheet ID object.

111
00:09:13,310 --> 00:09:18,870
So that's just the input field and then also to output, let's append the button.

112
00:09:21,750 --> 00:09:25,960
So that gives us an option to add in the ID load sheet by ID.

113
00:09:28,800 --> 00:09:30,810
And now let's add an event listener.

114
00:09:31,230 --> 00:09:35,370
So add event listener to the button click.

115
00:09:36,150 --> 00:09:41,880
And so whenever the button gets clicked, we're creating the interaction for loading the content and

116
00:09:41,880 --> 00:09:43,630
we want to make our fetch request here.

117
00:09:43,860 --> 00:09:50,640
So for right now, let's just do a quick console message and we'll get the content of sheet ID.

118
00:09:50,760 --> 00:09:54,090
So whatever the value is, and we'll output that into the console.

119
00:09:54,510 --> 00:10:00,000
So whatever that value is and this is going to this should be the sheet ID that we want to make the

120
00:10:00,000 --> 00:10:00,840
request to.

121
00:10:01,350 --> 00:10:08,040
And by default, what I'll do is I'll add in our default sheet as the value, for an example.

122
00:10:08,850 --> 00:10:14,910
So let's take the sheet ID and set its value and its value is going to be equal to ID.

123
00:10:16,020 --> 00:10:23,190
Also, let's play a little bit of styling to the input as so we've got a longer width.

124
00:10:24,680 --> 00:10:31,820
Of one hundred percent and we'll do a display and not in line, we'll do a display block so it gets

125
00:10:31,820 --> 00:10:42,200
its own light and maybe we only want to do about 80 percent and also to censor it, we can do a center

126
00:10:42,200 --> 00:10:51,950
auto and also for the button, let's do the same thing and we can actually take the button object and

127
00:10:51,950 --> 00:10:54,070
apply the same styling properties to it.

128
00:10:55,640 --> 00:11:02,300
So that way that gets centered and we have an option to load the sheet ID and I just want to make sure

129
00:11:02,300 --> 00:11:12,140
that we can see the full content and for the input itself, I can update the font size so I can make

130
00:11:12,140 --> 00:11:13,520
the font size fairly small.

131
00:11:17,030 --> 00:11:23,180
And actually even smaller than that, so that depending on whatever size screen they have, that we

132
00:11:23,180 --> 00:11:30,080
make sure the font size fits in there and also we can do a text, a line, and we can central line the

133
00:11:30,080 --> 00:11:30,500
text.

134
00:11:31,200 --> 00:11:32,680
So that's when it's pasted.

135
00:11:32,690 --> 00:11:34,580
It's nice and neat within the input field.

136
00:11:36,710 --> 00:11:42,430
So let's go back to our sheet and when we click the button or outputting the sheet content.

137
00:11:43,070 --> 00:11:45,740
So that means that we're ready to make our fetch request.

138
00:11:47,170 --> 00:11:49,370
So let's do that here as well.

139
00:11:49,390 --> 00:11:56,530
We're going to make the Futch request, so using Futch and we actually want to update whatever the you

140
00:11:56,530 --> 00:12:04,570
are ellis' at this point so we can set up the Eurail within that event.

141
00:12:05,800 --> 00:12:10,780
And that way we're going to get whatever the fresh sheet ID value is.

142
00:12:13,820 --> 00:12:19,310
And that will build the you are all that we can make the futch requestor, so that builds that you are

143
00:12:19,310 --> 00:12:19,720
all there.

144
00:12:20,360 --> 00:12:23,300
So using fetch to the you are all.

145
00:12:25,380 --> 00:12:38,940
Let's make then and we'll make our request and return back the request as Jason object and let me separate

146
00:12:38,940 --> 00:12:44,520
this and the next promise is going to get back the data.

147
00:12:44,700 --> 00:12:49,530
The suit, get back to Jason data and then I would put that into the console.

148
00:12:51,710 --> 00:12:56,810
And we should also disable the ability to click the button, so take the button.

149
00:13:01,090 --> 00:13:07,720
And set the disabled to be true, so that way, once we click it, we can't keep clicking the button

150
00:13:09,100 --> 00:13:16,510
and we want to load the feed content and the different entries within the feed content.

151
00:13:16,930 --> 00:13:21,280
So we want to load that into an object that we can loop through.

152
00:13:22,120 --> 00:13:28,960
So, Jason Feed and this is also a good use for the console log so that you can see.

153
00:13:28,990 --> 00:13:34,540
So either way, if you're going to the JSON lint or if you're just out putting it into the console,

154
00:13:35,230 --> 00:13:42,970
you can quite easily get through the and get to the content that you want within these complex objects.

155
00:13:43,330 --> 00:13:46,150
And the one that we do want is going to be an array.

156
00:13:46,510 --> 00:13:48,670
And you see that this one has the length there.

157
00:13:48,670 --> 00:13:49,980
So it's got a length of five.

158
00:13:50,410 --> 00:13:57,700
So we want to get the entry object so low to sheets and that gives us the array.

159
00:13:58,630 --> 00:14:04,930
And now it's just a matter of going through the array and getting back the six dollar sign word.

160
00:14:05,740 --> 00:14:11,020
So that's going to be the value that we want to pull back and we actually just want to get whatever

161
00:14:11,020 --> 00:14:12,820
the first value here is.

162
00:14:13,450 --> 00:14:22,800
So looking through the different options that we have here and we can also get the title value as well.

163
00:14:23,080 --> 00:14:27,100
So within the title object, we can get the dollar sign T.

164
00:14:29,130 --> 00:14:37,500
And that's treating this as a title, so if we had separate values here within the sheet.

165
00:14:40,250 --> 00:14:44,240
And let's just double check to make sure that that's still going to be a title

166
00:14:46,850 --> 00:14:52,490
and it's still getting back the first column of of words, so that's another option as well, that you

167
00:14:52,490 --> 00:14:59,030
can get the title object so we can loop through and return back the title object, and that will allow

168
00:14:59,030 --> 00:15:00,950
us to pick up the first.

169
00:15:02,080 --> 00:15:07,670
Column within the role and quite easily return back the data.

170
00:15:08,140 --> 00:15:17,020
So let's do that as well, where we create our temp array and that can just be whatever the temporary

171
00:15:17,020 --> 00:15:18,420
that we want to use.

172
00:15:19,000 --> 00:15:20,800
So we've got a few options there.

173
00:15:20,800 --> 00:15:28,240
And actually this is going to be the one that we're going to use within the live data so we can have

174
00:15:28,240 --> 00:15:30,100
a bunch of words here already.

175
00:15:30,790 --> 00:15:32,970
So this can have serve as a default.

176
00:15:32,980 --> 00:15:40,680
So just hollow world and JavaScript code so we can have that as our default array.

177
00:15:41,080 --> 00:15:47,350
And if we do successfully make the request and when we return back data that we can populate out and

178
00:15:47,350 --> 00:15:55,330
we can clear out the my words and set the length to zero and then we can update the contents of it as

179
00:15:55,330 --> 00:15:56,610
we loop through the entries.

180
00:15:57,250 --> 00:15:58,540
So let's do that as well.

181
00:15:59,980 --> 00:16:04,570
And I'll just shorten that so it's a little bit shorter there.

182
00:16:04,900 --> 00:16:06,940
And then we'll take the empty array.

183
00:16:08,320 --> 00:16:13,660
And one of the things with their raise is that when you reassign it, it's still pointing to the same

184
00:16:13,660 --> 00:16:14,080
array.

185
00:16:14,650 --> 00:16:21,220
So even though that we've assigned Ente to the array, it just allowing us to shorten the value and

186
00:16:21,220 --> 00:16:25,100
we could just as easily copy and paste this and do it this way as well.

187
00:16:25,540 --> 00:16:27,400
So either way, works fine.

188
00:16:27,560 --> 00:16:33,940
I usually do like to shorten it so it's a little bit easier to read and to loop through, but you can

189
00:16:33,940 --> 00:16:38,370
just keep all of the property values within the notation as well.

190
00:16:38,650 --> 00:16:41,360
And there's also the option to go with the bracket notation.

191
00:16:41,650 --> 00:16:47,350
So either way, you're going to be returning back the same object value so you could change this to

192
00:16:47,620 --> 00:16:52,340
feed and also do the entry to feed.

193
00:16:53,530 --> 00:16:54,640
So this is optional.

194
00:16:54,640 --> 00:16:59,860
Depending on how you want to return back the content, either one is going to return it back the same

195
00:16:59,860 --> 00:17:00,090
way.

196
00:17:01,750 --> 00:17:10,450
So once we loop through them will console, log out the elements and let's just take a look at what

197
00:17:10,450 --> 00:17:11,050
we want to get.

198
00:17:11,060 --> 00:17:16,030
So we're just going for the first column, which is also title.

199
00:17:17,110 --> 00:17:20,050
And it's got the dollar sign T.

200
00:17:23,350 --> 00:17:30,340
So add that into the bracket notation and dollar sign T, and that will return back the tax content.

201
00:17:32,790 --> 00:17:35,220
So it returns back all of the rows of content.

202
00:17:35,610 --> 00:17:38,490
So even if we were to add more rows.

203
00:17:42,770 --> 00:17:49,220
And let's refresh that's going to add all of that in, so that's going to make it really easy to push

204
00:17:49,220 --> 00:17:59,200
the content into the my words array and give us a dynamic list of words that we can use.

205
00:18:00,740 --> 00:18:04,870
So selecting that element object and we'll push it in.

206
00:18:05,210 --> 00:18:12,830
And we also want to check to make sure that the length of this is greater than zero before we added

207
00:18:12,830 --> 00:18:13,640
into the array.

208
00:18:13,820 --> 00:18:16,330
If it's not greater than zero, then we just want to skip it.

209
00:18:16,790 --> 00:18:26,930
So that's in case we've got something like this where we've got an extra empty row and we load that.

210
00:18:27,890 --> 00:18:33,410
And if you do have a space, what's happened here is that it's only going to return back the content

211
00:18:33,590 --> 00:18:36,560
up until you have a space to also keep that in mind.

212
00:18:36,560 --> 00:18:43,580
But if you do have a value in that role, then you will get everything in.

213
00:18:43,700 --> 00:18:49,300
And here it's just going to type in rule number five for the title.

214
00:18:50,510 --> 00:18:52,210
So it's going to add in a default value.

215
00:18:52,220 --> 00:18:53,480
It's not just going to be blank.

216
00:18:54,020 --> 00:18:55,460
So that's something to keep in mind.

217
00:18:55,610 --> 00:19:03,590
You can as well get the word value and that will just pull that first word value out.

218
00:19:04,370 --> 00:19:06,350
So that's the other option that you have.

219
00:19:06,530 --> 00:19:08,420
So instead of going with the title.

220
00:19:09,700 --> 00:19:16,420
And let's create a temporary element, so getting the elements and the sex word.

221
00:19:23,140 --> 00:19:31,930
And I'll just keep it within the bracket notation and then the t value and then here will make sure

222
00:19:31,930 --> 00:19:35,170
that it's larger and then we'll push that into the my word, sorry.

223
00:19:36,280 --> 00:19:40,570
And then lastly, what we'll do is we'll logout what we've got for bywords.

224
00:19:43,630 --> 00:19:44,850
So let's try that one more time.

225
00:19:46,450 --> 00:19:48,910
So that gave us a list of the words.

226
00:19:49,130 --> 00:19:52,440
And this way we avoided that word, says the row five.

227
00:19:52,840 --> 00:19:55,030
So it just took the words.

228
00:19:55,180 --> 00:19:59,080
And even though that we had a blank space there, it just took the words.

229
00:19:59,260 --> 00:20:03,970
And this is actually going to be dependent on what the first column is.

230
00:20:04,360 --> 00:20:09,300
So depending on what the first column heading is, it's going to change.

231
00:20:09,310 --> 00:20:13,490
So if I change this to word one, it's actually not going to find anything for that.

232
00:20:15,100 --> 00:20:19,780
So you have to be mindful of the fact that it's not going to be able to find anything for that.

233
00:20:19,780 --> 00:20:21,670
So there's going to be nothing under the one.

234
00:20:22,180 --> 00:20:28,180
So that one is a little bit more structured that if you do it that way, you do need to set and make

235
00:20:28,180 --> 00:20:29,470
sure that your.

236
00:20:31,570 --> 00:20:39,130
You need to be structured to make sure that you're headings are matching that, so in a way, it's easier

237
00:20:39,130 --> 00:20:40,510
to just go with the title.

238
00:20:41,590 --> 00:20:44,010
But again, this is up to you how you want to handle that.

239
00:20:44,650 --> 00:20:50,110
And I'll just output both versions here within the example.

240
00:20:50,890 --> 00:21:02,440
So we'll grab the title and we can check to see if the title and this way it's going to load in, unfortunately,

241
00:21:02,440 --> 00:21:09,580
the rule five so we can check to make sure that there is no Colen in the word.

242
00:21:18,780 --> 00:21:24,690
So we'll have another condition here and within the console, like we do have quite a few string methods

243
00:21:24,690 --> 00:21:25,570
that we can work with.

244
00:21:26,370 --> 00:21:33,780
So let's check to see if temp includes and this is a built in method.

245
00:21:33,900 --> 00:21:38,280
So we're just looking to see if it includes the colon.

246
00:21:38,430 --> 00:21:41,990
So it's going to return back a boolean value, whether it includes that or not.

247
00:21:42,570 --> 00:21:44,930
And in this case, it finds it as true.

248
00:21:45,810 --> 00:21:56,180
So we can check to make sure that it's greater than zero and that it doesn't include the colon.

249
00:21:58,110 --> 00:22:02,610
And that's another way that we can clean up the list that we're constructing.

250
00:22:02,850 --> 00:22:10,740
So that way we're not forced to use whatever the first column heading is, and it creates a more dynamic

251
00:22:10,740 --> 00:22:12,550
way to load the content.

252
00:22:12,900 --> 00:22:14,910
So now they just need to add in that ID.

253
00:22:15,630 --> 00:22:23,610
Also within the fetch request, we're going to add in a catch and the catch can serve as if we have

254
00:22:23,610 --> 00:22:24,360
any errors.

255
00:22:24,360 --> 00:22:27,480
With the fetch request, we can catch the errors.

256
00:22:31,870 --> 00:22:33,460
So within the Futch request.

257
00:22:35,310 --> 00:22:44,580
And this will, if we have any errors, it will catch the error and it's not going to change the my

258
00:22:44,580 --> 00:22:48,300
words length and it will output into the console.

259
00:22:54,810 --> 00:23:03,780
And we need to have this as an arrow format, as a function, so if by chance the user puts in an invalid

260
00:23:03,780 --> 00:23:10,040
ID, so if their idea is not valid, it's just going to say the least, not loaded.

261
00:23:11,010 --> 00:23:15,000
So throw an error, but it'll continue to allow us to run the application.

262
00:23:16,230 --> 00:23:18,120
So also, let's output.

263
00:23:21,000 --> 00:23:29,840
The list contents to the page so that before we begin the game, the user can see the list contents.

264
00:23:30,420 --> 00:23:34,590
So as we're loading the list of items and we're looping through the entries.

265
00:23:38,410 --> 00:23:46,330
Will create another element, and this can just be a div so document create elements, and this is going

266
00:23:46,330 --> 00:23:49,780
to be where either we're going to load the list or are going to have our message.

267
00:23:50,500 --> 00:23:59,080
So with an output append div and then well now within the div object.

268
00:24:01,130 --> 00:24:06,350
Let's update the text content and I'll say let's not load it.

269
00:24:14,640 --> 00:24:24,090
Using default list and what this will also do is once we press it and once either we've loaded it and

270
00:24:24,090 --> 00:24:36,060
we can also provide an option to click the button, and then after we load, we can also provide an

271
00:24:36,060 --> 00:24:39,630
option to click the button for the for the list.

272
00:24:41,010 --> 00:24:45,180
And then as we loop through, we're going to upend the word.

273
00:24:47,520 --> 00:24:48,630
To the list.

274
00:24:51,820 --> 00:25:00,220
So let's create a span and document, create elements, and the element that we're going to create is

275
00:25:00,220 --> 00:25:05,560
going to be a span and then the span we're just going to be appending to div.

276
00:25:08,850 --> 00:25:09,680
The spin.

277
00:25:13,170 --> 00:25:20,670
And this one, we're actually going to have to if we have a valid word, so let's add that in into this

278
00:25:20,670 --> 00:25:29,610
condition and then within the span, let's add in the text content and we're going to equal the text

279
00:25:29,610 --> 00:25:32,730
content to whatever the word is.

280
00:25:35,030 --> 00:25:37,090
And then we'll just put a space there,

281
00:25:40,160 --> 00:25:48,170
so when we load the sheet data, we get the content being output there and also maybe we want to wrap

282
00:25:48,170 --> 00:25:54,230
around it or either that or we could, comma, separate out the the list.

283
00:26:01,080 --> 00:26:10,050
So let's take the span out here and we'll add the span over here and then for the span content.

284
00:26:12,790 --> 00:26:22,150
Let's take the contents of my words and use join in order to join them together, and we also have an

285
00:26:22,150 --> 00:26:25,050
option to separate it out with a comma.

286
00:26:26,170 --> 00:26:27,400
So let's see what that looks like.

287
00:26:30,300 --> 00:26:38,170
So that will load the content and I'll actually add in a space as well, so it's easier to read.

288
00:26:38,670 --> 00:26:43,320
So there's our word list that we're going to be using and then that's coming from the sheet.

289
00:26:50,210 --> 00:26:56,270
So that's how you can let the user make a selection or either they're just going to be able to use the

290
00:26:56,270 --> 00:27:02,360
default word list and we can as well output that value like this.

291
00:27:02,660 --> 00:27:05,440
So either way, it's going to load the word list.

292
00:27:06,290 --> 00:27:09,260
So in this case, it's it's actually loading the default word list.

293
00:27:11,150 --> 00:27:16,210
So we need to move it back in to the function and then we can also have it within here.

294
00:27:16,520 --> 00:27:20,030
So if we catch it, if there is an error, so if there is an error.

295
00:27:23,300 --> 00:27:29,270
It's just going to use the default word list and we need to separate it out, so what it had done,

296
00:27:29,270 --> 00:27:31,080
it had already loaded the word list.

297
00:27:31,340 --> 00:27:37,850
So this is also a way that if you want to have multiple word lists, you can just load in more word

298
00:27:37,850 --> 00:27:38,900
lists as needed.

299
00:27:39,050 --> 00:27:41,200
And it's just going to continue to add in the spans.

300
00:27:42,860 --> 00:27:48,470
So now that we've got the word list dynamically generating, we're ready to move on to the next part.

301
00:27:49,970 --> 00:27:55,310
The task for this lesson is to log into your Google account to create a sheet publisher that's a Web

302
00:27:55,310 --> 00:28:00,030
page and then connect to it with each request from your application.

303
00:28:00,380 --> 00:28:07,250
So using the JSON and returning back to JSON data from the sheet, create the elements for the page

304
00:28:07,250 --> 00:28:13,790
in order to do the button request and also an input where the user can add their sheet ID and then generate

305
00:28:13,790 --> 00:28:20,930
array of words from the first column of data and create that within the array of your JavaScript code

306
00:28:21,050 --> 00:28:23,540
so that it's ready to use for your application.

307
00:28:23,720 --> 00:28:30,410
And this is going to provide a way for the user to be able to play a game, load some content that they

308
00:28:30,410 --> 00:28:32,720
want from their own Google sheet list.