Create function to generate srcset value

- [Instructor] Responsive images markup adds two new attributes to the image element. The first one is srcset, which is a list of one or more strings separated by commas indicating a set of possible image sources for the use of the browser. Each string is composed of a URL and an optional width descriptor or pixel density descriptor. In this case, we're going to use the width descriptor. In addition, we have the sizes attribute. This is a list of one or more strings separated by commas indicating a set of source sizes.

Each of these sizes will consist of a media condition, a standard media query, and a source size value. In this movie, we'll set up the srcset component of our script. If you look at the images folder, you'll see for each image we have one, two, three, four, five different image sizes. I want to get JavaScript to do as much of my work for me, so I'll create a new loop to loop through each of these image sizes and generate the correct URLs to the images.

That will happen in the custom function. So I'll set up a function called makeSrcset. This function will receive image source from down here, so that I can pass each of the image sources up to the function, and then make changes to it and pass it back down here into my loop. Inside a function, I'll first set up a let called markup. This will be an array. Right now it's empty. I'll also set up a let called width and set it equal to 400.

That's the smallest size for the images, and if you look closely, you'll see that each of the image sizes increments by 400. So we can use some clever math to get through all this and auto-generate all the numbers for us. Alright, inside my function I want to set up another loop. Again, it's a for loop. I'll set up let i again, because we're inside the scope of this particular function. So we can reuse this variable. I'll set it to zero, because here I'm going to loop through five elements. Then i smaller than five. I++.

That means this loop will run a total of five times, which matches the five different image sizes we're generating. Then inside the loop, I'll grab markup. That's our array. And the current index item. And I'll set the markup array equal to imgSrc, so that is the image source that's been passed up from down here. You'll remember that is the URL to the image, without -800.jpg at the end. I'll add on -, then the width variable.

So that is currently 400. Then .jpg and a space. The width variable again. And finally, the letter w. What we'll end up with now is the image source, so something like images/experience/apartmentclass-400.jpg, space, and then 400w. This is what the srcset attribute should look like.

Then we want to generate the next image size, so that means we'll grab width, and say plus equals 400. So we're adding 400 to it. The loop will run through again. This time, it'll generate the same exact image, except this time it'll be the width of 800, and a w value of 800, and it'll keep doing this all the way up to 2,000. Then finally, we return markup, but here we want to join markups so we get a comma separated list.

Only thing that's left to do now to get this to work is to go down into our original loop and call for make srcset. So I'll say let srcset equals make srcset and I'll pass in image source. Then we can console log out srcset. Save the script. Go to the browser. Open the console. And here you'll see for each image, I now have a comma separated list consisting of the full URL to the image, followed by the width property for that image, comma, the next image size up, and the width value, the next image size up, and the width value and so on, all the way from 400 to 2,000.