Welcome back.
Are you ready to build the image path using our JavaScript form, so now that we've got all of the inputs
set up, we've got that listeners added in, we could remove out the console messages and going down
to build the next objective is to get the values that are contained within these inputs and apply them
into our image path and we're going to grab them separately.
So setting up a variable for that, we can also have an object for that if for one or two, so we can
create an object, call it I and then have eye size and size would be equal to selecting that image
size.
And we've already got the select object.
And taking the values contained within that select object and I'll console log out whatever the value
of I is that object, I so whenever we have any changes and we do need to refresh that.
And we see that we've got the size there.
I'm also going to get rid of this console message because we don't need that anymore, just adding more
into our console there.
So we've got a size of 350 by 150.
We also need to select all of the values here contained within the images.
And we've got all of these as a node list and a shirt that looks like.
So if we want to get the first one and we know that the first input is going to be our text on the image.
So if we do this and we refresh and then we do something here, we can see that we are getting that
right input field so we can easily grab the value, just as we did with the select object.
So that gives us the ability to get the value that's contained within there and then we've got our value
showing up.
So next thing that we can do is we can write text.
And this is going to be equivalent to this.
And we can also get the colors the same way as we've got our background color and our foreground color.
So those are the two colors that we can utilize so we can have one.
So we've got our background color.
And again, the same idea where we're selecting that input all.
So we've already got those inputs within that node list so we can really easily select them and utilize
them.
And we've got our text color.
So see what this looks like now.
So whenever we select and make any kind of selection here, we've got all of the criteria that we need
and that we want to use in order to build out our placeholder image.
We're ready to create that path.
So setting that up and we'll hardcoded the path for placeholder images.
So if you want to set up a placeholder images, the path is always the same, where we're setting up
placeholder dot com and then forward slash.
So the first parameter that we need is the size.
So we can add an I size into it.
And the next parameter that we have is the colors.
So setting up those two colors and don't forget to break out of your quotes and break in and break out
of the courts.
So the background color and just going back to the placeholder dot com just to make sure that we're
getting the colors right so it is separated.
So just making sure that the path is correct.
And then I and text color.
And then lastly, we're outputting some text and you see that the format is with the question mark and
then the text so we can add the question mark.
And see text and then equal that, and then this will be equal to whatever the output of my text is.
So any time we make any type of update there, we see we're generating a new path for the image.
And now, next, all we need to do, we actually need to do one other thing, and that's removing out
the hashes out of there so it can create a function that will clean it up.
As we see within placeholder dotcom, there's no hashas within the hex of that colors.
And let's call this clean and we can pass in a string.
And within this clean string, what we want to do is we want to return back cleaned versions or taking
the string that's being passed in using replace replacing the hash with just a blank so we can take
that clean function, wrap it around our values so that we can have that all within one statement.
And now let's see what we're see what gets produced.
So that's now the colors without background, without the hash.
Next, let's select our image object.
And we have a choice here where we can do our image so we can do my image.
And then using document query selector.
And selecting out the element with the tag of image and of course, if you have more images, you've
got to be a little bit more specific when you're making your selecter.
If you use query selection, if you've got more than one image, you're only going to get the first
one being returned back within the query selection.
So we've got our image.
We've got the image, four images.
There's an attribute, a source attribute, and then updating that to be equal to IPART.
So now whenever we set up and we make some changes, you can see that we're automatically generating
that new image and that's showing up as we're generating it and as we're making the updates to it.
So any of the content that we change within our form generates a new image and a new image path.
So lastly, what we want to do is output this to the user.
So it's really easy to select that software.
They've created the image that they want to use, the placeholder image that they want to use.
Then they can select that image and get the path to that image really quickly.
It's coming up next.
So go ahead and add this functionality into your application so that you do have the option to select
the content from your input fields and add it in and make use of it within a JavaScript object that
you can generate a path.
So coming up next, we're going to complete this application by adding in an option for the user to
be able to select the path.