Congratulations on making it to the last lesson of this section where we're building out our slide image
slider, and if you've gotten this far, then so if you do have any questions or need clarifications,
feel free to connect with me.
I'm always happy to help and clarify any of the content presented within the courses.
And of course, the source code has also been included.
So you can take that source code, try it out for yourself and create your own version of the project.
So right now, everything looks like it's working properly.
And of course, I could always use a little bit of styling and see assess updates, but I'm not going
to worry about that because, of course, we are focusing on JavaScript.
So let's do a quick code, run through and check out all of the code that we've written in the earlier
lessons.
So I started out by setting up what we wanted our slide to look like.
So we set up a bunch of success and that's what we've got in here.
And we set up the captions afterwards as we built it out.
And sometimes it is easier to build some of the JavaScript and then take a look at the costs and make
the adjustments, because then you could actually visually see it.
And in this case, I was doing it first so that we don't have to look at the costs and we're not intermingling
the JavaScript in the case because I did want to focus on the JavaScript part.
We tried to keep the HTML to minimal as well.
So setting up a couple elements there with some key classes that we needed to make use of.
Then we set up our global variables that we were using throughout the upcoming functions within JavaScript.
And then once we set those, we were ready to build our output area for the user.
So we used a function called builder setting up that builder and exactly what it did, it created a
bunch of elements.
So you create element several times within this function, actually four times.
And we appended all of those elements to parents.
And then finally we added the parents elements that we had created.
So adding all of that stuff in.
So that's visual for the user.
And with the dots, we also add an event listener.
So whenever those dots get clicked, we move to the next slide and we create a function to handle that.
We're using slide index as our global value for whatever slide we're currently on.
And once we reset that value to whatever num value was clicked and we know that the value of X corresponds
because as we're looping through the images, we could take it from the parent there.
So we're using that value of X.
We need it to clear up the timer because of course we are clearing and setting a timer within the place,
slides function.
And then this is really the key function that we used in order to make our animation of our slides.
We selected the elements that we needed to use from the document object.
So these were generated dynamically so we couldn't keep them within the initial.
Otherwise they wouldn't exist.
We could have added them in as global values and then after we built them, we could have added them
in as well.
So there's a few different ways to handle this.
But usually I find the best way is when I want to use them.
Then this is where I make the selection of those elements in case anything changes and in case we've
got some script that's adding in images dynamically and so on.
So that could all be accounted for now.
So now next we loop through and we check to see if the slight index is greater than the length of slides.
And if it is, that means that we've run out of images and we've run out of content.
So we've got to reset it back to zero.
So this creates the loop where it endlessly loops through the slight index.
We loop through the sleights.
We did a display, none to the other slides and doing display none.
Remove some from the visible area.
And that means that the only one that we're showing is the one that we want to show.
So we're playing a display block to that.
So that's adding in that option of the display block.
There was actually one other thing that I did want to add in before we conclude, and that was adding
the class of Octave as we're looking for active here.
And if it's null, then we want to remove the class of active and then we want to set the class of Octave
to the appropriate Dort.
So let's do that.
And that's the first thing that we're going to do, is we're going to do a condition and we're checking
to see if Octave is equal to null.
And we saw within the console message that it is equal to null.
And this is on the first iteration, that it is equal to null because of course, we haven't set active
to anything.
So adding in that octave.
And if it's not know that we want to select the element that has active using class list and removing
that class of active from it.
So this will ensure that we only have one element with the class of active at any given time, and we
can use this active value to set the dots.
So just as we did the slides, we've got our dots that we select.
It over here within our Querrey selector node list and using the same format where we're using our slide
index in order to select that element, we can apply a style where actually this has got classless,
so doing classless, and we want it to add a class of active to it.
And then, of course, we've got our timer and time out there.
So next, all we need to do is set up a different value for the class of active.
And so this will show a different color for the active button, and that's exactly what we want.
So the background color for the active one can be white.
So I think we need to try that quickly.
And we can see actually shouldn't be white because that's making it disappear off the screen.
So let's do different value.
Let's try six, six, six.
So now it's a darker gray value.
And you can see that now as we move through that, the active one is turning darker.
So that was the one last part of this project that we needed to add and.
So to wrap it up, so the place slides was their key function that we used, so here we added in the
active, we loop through all of the display slides, set them to null, set the one that we wanted to
block.
And then finally we went through and we set the time out of the slides.
And this is the number of milliseconds that were timing out.
So essentially looping through the place.
Slides function over and over and over again because, of course, we're setting that timer within it.
So this will indefinitely loop forever.
The section.
Thanks again for taking the course.
And if you do have any questions, please feel free to connect with me.
I hope you enjoy the lessons and building out the slideshow application.