1
00:00:00,780 --> 00:00:07,950
Congratulations on making it to the last lesson of this section where we're building out our slide image

2
00:00:07,950 --> 00:00:14,940
slider, and if you've gotten this far, then so if you do have any questions or need clarifications,

3
00:00:15,090 --> 00:00:16,380
feel free to connect with me.

4
00:00:16,410 --> 00:00:20,790
I'm always happy to help and clarify any of the content presented within the courses.

5
00:00:20,790 --> 00:00:23,970
And of course, the source code has also been included.

6
00:00:24,090 --> 00:00:29,010
So you can take that source code, try it out for yourself and create your own version of the project.

7
00:00:29,250 --> 00:00:32,160
So right now, everything looks like it's working properly.

8
00:00:32,280 --> 00:00:36,840
And of course, I could always use a little bit of styling and see assess updates, but I'm not going

9
00:00:36,840 --> 00:00:40,500
to worry about that because, of course, we are focusing on JavaScript.

10
00:00:40,680 --> 00:00:46,320
So let's do a quick code, run through and check out all of the code that we've written in the earlier

11
00:00:46,320 --> 00:00:46,890
lessons.

12
00:00:47,160 --> 00:00:51,210
So I started out by setting up what we wanted our slide to look like.

13
00:00:51,400 --> 00:00:55,380
So we set up a bunch of success and that's what we've got in here.

14
00:00:55,650 --> 00:01:00,300
And we set up the captions afterwards as we built it out.

15
00:01:00,300 --> 00:01:05,910
And sometimes it is easier to build some of the JavaScript and then take a look at the costs and make

16
00:01:05,910 --> 00:01:08,610
the adjustments, because then you could actually visually see it.

17
00:01:08,910 --> 00:01:14,580
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

18
00:01:14,580 --> 00:01:18,630
the JavaScript in the case because I did want to focus on the JavaScript part.

19
00:01:18,930 --> 00:01:21,480
We tried to keep the HTML to minimal as well.

20
00:01:21,630 --> 00:01:26,300
So setting up a couple elements there with some key classes that we needed to make use of.

21
00:01:26,640 --> 00:01:32,940
Then we set up our global variables that we were using throughout the upcoming functions within JavaScript.

22
00:01:33,120 --> 00:01:38,250
And then once we set those, we were ready to build our output area for the user.

23
00:01:38,400 --> 00:01:43,830
So we used a function called builder setting up that builder and exactly what it did, it created a

24
00:01:43,830 --> 00:01:44,850
bunch of elements.

25
00:01:45,000 --> 00:01:49,950
So you create element several times within this function, actually four times.

26
00:01:50,130 --> 00:01:53,460
And we appended all of those elements to parents.

27
00:01:53,610 --> 00:01:57,780
And then finally we added the parents elements that we had created.

28
00:01:57,810 --> 00:01:59,730
So adding all of that stuff in.

29
00:01:59,850 --> 00:02:02,070
So that's visual for the user.

30
00:02:02,340 --> 00:02:05,370
And with the dots, we also add an event listener.

31
00:02:05,640 --> 00:02:11,580
So whenever those dots get clicked, we move to the next slide and we create a function to handle that.

32
00:02:11,970 --> 00:02:17,730
We're using slide index as our global value for whatever slide we're currently on.

33
00:02:18,000 --> 00:02:25,920
And once we reset that value to whatever num value was clicked and we know that the value of X corresponds

34
00:02:25,920 --> 00:02:29,640
because as we're looping through the images, we could take it from the parent there.

35
00:02:29,640 --> 00:02:31,440
So we're using that value of X.

36
00:02:31,710 --> 00:02:37,020
We need it to clear up the timer because of course we are clearing and setting a timer within the place,

37
00:02:37,020 --> 00:02:37,920
slides function.

38
00:02:38,100 --> 00:02:44,580
And then this is really the key function that we used in order to make our animation of our slides.

39
00:02:44,790 --> 00:02:48,990
We selected the elements that we needed to use from the document object.

40
00:02:49,170 --> 00:02:54,120
So these were generated dynamically so we couldn't keep them within the initial.

41
00:02:54,300 --> 00:02:55,980
Otherwise they wouldn't exist.

42
00:02:56,010 --> 00:03:01,440
We could have added them in as global values and then after we built them, we could have added them

43
00:03:01,440 --> 00:03:01,980
in as well.

44
00:03:01,980 --> 00:03:03,810
So there's a few different ways to handle this.

45
00:03:04,080 --> 00:03:07,440
But usually I find the best way is when I want to use them.

46
00:03:07,450 --> 00:03:11,970
Then this is where I make the selection of those elements in case anything changes and in case we've

47
00:03:11,970 --> 00:03:15,270
got some script that's adding in images dynamically and so on.

48
00:03:15,450 --> 00:03:17,660
So that could all be accounted for now.

49
00:03:18,150 --> 00:03:24,750
So now next we loop through and we check to see if the slight index is greater than the length of slides.

