Is displayed over here in full screen mode and after some time it switches to the next story and we also have the next and the previous buttons over here and then we have this close button and if i.
Click on that we have the default storage screen displayed over here and in the previous video we completed the css of this design and we also completed the design of the full screen mode so.
This is how it looks now in this video we will start with the javascript and in this video specifically we will just add all these images dynamically.
Using javascript so let's get started all right this is our source code and if you go to the index.html file here we can see that we have all these content.
Divisions over here and in that we have all these images so as of now we have just hard coded all these images over here so we have this first image over here the second image and so on and.
Story full division so this is the full screen division right here so what i will do is i'll just set the opacity to 0 and i will also set the pointer events to none.
And now we can see that all the stories are displayed over here and i think we can decrease the width of this story container over here so if i just right click over here and click on inspect.
And let's select stories container and let's just decrease the width a little bit and i think 640 looks alright so let's do that.
Let's go back to the css and let's go to the storage container let's change this to 640 pixels right now here we can see that all these stories are displayed over here because.
We have hardcoded all those images over here in the html now let's go ahead and comment all this code over here so i'll just press command forward slash.
Or control forward slash Wesdigital
And we can see that all this code has been commented now if you go back to our storage container we can see we have this empty.Storage container over here now what we will do is we will display all the stories dynamically using javascript so let's go back to our source code and let's go to the main.js file and we.
Have already linked our main.js file over here in the index.html file so let's start by creating an array so let's type const and we'll name the array all stories.
Now we'll create an array of objects so in this area we will have several objects so let's create an object and in the object we need to have the thumbnail url so let's tap thumb url you.
Can name this anything you want and let's provide the thumbnail url over here so if you go to the images folder here we can see we have all these thumbnail images and the full images so.
Let's type images forward slash one hyphen thumb dot png so this is the first image thumbnail and the next thing we need to have is the full image so.
Let's name it image url and let's add the image link over here so let's type images forward slash one dot png so here we can see for the full image we have this image named one.
Dot png and then we also need to have the title so let's type title and for the first one let's add a title of title number one so this is our object now in this way we.
Need to create all these objects so let's copy this and i'll just paste it seven more times now for the second one we have the thumbnail url set to 2 hyphen thumb dot.
Png and this one is two dot png and here
We will add title number two now in the same way let's go ahead and change the urls and the titles of all these images all right so here i have changed the.Urls and the titles of all these images so we have eight objects over here in total in this array now let's go ahead and display all these images in our browser so let's create a for loop and.
We will loop through all these items inside the array and we'll create this structure over here so here we can see we have this division with the class of content and in that we have the ing tag.
With the source of the image thumbnail url so let's go ahead and do that here we can see the name of the array is all stories.
So let's type all stories dot for each and this will loop through all the items inside the array now for each of the stories i'll just call it s you can call.
This anything you want and let's create an error function over here now the first thing we need to do is create a division of the class of content so.
Let's type const and let's give it a name of content and here you have to type equals document.createelement here we need to type div because we need.
To create a division and we need to give it a class of content so let's type content which is this constant right here dot class list dot add and here we'll just.
Type content so this is the content division now we need to create the img tag so let's type const and i will just name it img.
Equals document.createelement and we need to have an img tag so let's type img over here and we need to set the source of this img to.
The thumbnail url so let's type img dot set attribute and we need to set the src attribute and the value should be the thumbnail url so let's type s which.
Is the current story dot and then we can see we have this thumb url over here all right now the next thing we need to do is we need to add the content.
Division inside the stories container division so here we can see all these content divisions are inside the stories container division so for that first of.
All let's get the reference of the stories container so let's type const stories container equals document.queryselector stories container.
And now you will type stories container dot append child and you need to type content so now this content division will be.
Appended inside the stories container division now we need to append the image inside the content division so let's type content dot append child.
Img right now let's go back to our webpage and here we can see we have all these images displayed over here and these are displayed dynamically using javascript.
So let's test it out let's delete some of these images and let's see whether we have the changes so i'll just delete all these images i'll just keep two of these images over here.
And now if you go back we can see that we have just two images over here so all the images are indeed generated using javascript so now you can go ahead and add your own images.
Over here you can add any number of images you want over here you can add the title image url and the thumbnail url over here inside the javascript and all this code will be automatically.
Generated for you so that's basically it for this video in the next video we will add the functionality for all these stories so when we click on any of these stories we want to display the correct.
Story in full screen mode and we also want to go to the next story after some time automatically and we also want to exit this full screen mode when we click on.
This close button so we will do all of that in the next video and we'll also make this storage container responsive so that's it for this video if you have any doubts.
You can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice.