So in this lesson, we are going to be providing an option to load the sheet data and also create a
shareable Web URL that the user can just simply share as a Web URL.
So if it doesn't have an ID, then it's going to give us an opportunity to load the ID.
So there's quite a few conditions that we still want to add in to this application before we complete
the functionality.
But we are going to have the option to load Web URL.
So depending on what the sheet ID is, you can enter in and you can create different sheet IDs and load
them here.
And then when you go to the Web page, it will load the sheet contents there.
So this will load in within the array, the word list, whatever words we've got from the first column
of the array.
In addition as well, if we have spaces because we only want to load single words, then if we have
spaces, the array that we're going to be producing is going to split the words.
So if there's multiple words that's going to split them by the spaces and then load those into our word
list and then once we're ready to start the game, we can click start game.
It also produces a shareable link.
So if you want to share any of these wordlist links, we can share those.
There's also a clickable link so that we can see that particular wordlist being loaded.
This one loaded.
And what it's doing is it's taking the ID from the request, your URL, and it's automatically loading
and also loading out as the shared ID link.
So we still need to make some updates to the way it's being displayed.
But we do have the start game functionality where it's taking the value and this is coming directly
from the spreadsheet list and outputting it so it's not scrambled yet and also providing a place for
the user to type in their guess.
And then there's a button for the user to be able to click and check their guess.
So that's what we're doing in this lesson, we're going to continue to build out this word scramble
game from scratch where it's generating word lists coming from spreadsheets.
Let's go ahead and update the application so that we can launch and create a game out of it.
So we've got a few different word lists.
We've got the basic default word lists, and then we're also able to load word lists from the sheet.
You can also provide the option to load multiple wordless so you don't have to clear out what's already
contained within the my word so you can remove out my words length.
And then that will allow you to concatenate to the my words array.
So always adding and updating to that array.
But for this example, what I'm going to do is I'm just going to keep it at whatever the current word
list is and load all of the sheet data and have all of the words there.
So I also want to have an option that if the user wants to create a Web you URL that they can share,
that it takes in this ID value and we're going to populate that ID value into the Web URL.
So we want to pick up that information from the window location.
So let's create a variable.
We can call it Qs for query string and then using the window object, take the location property and
do a search
value.
And for now we'll just look at what we get back for the Qs and if there is an ID there.
So this is the request value there.
So we've got the questionmark I.D. and then we can use this and get the parameters from there.
So let's get the euro.
Parameters, paradigms, and create a new you URL, search parameters, object, and let's use the content
from the Qs object and let's hope put those parameters into the console and now we can search and we
can get anything that's contained for ID.
So we have the options to use the different Eurorail search parameters methods.
So let's get the one by with the name of ID and that's going to return back to ID value.
So if there is a value, so if it does exist, if it does, if it doesn't exist.
So if we do something like ID X, we're going to return back now.
So that way we can have instead of populating the sheet value with the ID, we can have a condition
whenever the page loads that will populate it and we're going to update the value of ID.
So let's have a condition.
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
it so that we can manipulate it and set the value of ID to whatever we've got there.
So if it does exist, then it will load the ID and let's also remove out the default ID.
So whenever it loads it automatically now is populating from here.
And this is also going to provide us a way to share the ID as well.
So if we do have an ID and if we have populated it, then let's update and add to the output area.
We're going to spend that this is the website URL.
So if we output the window location and this is a window object, again is similar to the document object
where it just is a giant JSON file with a lot of different objects and properties and values and also
methods that we can access.
So selecting the window location and if we do that, HSF, that's going to return back the port that
we're using.
So if we add those together where we've got the ID with the value, so let's construct our temporary
URL and add to it so we've got the questionmark ID and ID equals.
And then whatever we've got for the idee value and I'm going to output that on the page as a shareable
link you URL, so let's create an object.
So document create elements.
And the element that we're creating is going to be an input and then within the input.
So my URL is going to have a value of whatever we've got for the temp euro and then also let's spend
it to the page that way if the user wants to, if if there is an address, they can easily select that.
So let's take the material object.
And at an event listener and that listener is going to be when we make a selection and we just want
to make a selection of all of the content, so we'll take the mural and then run the select method,
and that's going to select all of the content.
And actually, I'm going to update this to on focus.
So whatever we focus, it's going to make a selection of the input content.
And then the user can easily copy and paste it into their Web browser or share the link.
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
the default ID is.
So that gives us a way to have a shareable link.
And also another way to add the link that in case we do load an ID, that we want to create that shareable
link.
So if the user comes in and they all have separate ID, that it's going to generate the sharable link.
So we're going to put all of this information into a function that when we're creating the input and
adding it to the page, that this is going to be the shareable link.
So we've got the value that's coming in from the temporal so we can pass in and create a function that
can handle passing in those values, create, share, link and whatever the euro is going to be.
And actually, I'm not going to use your URL.
I'll just use link value.
And so this way we can pass it into a function and we can also generate a link whenever the user loads
a new ID and that way that we can have the links in a number of ways, we can display the links.
So let's pass the value of the temp, your URL into the shareable link, and then that way we're going
to append it to the output, whatever we've got for the link value.
And let's just double check to make sure that it is still working and this is only going to work if
we have ID is equal to.
And we also need to update and construct that my URL.
So that was the other part that we created a new URL.
So let's add the option for creating the link.
So now it's creating the link and we also want to create the links whenever we do the share of the URL.
And also alternatively, we also want to have an anchor link as well.
So using the document create element, let's create an anchor tag and then within the anchor link.
The text content.
Is going to see Sharable Link and then for the anchor link, let's set that attribute.
And the attribute that we're setting is going to be the rough, so the location of where it's going,
so it's going to whatever the link value is.
And let's also append this to the page as well.
So we're going to spend it above.
So that way we can add multiple shareable links and then just whatever the you are all for the sharable
link.
And that actually should be link value.
So not to my URL because we're passing in the object.
So let's double check and see what happened here.
So we did get the shareable link and it does look like we've got the link, but then we're adding it
again.
So let's make an update and make a fix to this.
And the reason for that and we can see more information about what the window object is.
So let's take away the ATRA location from the console and that's going to return back the object.
And within the object when we're using the HSF, that's going to include the full path with the request
variable of the ID.
And whereas we're pulling out the request variable from the search value just over here and returning
back to the ID.
So the one that we actually want to use is the origin.
So let's update that and set that to or origin.
And that should just return back the clean value and allow us to check for the ID and add the ID and
properly.
So let's see what happens now.
Now it looks like we're just getting that object and when we click it, we're able to go to the page
and it's displaying that value.
Let's also make this text a whole lot smaller as it's awfully large.
We can add in a styling to it.
So doing a class list and add and just create a class called my link and then within the styling.
So this way we can add the font size and we'll make it really small.
So zero point six M so it's readable on the page.
We'll also text a line so we can center text line and set it to display and do a block display so it
takes up the full with shareable link and we'll remove the text decoration.
So remove it underlined and will actually do the text decoration to none.
So I will remove the underlined and also add in some padding around it and margin at the bottom.
So let's separate it out and just slight margin at the bottom.
So there we've got the shareable link and what we want to do is have the option to reproduce this.
So whenever it gets clicked, it's going to reproduce more links, append them to the bottom.
So we want to have that option that when we click the button, we create another share link.
So let's do that as well.
And in this case, maybe what we want to do is just pass through the I.D. So instead of passing in the
temporary URL, we just want to pass through that I.D. So let's grab that.
And when we create the share link within the function, we're just going to pick up whatever the ID
is.
And just call it my ID and that will update, and that way we can generate the temporary URL and that
can all be done with just the ID.
And that way we're not using because we're reusing a global variable within here.
So let's update that and set the ID that way and I'll update the name of this to be whatever the link
value is.
So that way, once again, it's working.
Let's updates and add in an attribute that we're going to set the target of the hyperlink to open up
on a new page.
So it's the underscore blank for the target.
So now when we click it, it open up in a new tab and we want to load another.
You are another shareable euro and actually going to remove that margin at the bottom as we don't exactly
need that.
And for the input, I'll add in a margin at the bottom of Tempest's, so that will provide some separation
for the input.
So now that we've got the shareable link, we want to be able to create our shareable link as well whenever
we properly load the ID.
So that will just create a shareable link whenever we make a fetch request and we've got a successful
Futch request that will create shareable links and adding it to the bottom of the page.
So that way we can take that link and we can share it as needed to others, and that also lists the
words one other thing that I did want to take care of, and that was that we do want to have a word
scramble.
So we just want one word.
We don't want multiple words.
So the option here is that as we listen through the word list, we want to separate out the words and
have them independently.
So whatever we're getting and returning back, we want to split it by the spaces.
So whatever we got for temp, we want to split the values.
So let's create a temporary holder variable and then we're going to take temp and use the string method
to split them into an array.
So split it by space and then let's push into the array, the holder content.
So let's see what happens.
So now, instead of having separate words, we were able to slice them.
And so let's take a second look and see what we've got here.
And in the output, it looks like we've got extra spaces, but we don't have those spaces within the
WORDLIST.
So when we load it and we take a look at the array, what's happening is that it's adding in the arrays
into the arrays.
So we're creating multiple arrays within the array and that's not exactly what we want.
There's a quick and easy solution to this.
So add the three dots in and that's going to add in the array items properly into your array.
So now we've got a list of all of the words.
So all of the different words that are available within the first column, so separated out.
So even if we have spaces, it's going to add in those spaces and create that word list that we've been
after.
So single words and now we're ready to create the gameplay.
So once we load this, we want to show the start button.
So let's create the start button for the game.
So document and create elements.
The element that we're creating is just a button object.
And then with the start button, let's add that.
So start button.
And I want to add that under the input.
So where we're appending to the sheet, we're spending to the button and then afterwards we want to
output and append the start button.
And what we're going to do first off, is we're going to disable the start button.
So we're going to do a display, none of the start button.
So there's our start button.
No content in it yet.
So take the start button and let's add some text content to the button start game.
So we've got our start game button and add it to the page.
And then whenever we hit the start button, let's add an event listener to the start button and listening
for the click event.
And that's just going to run the function to start the game and then the whole start game function we
can do down here at the end.
And this is just going to take one of the words from the list and present the word in a scrambled format.
So let's create a start game so that when whatever we click the start button ready to start the game.
So we have an option to load the sheet by it or just use whatever the default words are.
And this is going to provide us the list of words.
And then we're also ready to start the game.
And there's our words.
So let's scramble the letters.
So let's go back into the JavaScript and we want to have a game area, so let's have that game area
and we'll just create a device for that and give it a class of game area so that we can select and we
can launch the game within this area and as well we can separate output and height that output area.
So within the console, create a game area.
And this is going to be using the document query selector, selecting the element with a class of the
game area.
So that will select it from the page and allow us to use it.
When we click and we start the game, we want to take the output and update its style.
To display and set out to the display on.
So when we start the game, it's going to do a display, none, if we lowered the sheet data that will
give us the wordlist that we want if we start the game.
So just go to display none.
And we're logout the value of the bywords.
And we'll do a check to see if my words.
Length, and if it's less than or equal to zero, that's going to mean that the game is over because
we don't have any more words within the wordlist, so just type in game over.
And if the game isn't over, then that means that the game is in play.
And I'm going to create a global game object that we can use and for this global global game object,
so it will have whatever the selected word is.
So currently it's is going to be blank and this is just going to populate the selected word.
And also the scramble word value, so just adding in some placeholders within this game object.
And let's do one four words left and right now, that's zero, and we'll populate this information when
we start the game.
So once we start the game.
We're going to take the game, select and take the my words.
And using the shift method, because this is going to be an array, we can remove out the first word
within the list and add it into our gameplay area and then also we can calculate the number of words
left.
So that will just be coming from the my words length.
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
the letters of the words.
So let's create the scramble of this word.
So we need to track the the correct word.
And then we also need to track whatever the scrambled version of the word is and we'll create a function
for it.
We call it Sautter.
And this is going to take in the game word and that's contained within the game select.
So this will scramble the content of the word.
And then within the game area.
And within the game area, you can do this with JavaScript or you can have.
I'll call it word output, so that's where we're going to put the scrambled word and then also will
have an input type and equal not to text.
And then also that side on a button.
And have a guess area, so now the user can show that, see the word, they can enter in their guess
and then they can click the guests to check to see if they've got the right word.
So selecting the content.
So we've got the game area object and let's take the game area.
And using query selector, we're going to select the first div there that's available and then update
the text content of the div to have the game, the selected word.
So Head Start game and we don't have a function sautter yet.
And for right now, they'll just return back the word so it's not going to scrambled up and we can handle
that later on, so we start the game provides us the word that we're scrambling.
And we actually should update this list of single words within our default list.
So that was why we're throwing an error there with the extra spacing.
So we can have an option to start the game.
That's the word this is where the user enters in the word and then they click the button to check if
they've got the correct word.
And let's update and apply some styling to these elements.
And we do a text online source, center the text and make a font size, so this will be too easy for
the font size start game.
So there's our scrambled word and then for the game area input.
So game area input will do a larger font size of one point to see what that looks like and then also
for the game area itself.
And we're still going to do some more styling to clean it up.
It can set a background color.
And in some padding.
And also border.
And you could apply whatever styling, so start the game and it shows the interface.
So right off the bat we should hide the game area.
So the game.
Area object, apply style and display is equal to none, and so when we start the game that we actually
want to see this.
So we're going to when we click the start game button will set this to block.
So start the game that shows the scrambled word we're going to scramble in the next lesson and then
allows the user to input and have a guess at to whatever the word is.
So coming up next, let's output's and update this application to wrap up and create the full gameplay.
So it's still a few bugs and a few tweaks that need to be made.
The task for this lesson are to use the window object and get the Web you URL as well as the request
values and then use them within the JavaScript code in order to set the ID in the web.
You URL link also linked to the game without using a specific sheet.
So provide the user the option to update the sheet content, provide an option for the sheet for new
wordlist and have that sheet load in different word lists depending on what the sheet ID is.
Also create the game area where we've got the functionality.
So we've got the different fields within the web page where we have our ability to add in the scrambled
word also to provide the user an area where they can enter in their guess and then a button that the
user can click in order to track their guess.
So add all of that into your project and you're going to be ready to move on to the next lesson, we're
going to finalize the gameplay.