50
00:03:24,750 --> 00:03:29,040
And if it is, that means that we've run out of images and we've run out of content.

51
00:03:29,050 --> 00:03:30,930
So we've got to reset it back to zero.

52
00:03:30,930 --> 00:03:34,710
So this creates the loop where it endlessly loops through the slight index.

53
00:03:35,070 --> 00:03:36,840
We loop through the sleights.

54
00:03:36,840 --> 00:03:41,400
We did a display, none to the other slides and doing display none.

55
00:03:41,550 --> 00:03:43,530
Remove some from the visible area.

56
00:03:43,710 --> 00:03:48,360
And that means that the only one that we're showing is the one that we want to show.

57
00:03:48,450 --> 00:03:50,610
So we're playing a display block to that.

58
00:03:50,760 --> 00:03:54,690
So that's adding in that option of the display block.

59
00:03:54,930 --> 00:03:59,580
There was actually one other thing that I did want to add in before we conclude, and that was adding

60
00:03:59,580 --> 00:04:04,110
the class of Octave as we're looking for active here.

61
00:04:04,260 --> 00:04:11,850
And if it's null, then we want to remove the class of active and then we want to set the class of Octave

62
00:04:11,850 --> 00:04:13,470
to the appropriate Dort.

63
00:04:13,740 --> 00:04:14,700
So let's do that.

64
00:04:14,910 --> 00:04:18,840
And that's the first thing that we're going to do, is we're going to do a condition and we're checking

65
00:04:18,840 --> 00:04:22,770
to see if Octave is equal to null.

66
00:04:22,780 --> 00:04:26,010
And we saw within the console message that it is equal to null.

67
00:04:26,220 --> 00:04:31,110
And this is on the first iteration, that it is equal to null because of course, we haven't set active

68
00:04:31,110 --> 00:04:31,860
to anything.

69
00:04:32,340 --> 00:04:34,230
So adding in that octave.

70
00:04:34,230 --> 00:04:41,640
And if it's not know that we want to select the element that has active using class list and removing

71
00:04:41,640 --> 00:04:44,370
that class of active from it.

72
00:04:44,920 --> 00:04:51,720
So this will ensure that we only have one element with the class of active at any given time, and we

73
00:04:51,720 --> 00:04:55,560
can use this active value to set the dots.

74
00:04:55,860 --> 00:05:00,270
So just as we did the slides, we've got our dots that we select.

75
00:05:00,350 --> 00:05:07,970
It over here within our Querrey selector node list and using the same format where we're using our slide

76
00:05:07,970 --> 00:05:15,590
index in order to select that element, we can apply a style where actually this has got classless,

77
00:05:16,220 --> 00:05:21,110
so doing classless, and we want it to add a class of active to it.

78
00:05:21,570 --> 00:05:24,640
And then, of course, we've got our timer and time out there.

79
00:05:25,010 --> 00:05:30,020
So next, all we need to do is set up a different value for the class of active.

80
00:05:30,230 --> 00:05:36,480
And so this will show a different color for the active button, and that's exactly what we want.

81
00:05:36,830 --> 00:05:40,580
So the background color for the active one can be white.

82
00:05:40,910 --> 00:05:42,770
So I think we need to try that quickly.

83
00:05:43,160 --> 00:05:48,530
And we can see actually shouldn't be white because that's making it disappear off the screen.

84
00:05:48,540 --> 00:05:50,950
So let's do different value.

85
00:05:51,680 --> 00:05:52,840
Let's try six, six, six.

86
00:05:53,660 --> 00:05:55,460
So now it's a darker gray value.

87
00:05:55,790 --> 00:06:01,080
And you can see that now as we move through that, the active one is turning darker.

88
00:06:01,100 --> 00:06:04,580
So that was the one last part of this project that we needed to add and.

89
00:06:05,550 --> 00:06:11,560
So to wrap it up, so the place slides was their key function that we used, so here we added in the

90
00:06:11,580 --> 00:06:18,150
active, we loop through all of the display slides, set them to null, set the one that we wanted to

91
00:06:18,150 --> 00:06:18,590
block.

92
00:06:19,140 --> 00:06:23,850
And then finally we went through and we set the time out of the slides.

93
00:06:23,850 --> 00:06:26,360
And this is the number of milliseconds that were timing out.

94
00:06:26,580 --> 00:06:28,300
So essentially looping through the place.

95
00:06:28,320 --> 00:06:33,870
Slides function over and over and over again because, of course, we're setting that timer within it.

96
00:06:34,090 --> 00:06:36,900
So this will indefinitely loop forever.

97
00:06:37,140 --> 00:06:37,820
The section.

98
00:06:37,830 --> 00:06:39,630
Thanks again for taking the course.

99
00:06:39,630 --> 00:06:42,890
And if you do have any questions, please feel free to connect with me.

100
00:06:42,900 --> 00:06:46,800
I hope you enjoy the lessons and building out the slideshow application.