Welcome back.
How's your generator looking in this lesson?
We're going to do some tweaks and updates to make the application even better.
So it's looking at how the text is generated out.
So we've got visit plus blogging dot com.
So instead of spaces.
And if we do add in a space, it turns out and it looks OK, but the format is not exactly the same
as we've got within placeholder dot com.
So usually, even though it works, it's usually it's a good idea to add in the spaces as plus signs.
And with JavaScript, that's really easy to do.
So setting up another function that we're going to use and we're going to call this spacers passing
in a string value and the same as what we did with where we were turning back the hash for cleaning
out the hash.
We're going to return back a value and this one is going to be a little bit different because we're
going to take our string and we're going to split by space and then we're going to join it back together.
And we saw earlier that what split does is it turns it into an array, so it turns the string into an
array.
So what will happen here is when we've got test where we could have test one, test two, it'll split
up by the space.
So it'll create an array with two items in it.
So the first one and the second one splitting it by the space.
And then we want to join that back together using the joint method, which brings an array into a string
and joining it back together, using the plus.
So effectively, what will happen here when we pass on a value into spacers is it will be returned back
with the plus.
So let's wrap that input value with the function spacers and see what happens.
Refresh and we've got test one test to test three as soon as we click off of it.
You see that now we're generating that path and it looks a lot more proper.
It looks a lot more like what is on placeholder dot com.
We also needed to add in a way to be able to select that value so we can use an input for this one or
we can use a text area to be different.
And this text area is where we can start adding in some rows to that, adding in columns to that.
And we'll leave it blank for now.
And the idea is that once we create our path, I want the user to be able to select this text area and
place it into their clipboard, selecting another object that we're going to use in order to hold the
text area.
And since there's only one of them, we can use query selector and select it by the tag.
So taking our tag of text area.
So now we've got it within the text area object and we can use that.
And also setting we're setting our image path source and we're also updating the value to be equal to
the iPad.
So now try that out.
And if we have any changes and you can see that now we're outputting it here.
And what I also want to be able to do is select that area.
So let's select that area using the select option select method.
We can also add focus to that area.
So putting the focus on that as well.
So try that out.
So now whenever we make any updates, we've got focus on there.
We've got it selected and we could also copy it to the clipboard as well.
So using the document exec come in and that command is copy.
We're going to copy that selected item.
So one more time, we'll try that and now we've got that copied, so if I take that and if I paste that,
you can see that I've already copied that in and I can paste it anywhere I want.
So if I want it to paste it within a URL, I could paste that and we can see that that image is now
popping up.
So this is the same one that we've generated.
So it's nice, neat usability for the user in order to be able to simply generate that and already gets
copied into their clipboard.
So as soon as they click off of that, it generates it and it's already copied into the clipboard,
ready to go and ready for them to use and paste into any project that they want.
And as you can see, once again, once we've made the changes, if I paste it, this is that new one
that we've just created.
And that was just a simple demonstration that work and paste it in and we've already got it in our clipboard.
So that's the application.
And coming up next, we'll do a quick run through in a code review of all of the functionality that
we've built in the earlier lessons.
So go ahead and add this new option into your project.
So this is the ability to output that as a text area, as a selectable area that the user can select
as well as copy it automatically into their clipboard.