1
00:00:00,180 --> 00:00:07,020
So far, we have everything ready to go in all of our code, but the user can't see anything.

2
00:00:07,050 --> 00:00:08,610
We're going to take care of that.

3
00:00:08,820 --> 00:00:10,020
So no worries about that.

4
00:00:10,050 --> 00:00:11,880
We're going to take care of that in this lesson.

5
00:00:11,880 --> 00:00:16,560
So going into our builder function, which we created last time, I make some space in here.

6
00:00:16,980 --> 00:00:23,190
And first thing that we want to do is we want to loop through all of the images and we can use a for

7
00:00:23,190 --> 00:00:23,430
loop.

8
00:00:23,430 --> 00:00:26,260
There's not multiple ways to loop through contents of an array.

9
00:00:26,550 --> 00:00:32,940
So this time we'll just use a for loop and looping through my images and each one of we know that my

10
00:00:32,940 --> 00:00:35,030
images will have a length because it's an array.

11
00:00:35,190 --> 00:00:39,390
So going down here, you can see it within the value there that it's got a length of three.

12
00:00:39,550 --> 00:00:41,310
So we're going to loop through my image.

13
00:00:41,310 --> 00:00:45,240
And actually this should be my image is so looping through.

14
00:00:45,240 --> 00:00:46,950
We need a way to break out of the loop.

15
00:00:46,950 --> 00:00:52,560
So increment X and as we loop through, we're going to create some elements on the fly.

16
00:00:52,570 --> 00:00:55,110
So first of all, let's create our slide.

17
00:00:55,130 --> 00:01:01,290
So this is our main slide container using document method that we're using this create element and this

18
00:01:01,290 --> 00:01:04,680
is in JavaScript allows you to create elements dynamically.

19
00:01:05,040 --> 00:01:06,990
So now we've created that element object.

20
00:01:06,990 --> 00:01:09,270
If you want to see it, you can always log it out.

21
00:01:09,750 --> 00:01:12,300
And we're not going to see anything on our page quite yet.

22
00:01:12,510 --> 00:01:14,830
But you do see that it is creating these elements.

23
00:01:14,830 --> 00:01:16,760
So all of these devices are being created.

24
00:01:16,770 --> 00:01:19,530
We need to add in and we need to customize these debates.

25
00:01:19,540 --> 00:01:24,720
So taking that slide object that we just created where it's at some attributes, that tribute that we

26
00:01:24,720 --> 00:01:31,320
want to add in is a class and we want to add in my slides class and also we want to add in a feeding

27
00:01:31,320 --> 00:01:34,050
class so that we can feed them from one to the other.

28
00:01:34,050 --> 00:01:38,370
And we'll take care of updating the site at the styling for that next.

29
00:01:38,550 --> 00:01:42,990
So now when we log those out, we see we've got a bunch of divs with some classes.

30
00:01:43,020 --> 00:01:44,970
So we're getting somewhere next.

31
00:01:44,970 --> 00:01:47,370
Let's add in and create some images.

32
00:01:47,610 --> 00:01:54,150
So just as we created the div, we can use document and create elements.

33
00:01:54,510 --> 00:01:59,790
That's always fun, creating elements, of course, creating something new that doesn't exist yet on

34
00:01:59,790 --> 00:02:00,380
the page.

35
00:02:00,990 --> 00:02:04,710
So within the image, let's set an attribute to the image.

36
00:02:05,010 --> 00:02:09,630
And we know that with images we need to have a source for the images.

37
00:02:09,930 --> 00:02:13,880
And that's what we've got contained within are my images array.

38
00:02:14,190 --> 00:02:20,910
So luckily for us, we already have that value and we can use source and the value from our my images

39
00:02:20,910 --> 00:02:21,450
array.

40
00:02:21,810 --> 00:02:28,560
And because this is an array, so we indicate the item from the array as X, so that's where we get

41
00:02:28,560 --> 00:02:29,100
the item.

42
00:02:29,220 --> 00:02:31,710
And now we need to go down deeper into this.

43
00:02:31,710 --> 00:02:36,810
And we know that that has an object inside and the object has a value for IMG.

44
00:02:36,990 --> 00:02:41,590
So it's adding in that image and you can see that as well as we create those.

45
00:02:41,610 --> 00:02:47,060
So those are the images that we're creating so nice and neatly deposited in each one of those images.

46
00:02:47,460 --> 00:02:52,440
We also need to have value for our captions so we can set that up.

47
00:02:52,740 --> 00:02:56,220
And again, you guessed it, creating another element dynamically.

48
00:02:56,430 --> 00:02:58,980
And this elements can be a div.

49
00:02:58,980 --> 00:03:01,560
And this is going to contain the caption information.

50
00:03:01,770 --> 00:03:08,430
So let's add in our caption and class list add and we'll add a value for caption.

51
00:03:08,460 --> 00:03:12,410
So we'll add a class for caption and we'll add some styling to that later on.

52
00:03:12,750 --> 00:03:16,260
So we've got our cap and adding in some inner text to that.

