1 00:00:00,550 --> 00:00:06,650 In the previous lesson, we applied our styling and also added in our HTML elements. 2 00:00:06,910 --> 00:00:11,910 Now, sometimes it is easier to build out a little bit of the application and then apply the styling. 3 00:00:12,070 --> 00:00:18,280 And in this case, you can also apply the styling that suits your needs, adjusted the slide container 4 00:00:18,280 --> 00:00:20,530 to be 80 percent by 60 percent. 5 00:00:20,560 --> 00:00:27,160 So we've on a percentage basis so that we can see it within the smaller screen size area and we don't 6 00:00:27,160 --> 00:00:29,350 have any overlapping in its outside of the page. 7 00:00:29,560 --> 00:00:33,490 And of course you can adjust this as needed for your own project. 8 00:00:33,820 --> 00:00:39,880 So now going into our JavaScript, we need to set up some variables and one of the variables is going 9 00:00:39,880 --> 00:00:41,280 to set some global variables. 10 00:00:41,620 --> 00:00:44,870 So we need to track what the slide index is. 11 00:00:45,190 --> 00:00:46,870 So where the slide is currently at. 12 00:00:47,050 --> 00:00:51,470 We're going to start at zero and the slides are going to be the same as an array. 13 00:00:51,520 --> 00:00:56,830 We're going to start it at zero, then one, two, three, four, or however many images we have. 14 00:00:57,100 --> 00:00:59,860 We want to make this as dynamic as possible. 15 00:01:00,040 --> 00:01:01,360 We also need a timer. 16 00:01:01,480 --> 00:01:06,110 So this is where we can set our intervals and we can also clear out intervals. 17 00:01:06,150 --> 00:01:07,810 We're going to need to clear out intervals. 18 00:01:07,970 --> 00:01:14,830 If the user is hitting the dots within the indicator and moving to the next slide automatically, we're 19 00:01:14,830 --> 00:01:20,590 going to have to clear the interval of the timer that is automatically progressing our slides or set 20 00:01:20,590 --> 00:01:21,510 that up as well. 21 00:01:21,940 --> 00:01:23,860 And next and last. 22 00:01:23,860 --> 00:01:29,560 But of course, not least we need to load a bunch of images so these images can be a const because we're 23 00:01:29,560 --> 00:01:34,060 not updating them and we can create an array called my images. 24 00:01:34,240 --> 00:01:40,210 And this is actually going to be an array with objects inside so we can contain multiple values that 25 00:01:40,210 --> 00:01:44,110 we can utilize within our within our index items. 26 00:01:44,410 --> 00:01:48,160 So first of all, we're going to need an image in order to display an image. 27 00:01:48,160 --> 00:01:49,000 We need an image. 28 00:01:49,120 --> 00:01:55,420 We need an image path or going to be using placeholder dot com and there a great resource if you are 29 00:01:55,420 --> 00:01:59,810 developing an application and you need some images, some placeholder images. 30 00:01:59,830 --> 00:02:03,070 So this is a great, excellent resource to provide those. 31 00:02:03,350 --> 00:02:09,790 So I've just added in and this image is going to be a specific color and it's going to have a text of 32 00:02:09,790 --> 00:02:10,880 one image on it. 33 00:02:11,290 --> 00:02:15,880 We also want to have captions and you can customize these as needed. 34 00:02:15,910 --> 00:02:21,610 So I'm going to create within the object to create a name called caption, and then this can be a descriptor 35 00:02:21,610 --> 00:02:25,300 for that image or it could be whatever you want it to contain. 36 00:02:25,330 --> 00:02:28,000 So right now, we'll just put some dummy content in there. 37 00:02:28,000 --> 00:02:32,440 So a comma separated out and you can create as many of these as you need. 38 00:02:32,740 --> 00:02:38,410 And in this case, I believe, will probably just create three of them and we'll update the images to 39 00:02:38,410 --> 00:02:39,580 be slightly different. 40 00:02:39,590 --> 00:02:40,720 So they're not all the same. 41 00:02:40,720 --> 00:02:45,130 And we can tell them apart and they can also have different caption contest, so on, and we'll make 42 00:02:45,130 --> 00:02:46,470 them look slightly different. 43 00:02:46,690 --> 00:02:48,630 So this one will update the color. 44 00:02:48,640 --> 00:02:50,590 So it's a little bit darker there color. 45 00:02:50,590 --> 00:02:53,400 So set it up one and see what that looks like. 46 00:02:53,410 --> 00:02:56,650 You could customize this and obviously you're going to have your own images that you're going to be 47 00:02:56,650 --> 00:02:58,090 placing within this object. 48 00:02:58,100 --> 00:02:59,530 And this is going to be fully dynamic. 49 00:02:59,740 --> 00:03:05,560 So we're going to build out the content of the page, all of our slide content using this, my images 50 00:03:05,560 --> 00:03:06,540 object array. 51 00:03:06,790 --> 00:03:13,150 So placing in the path of the image and adding in a caption and you can add as many of these as needed. 52 00:03:13,180 --> 00:03:20,020 So once we've built that out, we're ready to build out all of our content, our visible content area 53 00:03:20,020 --> 00:03:22,060 for our user. 54 00:03:22,060 --> 00:03:25,000 And we're going to launch a function called build. 55 00:03:25,120 --> 00:03:31,000 And then just below we'll set that function up so that there's our builder function console log. 56 00:03:31,210 --> 00:03:35,220 We can log it to my images object so that we can see that within the console. 57 00:03:35,230 --> 00:03:43,120 So go back refresh and you can see that we've loaded all of the object information and it's all nicely 58 00:03:43,120 --> 00:03:45,770 compacted into a nice object array. 59 00:03:46,060 --> 00:03:51,730 So we've got array length, which is three items in there, and these items within an array, you can 60 00:03:51,730 --> 00:03:59,350 use different types of data types so you can use numbers, text booleans and you can use arrays as well 61 00:03:59,380 --> 00:04:00,820 as well as objects. 62 00:04:00,820 --> 00:04:07,000 And in this case, objects are best suited because they provide us the ability to have more of a consistent 63 00:04:07,000 --> 00:04:13,030 format where we've got an image and a caption and any other data that we want to keep track of, we 64 00:04:13,030 --> 00:04:14,470 could output in this type of format. 65 00:04:14,500 --> 00:04:15,360 So now it's up to you. 66 00:04:15,640 --> 00:04:17,170 Go ahead and listen to your project. 67 00:04:17,170 --> 00:04:20,560 Set up the some of the default global variables that we're going to create. 68 00:04:20,560 --> 00:04:26,020 Your array object, my images, objects you can add in your own or you could use placeholder and then 69 00:04:26,020 --> 00:04:30,580 invoke a function called builder and set up some default content within that function. 70 00:04:30,580 --> 00:04:32,170 And you're ready to move on to the next lesson.