1
00:00:01,200 --> 00:00:01,920
Welcome back.

2
00:00:01,950 --> 00:00:09,300
Are you ready to build the image path using our JavaScript form, so now that we've got all of the inputs

3
00:00:09,300 --> 00:00:15,720
set up, we've got that listeners added in, we could remove out the console messages and going down

4
00:00:15,720 --> 00:00:22,860
to build the next objective is to get the values that are contained within these inputs and apply them

5
00:00:22,860 --> 00:00:26,550
into our image path and we're going to grab them separately.

6
00:00:26,730 --> 00:00:32,190
So setting up a variable for that, we can also have an object for that if for one or two, so we can

7
00:00:32,190 --> 00:00:42,120
create an object, call it I and then have eye size and size would be equal to selecting that image

8
00:00:42,120 --> 00:00:42,740
size.

9
00:00:43,020 --> 00:00:45,300
And we've already got the select object.

10
00:00:46,990 --> 00:00:52,990
And taking the values contained within that select object and I'll console log out whatever the value

11
00:00:52,990 --> 00:01:00,970
of I is that object, I so whenever we have any changes and we do need to refresh that.

12
00:01:01,810 --> 00:01:03,580
And we see that we've got the size there.

13
00:01:03,610 --> 00:01:08,350
I'm also going to get rid of this console message because we don't need that anymore, just adding more

14
00:01:08,350 --> 00:01:09,880
into our console there.

15
00:01:10,810 --> 00:01:14,080
So we've got a size of 350 by 150.

16
00:01:14,890 --> 00:01:19,510
We also need to select all of the values here contained within the images.

17
00:01:20,140 --> 00:01:24,910
And we've got all of these as a node list and a shirt that looks like.

18
00:01:24,920 --> 00:01:30,810
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.

19
00:01:31,480 --> 00:01:38,230
So if we do this and we refresh and then we do something here, we can see that we are getting that

20
00:01:38,230 --> 00:01:44,320
right input field so we can easily grab the value, just as we did with the select object.

21
00:01:45,630 --> 00:01:50,940
So that gives us the ability to get the value that's contained within there and then we've got our value

22
00:01:50,950 --> 00:01:51,500
showing up.

23
00:01:51,810 --> 00:01:55,350
So next thing that we can do is we can write text.

24
00:01:55,830 --> 00:01:58,830
And this is going to be equivalent to this.

25
00:01:59,250 --> 00:02:04,600
And we can also get the colors the same way as we've got our background color and our foreground color.

26
00:02:04,770 --> 00:02:09,360
So those are the two colors that we can utilize so we can have one.

27
00:02:09,390 --> 00:02:11,010
So we've got our background color.

28
00:02:11,850 --> 00:02:17,080
And again, the same idea where we're selecting that input all.

29
00:02:17,280 --> 00:02:23,190
So we've already got those inputs within that node list so we can really easily select them and utilize

30
00:02:23,190 --> 00:02:23,450
them.

31
00:02:23,460 --> 00:02:25,340
And we've got our text color.

32
00:02:25,800 --> 00:02:27,670
So see what this looks like now.

33
00:02:27,690 --> 00:02:34,080
So whenever we select and make any kind of selection here, we've got all of the criteria that we need

34
00:02:34,260 --> 00:02:37,320
and that we want to use in order to build out our placeholder image.

35
00:02:37,560 --> 00:02:39,380
We're ready to create that path.

36
00:02:39,390 --> 00:02:43,970
So setting that up and we'll hardcoded the path for placeholder images.

37
00:02:44,640 --> 00:02:50,070
So if you want to set up a placeholder images, the path is always the same, where we're setting up

38
00:02:50,340 --> 00:02:53,320
placeholder dot com and then forward slash.

39
00:02:53,820 --> 00:02:56,820
So the first parameter that we need is the size.

40
00:02:57,270 --> 00:03:01,140
So we can add an I size into it.

41
00:03:01,410 --> 00:03:04,710
And the next parameter that we have is the colors.

42
00:03:05,010 --> 00:03:12,330
So setting up those two colors and don't forget to break out of your quotes and break in and break out

