So the first part of our project, we want to be able to load a wordlist and load dynamically load it
from any Google sheet, so going through the Google sheet have got one here with the word list.
And it's just going to be taking the values from the first column.
Even if you have spaces, we've got a way to debug and to avoid any of the spaces.
But by default, most of your lists, the word lists that you want to use for this project, they should
not have different.
They should not have spaces in general.
So once you create your sheet, go ahead and share the sheet.
So published to the web and once it's published to the Web, you can grab the ID of the sheet and go
into the project and paste the ID and that will load the word list from the sheet.
And even if you were to create a brand new sheet.
So let's create another spreadsheet.
And let's create some words.
Go ahead and publish this one.
So just publishing the sheet as a Web page and that's going to allow us to share via the ID so now we
can select the ID added into the application.
And that's going to load the new word list of content, taking the content from the first row and first
column and putting it into a word list.
And at this point, then we could use the array within our application.
So this provides users a way to load their own word lists into your application.
And that's the project that we're going to be creating.
So let's get started.
So we want to be able to load a list of words dynamically that are or phrases that are coming from a
Google sheet.
So allowing the user either to select our default list or go over and share their sheet and load their
sheet data into our JavaScript application for the word scramble.
So going over to the Google and you need to have a Google account for this.
So go ahead and log into your Google account.
Go to drive dot Google dot com forward, slash drive for my drive.
And from there you can create new Google sheet.
So create the sheet and give the sheet a name.
So whatever name that you want to use.
I'm going to just create it as word list and then within the sheet.
So just using whatever the first sheet is, you can name it or you can just leave it just as its default
of sheet.
I usually like to board the first.
Roll as it's going to be used for the header when we share the sheet information so JavaScript projects
and then enter in some phrases that you want to use.
So HTML and let's do one more.
So that's going to give us a list of five possible phrases that we can use within our application.
So we want to have the option to be able to load that just by using the ID from the sheet and load the
content dynamically into the application.
So let's go ahead and do to file and publish to the Web.
So under the file option published to the web and this will actually share our web, our sheet, and
you can find out more about it at support dot Google dot com forward slash docs.
So more information about publishing the file and how that works and you can select either the entire
document or the sheet.
So in this case, we're just going to use the first sheet.
Select, publish and hit, OK, and what this is going to do is it's going to give you a Web, your
URL.
You're welcome to try the Web, you URL to copy the Web, you URL and try it within the browser.
So that lists out the contents of your sheet and we are going to be using the JSON content, we can
also do a comma separated of the values.
And copy that and paste that in and what that will do is that will allow us to provide a link to download
it as a CSFI.
So that's not exactly what we want because we want to be able to access it via the Web.
And the same thing for the PDF for the tab separated values.
So we want to actually have it as a Web page, and that's why we're sharing it as a Web page.
So save that.
And once you've got it shared to the Web, just make sure that it is published, that you do have an
active Web URL that you can access it with and then go back into the Google sheet and copy out in the
you are all of the sheet up at the top.
So for it where it says docs dot Google dot com forward slash spreadsheets for slash D and then this
ID number.
So grab that number from the sheet, open up your editor and I've just got a new JS file.
We've called it pro three and it just got a basic JavaScript shell.
So let's add that ID value into the sheet.
So with just the characters and I'm going to wrap do a code wrap so that we can see all of the code.
So once we have the ID, we're ready to make our connection to connect to the Google ID and get the
sheet data.
So the URL that we're going to use, it's going to be forward slash spreadsheets, dot Google, dot
com forward slash feeds, forward slash list, and then using that ID and forge one forward slash public
values and then alt is adjacent.
So this way this will create a web URL that we can use in order to make the fetch request and return
back the content.
So for now, let's put the Web URL into the project.
And we can minimize this, so if we click this link, it's going to bring us over to where we've got
the sheets and now we just want to extract out the rows of content so that we can use this content within
our Web project.
And if you want, you can also copy and paste this into a linked program.
So we've got Jason Lente.
And within the validator, it's going to make the Java JSON object a lot more readable so that you can
go through and you can easily pick out the contents that you want to use.
So we do have the total results.
So we've got the total results of five.
So we do have some information there that we can use.
And within each one of them, we've got value.
So we've got the title and under the title we've got type text and the text content that we want to
use.
So now it's up to us to make a fetch request and loop through all of the results.
So all of the entry items that we have within the feed and output the content into an array that we
can then use within our JavaScript.
So it's within the entry object.
So let's create our fetch request and adding in button on the page and we'll also create an input.
And actually we're going to do this all with JavaScript so that we get some good JavaScript practice.
So let's create the button using the document, create elements and the element that we want to create
is going to be a button.
And then within the button, add in some text content and you can say load sheet by idee and.
Also, we need to have an input area.
And I'll just call that sheet ID, so using the document create element and the element that we're creating
is going to be an input and for the sheet ID, let's set an attribute and the attribute is going to
be text type for the input.
So just adding that in.
And then we also want to add it to the page so we can add it in.
We can create a basic container to add the content into.
I'll give it a name of output and we can select that with the JavaScript and then add our newly created
elements into that.
So using documents and query selector, let's select the element with a class of output and then now
let's put it all together where we're going to add to output.
And first will upend the sheet ID object.
So that's just the input field and then also to output, let's append the button.
So that gives us an option to add in the ID load sheet by ID.
And now let's add an event listener.
So add event listener to the button click.
And so whenever the button gets clicked, we're creating the interaction for loading the content and
we want to make our fetch request here.
So for right now, let's just do a quick console message and we'll get the content of sheet ID.
So whatever the value is, and we'll output that into the console.
So whatever that value is and this is going to this should be the sheet ID that we want to make the
request to.
And by default, what I'll do is I'll add in our default sheet as the value, for an example.
So let's take the sheet ID and set its value and its value is going to be equal to ID.
Also, let's play a little bit of styling to the input as so we've got a longer width.
Of one hundred percent and we'll do a display and not in line, we'll do a display block so it gets
its own light and maybe we only want to do about 80 percent and also to censor it, we can do a center
auto and also for the button, let's do the same thing and we can actually take the button object and
apply the same styling properties to it.
So that way that gets centered and we have an option to load the sheet ID and I just want to make sure
that we can see the full content and for the input itself, I can update the font size so I can make
the font size fairly small.
And actually even smaller than that, so that depending on whatever size screen they have, that we
make sure the font size fits in there and also we can do a text, a line, and we can central line the
text.
So that's when it's pasted.
It's nice and neat within the input field.
So let's go back to our sheet and when we click the button or outputting the sheet content.
So that means that we're ready to make our fetch request.
So let's do that here as well.
We're going to make the Futch request, so using Futch and we actually want to update whatever the you
are ellis' at this point so we can set up the Eurail within that event.
And that way we're going to get whatever the fresh sheet ID value is.
And that will build the you are all that we can make the futch requestor, so that builds that you are
all there.
So using fetch to the you are all.
Let's make then and we'll make our request and return back the request as Jason object and let me separate
this and the next promise is going to get back the data.
The suit, get back to Jason data and then I would put that into the console.
And we should also disable the ability to click the button, so take the button.
And set the disabled to be true, so that way, once we click it, we can't keep clicking the button
and we want to load the feed content and the different entries within the feed content.
So we want to load that into an object that we can loop through.
So, Jason Feed and this is also a good use for the console log so that you can see.
So either way, if you're going to the JSON lint or if you're just out putting it into the console,
you can quite easily get through the and get to the content that you want within these complex objects.
And the one that we do want is going to be an array.
And you see that this one has the length there.
So it's got a length of five.
So we want to get the entry object so low to sheets and that gives us the array.
And now it's just a matter of going through the array and getting back the six dollar sign word.
So that's going to be the value that we want to pull back and we actually just want to get whatever
the first value here is.
So looking through the different options that we have here and we can also get the title value as well.
So within the title object, we can get the dollar sign T.
And that's treating this as a title, so if we had separate values here within the sheet.
And let's just double check to make sure that that's still going to be a title
and it's still getting back the first column of of words, so that's another option as well, that you
can get the title object so we can loop through and return back the title object, and that will allow
us to pick up the first.
Column within the role and quite easily return back the data.
So let's do that as well, where we create our temp array and that can just be whatever the temporary
that we want to use.
So we've got a few options there.
And actually this is going to be the one that we're going to use within the live data so we can have
a bunch of words here already.
So this can have serve as a default.
So just hollow world and JavaScript code so we can have that as our default array.
And if we do successfully make the request and when we return back data that we can populate out and
we can clear out the my words and set the length to zero and then we can update the contents of it as
we loop through the entries.
So let's do that as well.
And I'll just shorten that so it's a little bit shorter there.
And then we'll take the empty array.
And one of the things with their raise is that when you reassign it, it's still pointing to the same
array.
So even though that we've assigned Ente to the array, it just allowing us to shorten the value and
we could just as easily copy and paste this and do it this way as well.
So either way, works fine.
I usually do like to shorten it so it's a little bit easier to read and to loop through, but you can
just keep all of the property values within the notation as well.
And there's also the option to go with the bracket notation.
So either way, you're going to be returning back the same object value so you could change this to
feed and also do the entry to feed.
So this is optional.
Depending on how you want to return back the content, either one is going to return it back the same
way.
So once we loop through them will console, log out the elements and let's just take a look at what
we want to get.
So we're just going for the first column, which is also title.
And it's got the dollar sign T.
So add that into the bracket notation and dollar sign T, and that will return back the tax content.
So it returns back all of the rows of content.
So even if we were to add more rows.
And let's refresh that's going to add all of that in, so that's going to make it really easy to push
the content into the my words array and give us a dynamic list of words that we can use.
So selecting that element object and we'll push it in.
And we also want to check to make sure that the length of this is greater than zero before we added
into the array.
If it's not greater than zero, then we just want to skip it.
So that's in case we've got something like this where we've got an extra empty row and we load that.
And if you do have a space, what's happened here is that it's only going to return back the content
up until you have a space to also keep that in mind.
But if you do have a value in that role, then you will get everything in.
And here it's just going to type in rule number five for the title.
So it's going to add in a default value.
It's not just going to be blank.
So that's something to keep in mind.
You can as well get the word value and that will just pull that first word value out.
So that's the other option that you have.
So instead of going with the title.
And let's create a temporary element, so getting the elements and the sex word.
And I'll just keep it within the bracket notation and then the t value and then here will make sure
that it's larger and then we'll push that into the my word, sorry.
And then lastly, what we'll do is we'll logout what we've got for bywords.
So let's try that one more time.
So that gave us a list of the words.
And this way we avoided that word, says the row five.
So it just took the words.
And even though that we had a blank space there, it just took the words.
And this is actually going to be dependent on what the first column is.
So depending on what the first column heading is, it's going to change.
So if I change this to word one, it's actually not going to find anything for that.
So you have to be mindful of the fact that it's not going to be able to find anything for that.
So there's going to be nothing under the one.
So that one is a little bit more structured that if you do it that way, you do need to set and make
sure that your.
You need to be structured to make sure that you're headings are matching that, so in a way, it's easier
to just go with the title.
But again, this is up to you how you want to handle that.
And I'll just output both versions here within the example.
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,
the rule five so we can check to make sure that there is no Colen in the word.
So we'll have another condition here and within the console, like we do have quite a few string methods
that we can work with.
So let's check to see if temp includes and this is a built in method.
So we're just looking to see if it includes the colon.
So it's going to return back a boolean value, whether it includes that or not.
And in this case, it finds it as true.
So we can check to make sure that it's greater than zero and that it doesn't include the colon.
And that's another way that we can clean up the list that we're constructing.
So that way we're not forced to use whatever the first column heading is, and it creates a more dynamic
way to load the content.
So now they just need to add in that ID.
Also within the fetch request, we're going to add in a catch and the catch can serve as if we have
any errors.
With the fetch request, we can catch the errors.
So within the Futch request.
And this will, if we have any errors, it will catch the error and it's not going to change the my
words length and it will output into the console.
And we need to have this as an arrow format, as a function, so if by chance the user puts in an invalid
ID, so if their idea is not valid, it's just going to say the least, not loaded.
So throw an error, but it'll continue to allow us to run the application.
So also, let's output.
The list contents to the page so that before we begin the game, the user can see the list contents.
So as we're loading the list of items and we're looping through the entries.
Will create another element, and this can just be a div so document create elements, and this is going
to be where either we're going to load the list or are going to have our message.
So with an output append div and then well now within the div object.
Let's update the text content and I'll say let's not load it.
Using default list and what this will also do is once we press it and once either we've loaded it and
we can also provide an option to click the button, and then after we load, we can also provide an
option to click the button for the for the list.
And then as we loop through, we're going to upend the word.
To the list.
So let's create a span and document, create elements, and the element that we're going to create is
going to be a span and then the span we're just going to be appending to div.
The spin.
And this one, we're actually going to have to if we have a valid word, so let's add that in into this
condition and then within the span, let's add in the text content and we're going to equal the text
content to whatever the word is.
And then we'll just put a space there,
so when we load the sheet data, we get the content being output there and also maybe we want to wrap
around it or either that or we could, comma, separate out the the list.
So let's take the span out here and we'll add the span over here and then for the span content.
Let's take the contents of my words and use join in order to join them together, and we also have an
option to separate it out with a comma.
So let's see what that looks like.
So that will load the content and I'll actually add in a space as well, so it's easier to read.
So there's our word list that we're going to be using and then that's coming from the sheet.
So that's how you can let the user make a selection or either they're just going to be able to use the
default word list and we can as well output that value like this.
So either way, it's going to load the word list.
So in this case, it's it's actually loading the default word list.
So we need to move it back in to the function and then we can also have it within here.
So if we catch it, if there is an error, so if there is an error.
It's just going to use the default word list and we need to separate it out, so what it had done,
it had already loaded the word list.
So this is also a way that if you want to have multiple word lists, you can just load in more word
lists as needed.
And it's just going to continue to add in the spans.
So now that we've got the word list dynamically generating, we're ready to move on to the next part.
The task for this lesson is to log into your Google account to create a sheet publisher that's a Web
page and then connect to it with each request from your application.
So using the JSON and returning back to JSON data from the sheet, create the elements for the page
in order to do the button request and also an input where the user can add their sheet ID and then generate
array of words from the first column of data and create that within the array of your JavaScript code
so that it's ready to use for your application.
And this is going to provide a way for the user to be able to play a game, load some content that they
want from their own Google sheet list.