And if i click on any of these stories we have the story displayed over here in full screen mode and we can also click on the next and the previous buttons over here and then.
We can click on this close button now in the previous video we generated these stories uh dynamically using javascript so if you go to our current design this is how it looks right now.
So if you go to the source code we can see that we have all these stories over here inside this old stories array and all these images are displayed over here now in this video we will add the.
Functionality of displaying the stories in full screen mode so let's get started right so here i'm in the javascript and.
Let's scroll down over here and this is the old stories for each loop and now let's go ahead and add an event listener to this content so here we just type content dot add event listener.
You go back to the index.html file here we can see that we have this division with the class of story full and if you go to the style.css file and if you scroll down.
Here we can see for the story full class we have set the opacity to 0 for now so what we will do is when we click on the story we will set the opacity back to 1.
And also the pointer events to auto and we'll also have a smooth transition so let's type transition and let's set it to all 100 milliseconds is.
And let's go ahead and create story full dot active and here we'll set the opacity to 1 and pointer events to auto right now when we click on this content.
Which is this story right here so in the html file here we can see we have this division of the class of content and in that we have the image.
So when we click on the content we want Wesdigital
To set the active class to the story full division so first of all let's reference the story full division over here in the.Javascript so here i'll just type const story full equals document.queryselector story full and now let's go ahead and type.
Story full dot class list dot add and we will add the active class and the next thing we need to do is we need to set the image source so.
right now we can see that we have hard coded this image url over here now we have to set the image to the current image of the story.
So let's go ahead and access this image in our javascript so here i'll just type const and i'll just give it a name of story full image equals.
Document.queryselector and here let's type story full img so this will target the image inside the story full division.
Right now let's go ahead and set the source of this image so here i'll just type story full image dot set attribute and we'll set the src attribute.
To the current image so the current story is referred to as s over here in this for each loop so let's type s dot image url this is the url of the full image.
The next thing we need to do is add the title so if you go back to the index.html file here we can see we have this division of the class of title and in that we have.
This text over here now we need to
Replace this test title with the current title of the story so let's access this title let's go over here to javascript and let's create a constant let's type.Const and let's name it story full title equals document.queryselector story full title.
Right now scroll down and here we will first of all check whether we have the title for this story so let's add an if condition and let's.
Type exclamation s dot title so this if condition will check whether we have a title inside the current story so here we can see we have this title keyword over here.
So it will check whether we have the title so this is for the condition where the title is not available so if you don't have the title then we will set the.
Display to none so let's type story full title dot style dot display and let's set it to.
None and if we have the title then we will add the code inside the else so here first of all let's set the display back to block so let's type.
Story full title dot style dot display equals block and let's set the text of the title to the current title so let's type story.
Full title dot inner html equals and let's set it to the current story which is s dot title.
Right now let's save this and let's go back to our browser and let's click on one of these stories and we can see that the story is displayed over here in full screen mode.
And we also have the title title number one let's refresh this page and let's select another story let's select the story right here now we can see that this story is displayed over here in.
Full screen mode and we also have the current title right now let's add an image listener to this close button so when we click on this close button we want to hide this full screen mode.
So first of all let's reference that over here in the javascript if you go back to the index.html file let's see what is the class for the.
Close button so we have a division of the class of close btn so let's access that over here here we just type const close btn equals document dot query selector.
Story full close btn and let's add an image listener so let's type close btn dot ad event listener and we will listen for the click event.
And let's create an adder function over here now when we click on the close button we want to hide the full screen mode so for that we have to remove the active class.
From the story full division so let's tap story full dot class list dot remove and let's type active over here.
Right now let's go back and let's open the story and let's click on the close button and we can see that the story is being closed.
So the close button is working all right we'll also set the cursor to pointer when we hover over these stories so let's go back to the style.css file and let's go to the content.
And here for the content let's set the cursor to pointer and now when you hover over this we have the pointer right now the next thing we will do is.
We will add the functionality for the next and the previous arrows over here so let's go back to our javascript now the first thing we need to do is we need to track the index of the current.
Story so for example if i click on this third image right here we can see that we have the third story.
Displayed over here in full screen mode now when we click on the next button we need to display the fourth image so for that we need to have an idea of which image is currently displayed over here.
So let's go back and what we will do is when we click on the content division we'll also store the current index inside a variable so let's create a variable over here and.
Let's name it current index and by default let's set it to 0. now let's go inside this for each loop and when we click on the content division let's go ahead and update this.
Current index variable so let's type current index equals and we need to get the index of the current story so for that we need to add one more.
Variable over here so this one is for the story and we'll add a comma and we'll just name it i so this will be the story and this will be the index.
So let's set the current index to i so now this variable will have the current index stored over here now let's go ahead and add the functionality of the next and the.
Previous buttons so if you go back to the index.html file here we can see we have this division of the class of left arrow and we also have a division with the class of right arrow let's reference.