Dour image generator coming along, so I hope you've got had the opportunity to try out and build out
your own version of this application, and I also do encourage you to extend on this.
There's quite a few improvements that you can make and you can make generating images really easy,
as well as practicing using working with JavaScript.
So there's a number of other options that you can still add in where you can add in the different formats.
So you've got Pangea's JFS JPEG.
So if you want to have a specific format within the image, you can add that into the string as well
as add it into the generator within a dropdown list and so on.
So really challenge yourself, have some fun with that building out an image generator.
So now we're going to do a quick overview of the code.
And first, we started out by selecting and creating our inputs that we needed in order to generate
the path.
So we identified that we needed some dimensions.
So we set these as defaults.
And this is another one that you can break apart and have separate different input fields for these
values in order to have even more customization for those placeholder images that are being generated.
Then there's the text on image background colors.
And also we just identified that you can also add in the different types of images.
So that was another option that's available there.
And we didn't go into that in the project.
But it's just as easy as adding in even more input fields.
And I do encourage you to try that out and to add those in so that you can get really familiar with
how you can generate and create these types of applications.
Lastly, we had a text area.
This is where our output gets added for the user to be able to see visibly as well as select and copy,
and then they can copy it into their own projects.
Next, we use JavaScript in order to connect to our objects contained within the document added in event
listeners to those and the event listeners are all going over to the same function because the functionality
is the same.
All we're doing is listening for that changes within the inputs.
And as long as there's been a change within the input, then we know that we need to rebuild our visuals.
So rebuild the image that's being output as well as, of course, rebuild the path that the users trying
to generate.
We select all of the element values added into an object called AI.
And then within that object I this is where all the details are sitting.
We can add and update the size, the background color, the text color and the text output.
We need it to also add in a few functions to clean up the code where we needed to remove out the hashes
from the colors, as well as when we're got multiple words within the within the text string.
We want to join them with a plus sign.
So created a couple helper functions in order to accomplish that, wrapped the values, what those helper
functions in order to clean those up and format them as needed.
Then we added in that image into the visible area, into our default image area that we've got on our
page, as well as we updated the value of text area with the new path that's just been generated, we
selected that area using JavaScript.
We set the focus on that text area using JavaScript.
And then lastly, we executed the copy command to copy that content into the user's browser so they
can use that within their clipboard and paste the path as needed.
Thanks again for taking this section, and I hope you've enjoyed it as well as if you need any clarification
or have any questions in regards to the content.
I'm always happy to help answer and address those, and I hope to see you again in the next one.