1
00:00:00,060 --> 00:00:05,160
Welcome in this lesson, we're going to be setting up our basic application structure, so the upcoming

2
00:00:05,160 --> 00:00:12,780
lessons, we're going to be creating an image generator, using an image from placeholder dot com and

3
00:00:12,780 --> 00:00:14,670
what placeholder dot is it?

4
00:00:14,700 --> 00:00:21,090
Because it provides you placeholder images and it gives you the ability to set the dimensions of the

5
00:00:21,090 --> 00:00:31,110
image, also allows you to add text to the image and set up adding different colors sizes, as well

6
00:00:31,110 --> 00:00:33,090
as specifying image formats.

7
00:00:33,360 --> 00:00:35,250
So there's quite a bit of stuff you can do.

8
00:00:35,430 --> 00:00:38,910
And going over to the website, you have to really customize this.

9
00:00:39,090 --> 00:00:40,710
So I want to make this easier.

10
00:00:40,770 --> 00:00:46,650
And the way that we're going to do this is using our JavaScript generator where we're going to generate

11
00:00:46,650 --> 00:00:54,630
these image paths using our application in order to output that image and output the image that we want.

12
00:00:54,870 --> 00:00:59,610
So over here, we've got an example of background as well as we can set the text background.

13
00:00:59,850 --> 00:01:03,320
So there's quite a lot of options and quite a lot of things that we can do.

14
00:01:03,570 --> 00:01:08,300
So let's open up our editor and we're going to start building this application.

15
00:01:08,310 --> 00:01:14,240
So there's a few things that we need and we do need quite a bit of options within a form format.

16
00:01:14,520 --> 00:01:15,910
So let's set those up.

17
00:01:15,930 --> 00:01:21,840
We are going to have dropdown and within the dropdown we'll have different size dimensions.

18
00:01:22,020 --> 00:01:29,370
And you can also customize this one step further to have the ability to select the different sizes so

19
00:01:29,370 --> 00:01:31,160
the width and the height as well.

20
00:01:31,830 --> 00:01:36,900
But for now, we're going to keep try to keep this as simple as possible, where we've got an option

21
00:01:36,900 --> 00:01:43,440
for a small image, we have an option for a medium image, and then we can also have an option for a

22
00:01:43,440 --> 00:01:44,270
large image.

23
00:01:44,280 --> 00:01:45,810
So let's make this a little bit bigger.

24
00:01:46,030 --> 00:01:53,280
So this would be 350 by 150 and this can be 650 by 350, and this would be large.

25
00:01:53,640 --> 00:01:59,670
And then using JavaScript, we're going to listen for changes with any one of these elements on the

26
00:01:59,670 --> 00:02:06,630
page so we can listen for a change on the select option, as well as changes with the input area.

27
00:02:07,110 --> 00:02:14,520
So this is going to be a regular input type text allowing the user to add some text to their image.

28
00:02:14,520 --> 00:02:20,490
And I'll also label these as well and then do the line breaks, text on image and we'll refresh, see

29
00:02:20,490 --> 00:02:21,100
what that looks like.

30
00:02:21,120 --> 00:02:24,000
So we've got image size, text on image.

31
00:02:24,210 --> 00:02:26,670
Another one that we want it to do is have color.

32
00:02:26,670 --> 00:02:28,890
So we know that we've got two options for color.

33
00:02:29,070 --> 00:02:31,290
We've got a background and a foreground color.

34
00:02:31,440 --> 00:02:35,550
So let's set those up and we'll have two different options for that.

35
00:02:35,790 --> 00:02:42,060
And there are some rules here that the colors must follow the dimensions and their hex values as well

36
00:02:42,630 --> 00:02:49,560
without the hash, the color of background and setting it up as an HTML5 background, color and color

37
00:02:49,560 --> 00:02:50,760
of text.

38
00:02:50,760 --> 00:02:54,750
And I'm going to give these ones IDs so that we can easily identify them.

39
00:02:54,930 --> 00:02:57,490
Let's try that one more time and do a quick refresh.

40
00:02:58,020 --> 00:03:04,800
So the objective now is to set up our JavaScript and we're going to update our image output.

41
00:03:05,040 --> 00:03:06,540
And also one last thing.

42
00:03:06,870 --> 00:03:12,570
Let's add in an image and we're going to have a source for this image and we'll leave it blank for now.

43
00:03:12,600 --> 00:03:13,740
This was our only image.

44
00:03:13,740 --> 00:03:16,100
So it's easy to select from our JavaScript.

45
00:03:16,590 --> 00:03:19,910
So refresh and we're ready to move on to the next step.

46
00:03:20,280 --> 00:03:26,610
So go ahead and set up these basic inputs so that we can have something to work with in the upcoming

47
00:03:26,610 --> 00:03:28,580
lesson as we set up job.

48
00:03:28,590 --> 00:03:29,730
So that's coming up next.

49
00:03:30,000 --> 00:03:34,830
We're going to add event listeners as well as select these elements within our JavaScript code.

50
00:03:35,070 --> 00:03:41,490
And one last thing before we conclude, let's set up some default values for our colors so we can set

51
00:03:41,490 --> 00:03:46,050
the background color or the color of the text to read and then also set the background color.

52
00:03:46,170 --> 00:03:51,300
And we'll set it to a great kind of color so that we've got some default background colors that are

53
00:03:51,300 --> 00:03:57,990
there, starting colors that we can use as we build out our basic image from a placeholder so that we're

54
00:03:57,990 --> 00:04:00,870
ready to move on to the next step we're bringing in in the JavaScript.