This lesson is going to be a challenge lesson where we're going to show you how you can generate a bunch
of links and then also challenge you to use the images from dummy image dot com and generate a bunch
of images on your page so we can update how many images we want.
If we want 40 images, it will generate 40 colorful images on our page.
And this is all coming from the dummy image dot com.
And this isn't within our HTML source code.
All we have is the main div and we're generating images and adding them, generating the HTML and adding
it within the div using JavaScript.
In the previous lesson, we added a bunch of TEMEL content to the index study HTML, so this one, we're
going to generate some content on a loop, so create a new JavaScript file and just create a new file.
See that as a DOM for us and we're going to reproduce what we did, except we're going to do this with
JavaScript code where we're going to loop through.
So create a loop.
So first, what we want to do is of course, select the mean element.
So it's going to be our main container element and using the document and then query selector selecting
the element from the page code, a number of ways to select it lets selected by ID, so my ID, so using
the hash and then my ID save that, go into the console to make sure that you've selected the element
properly, type in variable, name of main and that should output the element object onto the page.
So now we can create a loop.
So creating a loop and starting out at zero and then looping while X is less than 10 and then incrementing
X by one, we're going to add and append to mean some more content and that's going to be the hyperlinks
that we're going to be adding in.
So just as we had before all of these hyperlinks with the click me, let's construct this as we loop
through.
So take me.
And we saw earlier as well in the last lesson how we can coordinate content together.
I'm going to use the template literals.
Those are the tactics to the left of the one on the keyboard and add in the hyperlink.
So adding it in and we're spending it to the inner HTML.
So that will allow us to create a line break as well.
Add that into the code so it creates a bunch of links there for us.
And initially I don't want it to be sitting right next to the Halo two.
So we have a few options here.
And what we can do is if we want to clear out the content entirely, we could just leave it up blank
and that would create a nice, neat list of the click means.
So let's add to it so making them unique.
So using the.
Bracket notation.
With the curly brackets and the dollar signs indicate that this is a variable, so taking the value
of X and add one to it, so we get click me one to all the way down.
So once we've created the elements, we can then select the elements and manipulate them.
So once we've run this function, then we've got a number of anchor tags that we can select from the
page.
So let's do that with JavaScript as well and just call it Owles and using the documents and then query
selector do the query selector all selecting all of the elements.
So the anchor tags and we can be more specific, just as we do with access, that we can select the
ones with the H.F. that's equal to hash.
So if, for instance, we have some other hyperlinks, we might not want to select those ones within
the node list and then the console log, I would put the node list to make sure that we do have all
of the elements listed.
So now that we've added them into the page, they're available within the dorm and that means that we
can use query selector to select them.
So let's make a selection of them and then we're going to be updating the values of them.
So using the for each which we saw last time as well.
So getting each one of the elements and returning it back.
So we're using the Arrow format for the function and we can console log out each individual element
as we iterate through so that list them out onto the page and if we want to add classes to them.
Let's add a class to it, so do a check to see if the value of index, so for the for each we can pick
up an index value as well.
So index is divisible by three, and if it is equal to zero, if the remainder is zero, then we can
take the elements and using class list, let's add the class of blue to it.
So that makes every third one blue.
Also, let's do another condition here and then using conditions, you can apply different styling to
the elements like once you've selected them in the list.
So maybe every other one can be read and that's going to overwrite the ones that are blue.
So every other one set to read for the class and then for all of them, we're going to add the.
Attribute, so using set attribute and attribute that we want to set is the target and the value that
we want to place on the target is going to be blank.
So opening up the elements console.
So that created a bunch of elements on the page, all with the target blank.
And we've applied some styling to some of them, depending on the condition.
Let's also create a bunch of images.
So I'm going over to dummy image dotcom.
So this is an excellent resource if you're ever looking to have placeholder images.
So in this case, we're just going to be grabbing some placeholder images and adding them to the page
the same way we did the hyperlinks.
But this case, we're going to be adding images and we're going to be updating the image source as we
iterate through.
So selecting default image, you can update the colors of the image.
You can also update the format.
You can add in text to the image.
So let's make a selection of this value.
So this is just going to be adding in the text to the image instead of anchor tags.
We're going to be applying images to it.
So just going to paste the image format that we're going to use and do Wardrop for it.
And then also, let's update the colors of the images as well, so this indicates the size and if we
want colors, then we could do a slash and hexadecimal value for the image colors.
So that's going to be coming under hexadecimal value.
And if you were to take this and paste it into the browser, just double check that it works so generates
an image with a white background and black text.
So the white the background is first and then the text color is lost or next.
So background and color of values.
So that's the image that we're producing.
If you want to make a smaller image, then you can update the height of the image.
So right now it's 200 by 300.
So if you want to buy 100, that we can generate images this way.
So let's go ahead and add some images to the page so you can pause the video here and run through,
just as we did with hyperlinks.
Add the images and I'll walk you through how to do that as well so you can pause the video here.
And I'll provide you the solution, how to add the images to the page so we do have the basic format.
I'm going to just do a block comment of all of this that we just did earlier and just do a comment about
that and let's start adding in the images.
So we're going to do it within the same main container.
So just as we did with the hyperlinks and let's set up a loop for that.
So loop through and then how many images we want to add so I can incrementing I by one and updating
that mean in our HTML.
And let's just add in the image tags to it and we're not going to add any sauce to it yet.
So loop through, create a bunch of blank image tags and also double check within the dev tools just
to make sure that we are adding in the images.
So just a bunch of blank images.
There's no properties yet added to them.
So as we select them, let's make a selection from the page.
So we're getting all of the images and you can use the documents, query selector.
I'll do of course, selector all.
So we're selecting all of the images from the page and now we want to select those images and loop through
using for each.
So getting the elements and then also getting the index value so that we can use this when we're generating
the images for the page.
And as we loop through, we're going to upend the image source.
So let's console log out the elements and get attribute.
So get the source value of the image.
And we know we don't have anything yet that's posted.
So it's all null.
We don't have any values there yet.
So if it's null, so if the image source is equal to null, which it is, then we can log out the values
right now.
We'll just log out the values into the console so we still get all of the nulls there.
And now we can take the image source and we can set the attributes or set the value of source and as
we iterate through will generate the path.
So const image, so the path to the image.
So using the same template we have up here, we're going to add into the source and we're going to set
the source as the my image variable.
So let's add in the base, you, Earl, that we're going to be using
and set that up as a global variable, so that way we can update the image source, take the variable
name there.
And add to it, so append to the URL.
So right now that generated bunch of images for us.
So these are all separate images if we want to update the text.
So the new image and I'll update this to be the tactics.
So that way we can use the dollar sign and get the index value and add one to it so that we get the
text on it, that new image.
Let's check what that looks like in the console.
So under the elements that we've generated all these images.
So it's all done dynamically with JavaScript.
So also, let's update the images and we'll update the path of it.
So just do the two slashes so that we're not looking for the HGP.
It'll just do whatever we've got for our protocol.
So if we're using HTP, it'll use HTP.
If we use HTP, then it'll automatically default to HTP.
So you can do that when you just do the two slashes and remove the HTP or ETOPS from the path.
So let's also do one more where will generate some random colors and create a function to generate random
colors, so my random colors and what this will do is this will return back a random color value.
So using JavaScript math.
We can generate random value, so if we do a math random that's going to generate value from zero decimal
all the way down on all the way up to one, so never hitting one, it's just a random value.
So we want to turn this random math value to a string with a base of 16.
So that will turn and return back a hexadecimal, random hexadecimal value.
And with now that it's within a string format, we can use the string methods to strip out a part of
the string.
So starting at.
Index value of two, and we want to return back six characters from that point.
So this is essentially generating random value for us and we can use this as a random color value.
So what this will just return back is the calculation to generate a random color.
So we can use the random colors.
Now, within the path to the image, so just generate a random color and also generate another random
color.
So now we've got some colorful images all coming in random foreground color and background color.
And this, of course, is only with a dummy image dot com, so you wouldn't be able to do this with
your normal images.
But this is a really neat way that you could generate some nice random images that you can use within
your Web project.
Challenges for this lesson are to select the element that you want to update, create a loop, adding
a bunch of HTML hyperlinks into the main element and then using query selector all select the page elements
that are hyperlinks and add the target attribute to go into blank target, then create images and tags
with JavaScript.
So just blank image tags, select all the images on the page, check the source of the images as you
iterate through them.
And if the value is null, then add an image path to that source going over to dummy image dot com and
then also as an added challenge, go ahead and generate random colors for the background and for the
foreground of those images that you're getting from dummy image dot com.