1 00:00:00,330 --> 00:00:05,760 Welcome back, this lesson, we're going to create a drop down with all of the elements on the page 2 00:00:05,760 --> 00:00:10,670 that are contained within the main div with an ID of mean. 3 00:00:10,890 --> 00:00:15,540 So all of these elements, it doesn't matter how many we have in here, fully dynamic, we're going 4 00:00:15,540 --> 00:00:18,360 to have the option to select any one of those. 5 00:00:18,480 --> 00:00:22,080 And then we can manipulate the inner text, the background, the text color. 6 00:00:22,290 --> 00:00:26,220 We can toggle add in classes and a whole bunch of really cool fun stuff. 7 00:00:26,490 --> 00:00:34,410 So let's add that into the project where we've got another select and just as we did with the classes, 8 00:00:34,560 --> 00:00:37,520 we can populate this select object. 9 00:00:37,860 --> 00:00:38,970 So let's give it a name. 10 00:00:38,970 --> 00:00:41,760 And the name can be anything we want. 11 00:00:41,940 --> 00:00:46,350 Let's call it Al Maker for a short for element maker. 12 00:00:46,710 --> 00:00:53,160 And then we're going to select this object in our JavaScript and connect that so that we can utilize 13 00:00:53,160 --> 00:00:53,360 it. 14 00:00:53,970 --> 00:00:57,120 So it's the same way as we did the select classes. 15 00:00:57,390 --> 00:00:59,430 We can literally just copy this. 16 00:00:59,430 --> 00:01:04,650 And this can now be called our maker and you don't have to call it the same thing. 17 00:01:04,890 --> 00:01:08,390 Usually I just do that so that I can reference it a lot easier. 18 00:01:08,670 --> 00:01:11,880 So now we've got the object that will make her object. 19 00:01:12,270 --> 00:01:19,470 And usually, of course, again, I like to check to make sure that we've got that L maker. 20 00:01:19,980 --> 00:01:25,920 So we've got that select element and we're ready to make updates to it using JavaScript. 21 00:01:26,400 --> 00:01:32,520 So as we've got over here, we see that we select the node list so we can loop through each one of the 22 00:01:32,520 --> 00:01:33,840 items within the node list. 23 00:01:34,230 --> 00:01:40,140 And just as we did with the array, we want to create a bunch of different options here. 24 00:01:40,260 --> 00:01:44,070 So the user has a listing of all the elements that are available. 25 00:01:44,460 --> 00:01:45,690 So let's add that in. 26 00:01:45,690 --> 00:01:51,080 And I'm just going to update this so that we can see in Urtext. 27 00:01:51,090 --> 00:01:57,150 So it's a little bit clearer output for the user and then this one can be select element. 28 00:01:57,480 --> 00:01:59,070 Save that, refresh that. 29 00:01:59,070 --> 00:02:01,110 So that's a little bit clearer for the user. 30 00:02:01,860 --> 00:02:05,180 And I'm also going to take this main and I'm going to move it down. 31 00:02:05,460 --> 00:02:11,190 So in case we're updating and we're adding and things are fluctuating around that it's not moving our 32 00:02:11,190 --> 00:02:12,270 main input form. 33 00:02:12,460 --> 00:02:14,580 So now we're all the updating elements. 34 00:02:14,580 --> 00:02:19,590 The elements that are updating are below and we've got the option to select the elements and we've got 35 00:02:19,590 --> 00:02:21,720 that added into the cell. 36 00:02:21,900 --> 00:02:24,240 The L make her object. 37 00:02:24,600 --> 00:02:31,170 So that means that we're ready to create that and usually let's create a function in order to do that. 38 00:02:31,170 --> 00:02:37,800 So we can call it dropdown builder and we don't need to pass in any parameters because these are global 39 00:02:37,800 --> 00:02:39,290 objects that we can utilize. 40 00:02:39,630 --> 00:02:47,010 So we've got all of those values within the node list and I usually like to relisted so we can copy 41 00:02:47,010 --> 00:02:54,720 and paste the code that's available here and we can just call to dropdown builder within the DOM content 42 00:02:54,720 --> 00:03:00,000 loaded function so we can call DropDown Builder any time we want to build out unordered list. 43 00:03:00,270 --> 00:03:07,440 So we're selecting all of those elements, adding it into the node list and also we can add it in multiple 44 00:03:07,440 --> 00:03:07,770 times. 45 00:03:07,770 --> 00:03:09,300 So it's not going to be any harm. 46 00:03:09,300 --> 00:03:14,100 And in case there's updates to the elements which we are going to be doing later on in one of the upcoming 47 00:03:14,100 --> 00:03:18,990 lessons, dynamically adding elements as well to the page, and then that's going to have to add into 48 00:03:18,990 --> 00:03:19,470 the list. 49 00:03:19,620 --> 00:03:22,950 So we're constantly have to rebuild this dropdown list. 50 00:03:23,190 --> 00:03:29,100 So as we iterate through, we need to get the index value because this is how we can tie it into the 51 00:03:29,100 --> 00:03:29,790 node list. 52 00:03:30,000 --> 00:03:33,960 We can retrieve back its index value, how it's showing on the page. 53 00:03:34,170 --> 00:03:40,730 So just as we're getting item, we can also get the index of each of the items and you can also do just 54 00:03:40,740 --> 00:03:42,030 a regular as well. 55 00:03:42,300 --> 00:03:48,320 So you can see that now I'm actually getting the index values, I'm getting the item, the index value. 56 00:03:48,420 --> 00:03:54,570 So this is going to make it a lot easier for us to reference, because now whenever I want to reference 57 00:03:54,570 --> 00:04:00,780 a particular element, I can use that global node list where I can type node list. 58 00:04:01,290 --> 00:04:07,680 And because this is within an array type format, I can select any one of the elements just by specifying 59 00:04:07,680 --> 00:04:11,370 their index value, how they're appearing within the node list. 60 00:04:11,970 --> 00:04:17,580 So that's going to make it easier for us to make those updates and select the appropriate element when 61 00:04:17,580 --> 00:04:20,580 we do our update of that element content. 62 00:04:21,030 --> 00:04:25,230 So the next thing that we want to do is build those options in the dropdown. 63 00:04:25,500 --> 00:04:30,870 And this is actually going to be the exact same format, except we're going to use index as the value 64 00:04:30,870 --> 00:04:32,910 that's represented to the user. 65 00:04:33,150 --> 00:04:39,240 So the value here is going to be index and this is that hidden value in the dropdown. 66 00:04:39,250 --> 00:04:44,730 So if you go to the dropdown, you see that you've got within the option, you've got a value and then 67 00:04:44,730 --> 00:04:45,960 you've got the inner text. 68 00:04:46,170 --> 00:04:48,150 So the value is the one that's hidden. 69 00:04:48,330 --> 00:04:56,160 And if we want just the index values, we can keep that in value, whereas within the item we can output 70 00:04:56,190 --> 00:04:59,790 its tag name and that will return back. 71 00:04:59,910 --> 00:05:06,850 The tag value that's associated with it and then dropping it into the element maker object. 72 00:05:06,990 --> 00:05:11,070 So we're ready to dynamically generate a list of all the elements on the page. 73 00:05:11,280 --> 00:05:13,890 So you can see now they're all represented here. 74 00:05:14,340 --> 00:05:22,090 And the values of this input, if you go to inspect, are going to correspond with the index value. 75 00:05:22,470 --> 00:05:29,700 So that means that we can take those values and as we pass them in, we can update whatever the selected 76 00:05:29,700 --> 00:05:30,580 element is. 77 00:05:30,900 --> 00:05:32,330 So let's call it temp. 78 00:05:33,000 --> 00:05:38,990 And this is going to be whatever the value of sailmaker is. 79 00:05:39,330 --> 00:05:43,580 So whatever the current value is in, this is going to return back that index value. 80 00:05:43,590 --> 00:05:46,260 So that's getting those values from the HTML. 81 00:05:46,590 --> 00:05:54,460 And instead of select element, we can update that element to temp element and do a refresh. 82 00:05:54,900 --> 00:06:00,240 So within the node, Lyster, so this is returning back an index value and we need to reference that 83 00:06:00,840 --> 00:06:02,370 value from the node list. 84 00:06:02,430 --> 00:06:03,470 So let's try that out. 85 00:06:03,840 --> 00:06:10,940 So now when we select the div or the paragraph and we do an update, you can see it's updating it. 86 00:06:11,100 --> 00:06:17,010 You can also add in padding, bigger padding, you can add in the border, you can toggle the bigger. 87 00:06:17,160 --> 00:06:19,740 So you've got a lot of the options that are available to you. 88 00:06:19,890 --> 00:06:25,620 I can select any one of these elements and I can make updates to the what the content that's available 89 00:06:25,620 --> 00:06:25,860 here. 90 00:06:26,070 --> 00:06:32,220 And also, just as we saw earlier, we can update some of the text color for one or two as well. 91 00:06:32,250 --> 00:06:35,310 So it's close that and updates the text color updates. 92 00:06:35,580 --> 00:06:37,470 We can update the background color. 93 00:06:38,310 --> 00:06:39,840 So you need to close these. 94 00:06:40,730 --> 00:06:44,660 And we can select any one of the divs and apply these properties to them. 95 00:06:44,810 --> 00:06:46,100 So go ahead and try this out. 96 00:06:46,100 --> 00:06:52,160 And now we're fully dynamic and the next thing that we want to do is have the ability to add even more 97 00:06:52,670 --> 00:06:59,210 elements on the page and as well to apply event listeners to the existing elements. 98 00:06:59,360 --> 00:07:00,890 So we maybe we want to remove them. 99 00:07:00,890 --> 00:07:03,440 So if we click, that could remove those elements. 100 00:07:03,770 --> 00:07:06,200 So I'll show you how to do all of that coming up. 101 00:07:06,200 --> 00:07:09,890 So dynamically add elements as well as remove elements. 102 00:07:10,130 --> 00:07:14,600 And then we constantly have to rebuild the list as we loop through this. 103 00:07:14,780 --> 00:07:18,130 And there's one other thing that I did want to add in before we conclude. 104 00:07:18,410 --> 00:07:21,290 So every time we're going in to rebuild this list. 105 00:07:21,560 --> 00:07:26,530 So potentially we might be calling on dropdown builder every time we have some updates to the list. 106 00:07:26,870 --> 00:07:32,060 So this is just to clear out any of the existing HTML that's available with an L.. 107 00:07:32,150 --> 00:07:34,970 A. So that we're starting out fresh all the time. 108 00:07:35,750 --> 00:07:37,340 So go ahead and add this into your project.