The stories in full screen mode so if i click on any of these stories we can see that it is displayed over here in full screen and if you click on the next button we go to the next story.
And if you click on the previous button we go to the previous story and if i click on the close button we exit the full screen mode now in this video i'll show you how to.
Add a timer so if i go to the original design and if i click on one of these stories we can see that after a set amount of time it moves on to the next story.
So we have to add that timer to our current story over here so that's what we're gonna do in this video let's get started .
Now before getting started with the timer let's just make this design responsive so right now if i just decrease the width of the screen this is how it looks.
And we will set a max width of let's try 700 pixels now the screen width is less than 700 pixels then whatever styles we have inside this block will be added to the.
Design so the first thing we will do is we will change the width of the storage container so if you scroll up here we can see for the storage container we have set a width of 640 pixels.
So here what we'll do is let's select storage container and we will set the width to 90 percent of the screen width and we also need to set the box sizing to border box so.
Let's scroll over here and let's type box sizing and let's set it to border box and now we can see we have 90 percent width of the screen and if i increase.
The width of the browser window this is how it looks and this is how it looks on mobile screen right now let's change the height and.
The width of the content image Wesdigital
The content before and the content after so let's add the selectors over here.So let's type storage container content img and we will set the width and the height to 60 pixels.
And now let's select the content before so let's type stories container content colon colon before and let's set the height and the width to 70 pixels.
Right now let's select the content after so let's type stories container content column column after and let's set the width and the height to 80 pixels.
All right so that's how it's going to look on a mobile device now let's open the full screen mode so let's select one of these stories and let's make some changes over here.
So let's type story full which is the division for the full screen mode and in that we have a content division and.
In that we have the img so if you go back to the html file here we can see inside this story full division we have this content division and in that we have this image.
So let's set the height of the image to 60 percent i think we can increase it a little bit let's try 65 and i think that looks alright and i.
Think that looks alright for a mobile device right now let's get started with the timer now what we need to do is we need to perform the same operation that happens.
When we click on the next button over
Here so we need to add a timer and call this function for the next arrow so let's go to the javascript.And if we scroll down here we can see for the right arrow we had added this event listener and this is all the code that we have for going to the next story so what i'm gonna do.
Is i'll just cut this code from here and i'll just create a function so let's create a function called next story and i'll just paste the code over here.
And i'll just call this function over here so here i'll just tab next story and now let's go back to our design and let's see whether everything works all.
Right let's click on this story and let's click on the next button and everything is working all right right now let's go back and let's add a timer.
Now what we need to do is we need to start a timer over here when we click on the content so here in the event listener of the content let's add the timer so here i'll just type.
Set interval and you need to call the function next story and then we need to add the timing so let's set it to 5 seconds so let's try 5000 which is 5 milliseconds and now let's see whether.
This works so let's go back and let's click on one of these stories and here we can see after five seconds we are going to the next story so everything is working all right.
Now we have some problems to solve in this timer so if i click on one of these stories and if i wait for four seconds and now if i click on the next button we can see that it immediately moves to.
The next story because it had already passed four seconds and if i click on the next button it goes to the next story and it just has one.
Second to stay on that story so what we need to do is we need to clear the timer every time we click on the content or every time we click on the next and the previous buttons so let's go ahead and.
Call a function called clear interval and here we need to add the name of the interval so let's go ahead and create a variable over here i'll just name it timer.
And now let's scroll down and here i'll just type timer equals set interval and here i'll just pass the name of the timer so i'll just type timer over here and i will do the same.
For the next and the previous buttons so let's copy this clear interval code from here we'll also copy the second line and let's scroll down and here for the left arrow.
Let's add these lines of code over here and we'll do the same for the next story so here after next story let's add these two lines of code right now let's go back to our website and let's click on.
One of these stories and now let's wait for three or four seconds and let's click on the next button and now we can see that the timer is reset and it waits again five seconds to.
Go to the next story so everything is working all right so that's basically how you add a timer to these stories and that's basically it for this video.
And with that we have completed designing these stories using html css and javascript i will leave the link of the source code in the description and 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 day.