1
00:00:00,060 --> 00:00:06,060
Dour image generator coming along, so I hope you've got had the opportunity to try out and build out

2
00:00:06,060 --> 00:00:10,740
your own version of this application, and I also do encourage you to extend on this.

3
00:00:10,920 --> 00:00:16,620
There's quite a few improvements that you can make and you can make generating images really easy,

4
00:00:16,620 --> 00:00:20,550
as well as practicing using working with JavaScript.

5
00:00:20,760 --> 00:00:25,880
So there's a number of other options that you can still add in where you can add in the different formats.

6
00:00:25,890 --> 00:00:28,570
So you've got Pangea's JFS JPEG.

7
00:00:28,950 --> 00:00:34,620
So if you want to have a specific format within the image, you can add that into the string as well

8
00:00:34,620 --> 00:00:38,270
as add it into the generator within a dropdown list and so on.

9
00:00:38,520 --> 00:00:43,290
So really challenge yourself, have some fun with that building out an image generator.

10
00:00:43,470 --> 00:00:46,200
So now we're going to do a quick overview of the code.

11
00:00:46,380 --> 00:00:52,440
And first, we started out by selecting and creating our inputs that we needed in order to generate

12
00:00:52,440 --> 00:00:52,950
the path.

13
00:00:53,130 --> 00:00:55,740
So we identified that we needed some dimensions.

14
00:00:55,920 --> 00:00:57,680
So we set these as defaults.

15
00:00:57,690 --> 00:01:02,520
And this is another one that you can break apart and have separate different input fields for these

16
00:01:02,520 --> 00:01:08,740
values in order to have even more customization for those placeholder images that are being generated.

17
00:01:09,030 --> 00:01:12,360
Then there's the text on image background colors.

18
00:01:12,540 --> 00:01:18,110
And also we just identified that you can also add in the different types of images.

19
00:01:18,120 --> 00:01:20,370
So that was another option that's available there.

20
00:01:20,520 --> 00:01:22,500
And we didn't go into that in the project.

21
00:01:22,500 --> 00:01:25,560
But it's just as easy as adding in even more input fields.

22
00:01:25,740 --> 00:01:31,230
And I do encourage you to try that out and to add those in so that you can get really familiar with

23
00:01:31,350 --> 00:01:35,100
how you can generate and create these types of applications.

24
00:01:35,490 --> 00:01:37,190
Lastly, we had a text area.

25
00:01:37,320 --> 00:01:44,370
This is where our output gets added for the user to be able to see visibly as well as select and copy,

26
00:01:44,610 --> 00:01:47,190
and then they can copy it into their own projects.

27
00:01:47,460 --> 00:01:53,850
Next, we use JavaScript in order to connect to our objects contained within the document added in event

28
00:01:53,850 --> 00:01:59,550
listeners to those and the event listeners are all going over to the same function because the functionality

29
00:01:59,550 --> 00:02:00,110
is the same.

30
00:02:00,240 --> 00:02:04,920
All we're doing is listening for that changes within the inputs.

31
00:02:05,100 --> 00:02:10,920
And as long as there's been a change within the input, then we know that we need to rebuild our visuals.

32
00:02:11,040 --> 00:02:16,260
So rebuild the image that's being output as well as, of course, rebuild the path that the users trying

33
00:02:16,260 --> 00:02:17,210
to generate.

34
00:02:17,700 --> 00:02:24,120
We select all of the element values added into an object called AI.

35
00:02:24,330 --> 00:02:28,650
And then within that object I this is where all the details are sitting.

36
00:02:28,890 --> 00:02:35,070
We can add and update the size, the background color, the text color and the text output.

37
00:02:35,310 --> 00:02:42,360
We need it to also add in a few functions to clean up the code where we needed to remove out the hashes

38
00:02:42,360 --> 00:02:50,340
from the colors, as well as when we're got multiple words within the within the text string.

39
00:02:50,520 --> 00:02:52,920
We want to join them with a plus sign.

40
00:02:53,100 --> 00:02:59,430
So created a couple helper functions in order to accomplish that, wrapped the values, what those helper

41
00:02:59,430 --> 00:03:03,570
functions in order to clean those up and format them as needed.

42
00:03:03,840 --> 00:03:10,890
Then we added in that image into the visible area, into our default image area that we've got on our

43
00:03:10,890 --> 00:03:18,780
page, as well as we updated the value of text area with the new path that's just been generated, we

44
00:03:18,780 --> 00:03:21,180
selected that area using JavaScript.

45
00:03:21,330 --> 00:03:25,410
We set the focus on that text area using JavaScript.

46
00:03:25,500 --> 00:03:33,810
And then lastly, we executed the copy command to copy that content into the user's browser so they

47
00:03:33,810 --> 00:03:38,160
can use that within their clipboard and paste the path as needed.

48
00:03:38,220 --> 00:03:44,700
Thanks again for taking this section, and I hope you've enjoyed it as well as if you need any clarification

49
00:03:44,700 --> 00:03:47,250
or have any questions in regards to the content.

50
00:03:47,430 --> 00:03:52,680
I'm always happy to help answer and address those, and I hope to see you again in the next one.