43
00:03:12,330 --> 00:03:12,920
of the courts.

44
00:03:12,930 --> 00:03:17,820
So the background color and just going back to the placeholder dot com just to make sure that we're

45
00:03:17,820 --> 00:03:21,140
getting the colors right so it is separated.

46
00:03:21,450 --> 00:03:24,090
So just making sure that the path is correct.

47
00:03:24,870 --> 00:03:27,990
And then I and text color.

48
00:03:28,260 --> 00:03:34,590
And then lastly, we're outputting some text and you see that the format is with the question mark and

49
00:03:34,590 --> 00:03:37,770
then the text so we can add the question mark.

50
00:03:38,780 --> 00:03:45,680
And see text and then equal that, and then this will be equal to whatever the output of my text is.

51
00:03:45,830 --> 00:03:51,680
So any time we make any type of update there, we see we're generating a new path for the image.

52
00:03:52,580 --> 00:03:57,850
And now, next, all we need to do, we actually need to do one other thing, and that's removing out

53
00:03:57,860 --> 00:04:02,330
the hashes out of there so it can create a function that will clean it up.

54
00:04:02,330 --> 00:04:08,090
As we see within placeholder dotcom, there's no hashas within the hex of that colors.

55
00:04:08,450 --> 00:04:11,840
And let's call this clean and we can pass in a string.

56
00:04:12,650 --> 00:04:19,430
And within this clean string, what we want to do is we want to return back cleaned versions or taking

57
00:04:19,430 --> 00:04:25,850
the string that's being passed in using replace replacing the hash with just a blank so we can take

58
00:04:25,850 --> 00:04:34,540
that clean function, wrap it around our values so that we can have that all within one statement.

59
00:04:34,550 --> 00:04:37,430
And now let's see what we're see what gets produced.

60
00:04:37,610 --> 00:04:42,350
So that's now the colors without background, without the hash.

61
00:04:42,680 --> 00:04:45,620
Next, let's select our image object.

62
00:04:45,860 --> 00:04:50,270
And we have a choice here where we can do our image so we can do my image.

63
00:04:50,510 --> 00:04:53,600
And then using document query selector.

64
00:04:54,490 --> 00:04:59,590
And selecting out the element with the tag of image and of course, if you have more images, you've

65
00:04:59,590 --> 00:05:02,470
got to be a little bit more specific when you're making your selecter.

66
00:05:02,620 --> 00:05:06,880
If you use query selection, if you've got more than one image, you're only going to get the first

67
00:05:06,880 --> 00:05:09,160
one being returned back within the query selection.

68
00:05:09,700 --> 00:05:11,400
So we've got our image.

69
00:05:11,410 --> 00:05:13,150
We've got the image, four images.

70
00:05:13,150 --> 00:05:18,620
There's an attribute, a source attribute, and then updating that to be equal to IPART.

71
00:05:19,060 --> 00:05:26,920
So now whenever we set up and we make some changes, you can see that we're automatically generating

72
00:05:27,370 --> 00:05:32,890
that new image and that's showing up as we're generating it and as we're making the updates to it.

73
00:05:32,920 --> 00:05:38,950
So any of the content that we change within our form generates a new image and a new image path.

74
00:05:39,460 --> 00:05:42,490
So lastly, what we want to do is output this to the user.

75
00:05:42,640 --> 00:05:45,220
So it's really easy to select that software.

76
00:05:45,220 --> 00:05:49,420
They've created the image that they want to use, the placeholder image that they want to use.

77
00:05:49,660 --> 00:05:54,940
Then they can select that image and get the path to that image really quickly.

78
00:05:55,040 --> 00:05:55,930
It's coming up next.

79
00:05:56,140 --> 00:06:02,620
So go ahead and add this functionality into your application so that you do have the option to select

80
00:06:02,620 --> 00:06:09,490
the content from your input fields and add it in and make use of it within a JavaScript object that

81
00:06:09,490 --> 00:06:11,030
you can generate a path.

82
00:06:11,050 --> 00:06:17,320
So coming up next, we're going to complete this application by adding in an option for the user to

83
00:06:17,320 --> 00:06:18,850
be able to select the path.