Welcome in this lesson, we're going to be setting up our basic application structure, so the upcoming
lessons, we're going to be creating an image generator, using an image from placeholder dot com and
what placeholder dot is it?
Because it provides you placeholder images and it gives you the ability to set the dimensions of the
image, also allows you to add text to the image and set up adding different colors sizes, as well
as specifying image formats.
So there's quite a bit of stuff you can do.
And going over to the website, you have to really customize this.
So I want to make this easier.
And the way that we're going to do this is using our JavaScript generator where we're going to generate
these image paths using our application in order to output that image and output the image that we want.
So over here, we've got an example of background as well as we can set the text background.
So there's quite a lot of options and quite a lot of things that we can do.
So let's open up our editor and we're going to start building this application.
So there's a few things that we need and we do need quite a bit of options within a form format.
So let's set those up.
We are going to have dropdown and within the dropdown we'll have different size dimensions.
And you can also customize this one step further to have the ability to select the different sizes so
the width and the height as well.
But for now, we're going to keep try to keep this as simple as possible, where we've got an option
for a small image, we have an option for a medium image, and then we can also have an option for a
large image.
So let's make this a little bit bigger.
So this would be 350 by 150 and this can be 650 by 350, and this would be large.
And then using JavaScript, we're going to listen for changes with any one of these elements on the
page so we can listen for a change on the select option, as well as changes with the input area.
So this is going to be a regular input type text allowing the user to add some text to their image.
And I'll also label these as well and then do the line breaks, text on image and we'll refresh, see
what that looks like.
So we've got image size, text on image.
Another one that we want it to do is have color.
So we know that we've got two options for color.
We've got a background and a foreground color.
So let's set those up and we'll have two different options for that.
And there are some rules here that the colors must follow the dimensions and their hex values as well
without the hash, the color of background and setting it up as an HTML5 background, color and color
of text.
And I'm going to give these ones IDs so that we can easily identify them.
Let's try that one more time and do a quick refresh.
So the objective now is to set up our JavaScript and we're going to update our image output.
And also one last thing.
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.
This was our only image.
So it's easy to select from our JavaScript.
So refresh and we're ready to move on to the next step.
So go ahead and set up these basic inputs so that we can have something to work with in the upcoming
lesson as we set up job.
So that's coming up next.
We're going to add event listeners as well as select these elements within our JavaScript code.
And one last thing before we conclude, let's set up some default values for our colors so we can set
the background color or the color of the text to read and then also set the background color.
And we'll set it to a great kind of color so that we've got some default background colors that are
there, starting colors that we can use as we build out our basic image from a placeholder so that we're
ready to move on to the next step we're bringing in in the JavaScript.