53
00:03:16,620 --> 00:03:21,150
And the entire text is what's already contained within the images array.

54
00:03:21,390 --> 00:03:27,210
And we need to select the right value than the index and we want to output a value for caption.

55
00:03:27,600 --> 00:03:33,750
You can see these as well as we're building them out and refresh and you can see that we've got the

56
00:03:33,750 --> 00:03:37,050
caption values, so everything looks pretty good.

57
00:03:37,620 --> 00:03:41,790
So next, what we need to do is we need to append all of those.

58
00:03:41,790 --> 00:03:44,910
So the caption and the images to the slide object.

59
00:03:45,210 --> 00:03:51,420
So taking that slide object and this is how you add those dynamic elements to another elements where

60
00:03:51,420 --> 00:03:52,710
you do append a child.

61
00:03:52,710 --> 00:03:56,640
So it's the method that we can use and we're first appending the image.

62
00:03:56,910 --> 00:04:01,410
And the only thing that is different here is the order that they're going to get appended.

63
00:04:01,620 --> 00:04:07,110
So if we do it in reverse, if we do cap first and then image, the cap will be above the image.

64
00:04:07,320 --> 00:04:12,480
So you can see how that's going to look when we open this up, because we stated the image as the first

65
00:04:12,480 --> 00:04:15,780
one we appended and then we appended another child, which was captioned.

66
00:04:16,020 --> 00:04:20,100
So if we reverse the order of these statements, then that would look a little bit different.

67
00:04:20,400 --> 00:04:26,490
So lastly, what we want to do is we want to append it to our slide container so we have an option.

68
00:04:26,490 --> 00:04:33,330
We can select our slide container up here or we can simply use a query selector value and select that.

69
00:04:33,480 --> 00:04:40,080
So let's add that in so doing documents and query selector, we need to select the element that has

70
00:04:40,080 --> 00:04:47,340
the class of slide container and we want to use that same method append child and this time we want

71
00:04:47,340 --> 00:04:49,650
to spend the slide to that child.

72
00:04:49,770 --> 00:04:51,030
So let's see what how that looks.

73
00:04:51,270 --> 00:04:58,050
So now first and lastly and finally, we should have something visual represented on the page.

74
00:04:58,410 --> 00:04:59,460
So there's our image.

75
00:04:59,460 --> 00:04:59,790
There's a.

76
00:05:00,130 --> 00:05:05,260
Image that we're representing, and because we do have the overflow hidden, we don't see the rest of

77
00:05:05,260 --> 00:05:07,720
the images that are within that slide container.

78
00:05:07,960 --> 00:05:11,230
And if you do want to see the images, I'll show you a quick way to do that.

79
00:05:11,590 --> 00:05:16,490
So you could just remove that and you can see that you've got all of the images are ready to go.

80
00:05:16,780 --> 00:05:23,350
So we're ready to move on and loop the different images and their values and their caption information.

81
00:05:23,770 --> 00:05:26,920
And you also notice that the caption information isn't showing up.

82
00:05:27,110 --> 00:05:33,090
So we need to quickly before we conclude this lesson, add in a class within our style for that.

83
00:05:33,430 --> 00:05:39,540
So taking our caption class that we added in and we can set a color for that text.

84
00:05:40,000 --> 00:05:47,710
So how about we set it to F three, three, three and set up font size, adding in a little bit of padding

85
00:05:47,710 --> 00:05:53,460
and position it as absolute so that we can specify that we want it at the bottom.

86
00:05:53,950 --> 00:05:59,800
So maybe 18 picks up off the bottom and width can be 100 percent.

87
00:05:59,800 --> 00:06:03,730
And that means that if we text a line center that should center those captions.

88
00:06:04,010 --> 00:06:04,990
Let's see what that looks like.

89
00:06:05,020 --> 00:06:09,790
So there we've got our caption on our images and you can adjust this as needed if you want to move it

90
00:06:09,790 --> 00:06:12,560
closer to the bottom and if you want to make it smaller.

91
00:06:12,700 --> 00:06:17,860
So right now, it's fairly large because I've got a fairly small screen that we're working off of.

92
00:06:18,190 --> 00:06:20,640
So you can adjust that as needed.

93
00:06:20,680 --> 00:06:28,360
Go ahead and add this and practice creating elements on the fly using the create element method and

94
00:06:28,360 --> 00:06:30,040
then append those elements.

95
00:06:30,040 --> 00:06:34,420
You can append them into each others, the ones that you dynamically created, as well as you can append

96
00:06:34,420 --> 00:06:37,050
it to an existing one within your HTML.

97
00:06:37,320 --> 00:06:42,010
So try that out and you're going to be ready for the next lesson where we create some interaction and

98
00:06:42,010 --> 00:06:44,310
we also need to add in those indicators.

99
00:06:44,560 --> 00:06:46,330
So that's still all yet to come.

100
00:06:46,360 --> 00:06:51,460
And then, of course, we need to launch our slideshow because nothing is happening yet, although we

101
00:06:51,460 --> 00:06:52,510
do see the images.