WEBVTT 00:00:06.810 --> 00:00:13.450 In this video we're going to learn how to use the query UI to make similar elements flexible. 00:00:13.860 --> 00:00:19.790 Well we're going to be doing exactly we're going to create a list inside the Apple div and then we'll 00:00:19.860 --> 00:00:26.820 make the list items selectable so they can be selected either individually or we can select them as 00:00:26.820 --> 00:00:33.390 a group and then later later on we'll write some code so that once we select a specific item of the 00:00:33.390 --> 00:00:39.820 list we can see that item added to the Microsoft Dave. 00:00:40.390 --> 00:00:41.190 OK. 00:00:41.710 --> 00:00:42.210 OK. 00:00:42.480 --> 00:00:48.660 So let's first of all creates a lists inside the Apple div so we can get rid of the paragraph and we 00:00:48.660 --> 00:00:56.580 will replace it using an ordered list of some list items in there. 00:00:56.640 --> 00:01:04.980 So going to go for comics the BMW Mercedes for example. 00:01:05.150 --> 00:01:06.040 OK. 00:01:06.930 --> 00:01:13.680 So we're going to be styling these list items using a J.Crew you buy class. 00:01:13.740 --> 00:01:17.250 So we're going to go for the United States defaults. 00:01:17.250 --> 00:01:27.410 So you see state defaults close to that for all these items. 00:01:29.920 --> 00:01:30.270 OK. 00:01:30.270 --> 00:01:35.920 And also let's give the list an I.D. It's a list. 00:01:36.480 --> 00:01:38.210 OK. 00:01:38.940 --> 00:01:43.390 Now let's add some styling of the list items. 00:01:43.480 --> 00:01:50.550 It's change the font size to two. 00:01:51.240 --> 00:02:00.890 And let's add some watching bottom five pixels for example. 00:02:01.210 --> 00:02:02.870 OK. 00:02:03.020 --> 00:02:09.790 And also let's change the styling of the apple so that the height is O2. 00:02:12.100 --> 00:02:14.130 OK that was better. 00:02:14.350 --> 00:02:23.680 Also has some padding that we have some space between the last item and the border of the of the device 00:02:23.690 --> 00:02:30.380 so body big deals you know. 00:02:30.870 --> 00:02:36.350 OK let's let's make the techs aligned in the sense. 00:02:36.370 --> 00:02:42.480 So it's used to explain it to you and say it just sounds OK. 00:02:42.690 --> 00:02:44.000 That looks great. 00:02:44.130 --> 00:02:44.500 All right. 00:02:44.550 --> 00:02:57.780 Now we're going to make the list so flexible so to do that's we will select the list using its ID which 00:02:57.780 --> 00:02:59.020 is LIST. 00:02:59.520 --> 00:03:04.710 And then we'll use a method. 00:03:05.140 --> 00:03:09.130 It's flexible. 00:03:09.480 --> 00:03:16.380 So if you're fresh note the list items are going to be flexible but we cannot see any change because 00:03:16.380 --> 00:03:23.450 we need to style the list items when they are selected and also when they are being selected. 00:03:23.730 --> 00:03:24.340 OK. 00:03:24.570 --> 00:03:26.820 So let's go to our styling 00:03:29.340 --> 00:03:36.290 and styles the items that are being selected. 00:03:36.420 --> 00:03:43.230 So we need to styles First of all we need to access the list using its ID and we are styling the list 00:03:43.290 --> 00:03:49.630 items of class you are selecting which means that they are being selected. 00:03:49.860 --> 00:03:50.300 OK. 00:03:50.310 --> 00:03:54.370 What we do will change the background color of the list item. 00:03:54.510 --> 00:03:59.520 We cannot use the background color property for list items we use background. 00:04:00.030 --> 00:04:05.640 Let's say that to this for example. 00:04:06.260 --> 00:04:09.990 And let's do the same thing. 00:04:12.960 --> 00:04:13.380 The 00:04:16.260 --> 00:04:19.080 items that are selected. 00:04:20.310 --> 00:04:20.610 OK. 00:04:20.790 --> 00:04:28.590 And we can see or e-tailing because that one was selected and listed as the background color. 00:04:29.730 --> 00:04:30.990 Something like that. 00:04:31.260 --> 00:04:36.590 And also let's change the color of Tex to whites. 00:04:38.200 --> 00:04:43.980 OK so now if we selects an item we can see that while it means that except it changes and also once 00:04:44.010 --> 00:04:46.590 it's selected we can see the styling. 00:04:46.900 --> 00:04:48.370 All right. 00:04:48.840 --> 00:04:51.000 OK. 00:04:51.600 --> 00:05:02.250 Now the next challenge is to write some code so that once we select the item we see the item value being 00:05:02.280 --> 00:05:04.300 added to the Microsoft microstate. 00:05:04.530 --> 00:05:11.270 So if we select our differences we want to see a line here with Audi appearing in the macros. 00:05:11.290 --> 00:05:16.110 And also if we do this we select another item another line and so on 00:05:19.500 --> 00:05:24.180 we can selects items either individually or as a group. 00:05:24.210 --> 00:05:32.090 So when we select them as a group we want to be want to see the whole group being shown in the microwave 00:05:32.340 --> 00:05:34.200 as well. 00:05:34.860 --> 00:05:38.730 So how to do this. 00:05:38.730 --> 00:05:42.610 We're going to need to use an option inside the selectable method. 00:05:42.840 --> 00:05:49.180 First we need the curly brackets and our option is going to be he's going to go inside the curly bracket 00:05:49.180 --> 00:05:49.300 . 00:05:49.300 --> 00:05:54.030 So the option we're going to be using here is stop. 00:05:54.420 --> 00:06:01.110 Basically what this means is once the selecting activity stops we're going to be executing some code 00:06:01.950 --> 00:06:02.720 . 00:06:03.650 --> 00:06:07.680 And so this option will take a function 00:06:11.640 --> 00:06:18.230 and we're going to be writing the code to execute inside the curly brackets of the function. 00:06:19.290 --> 00:06:19.860 OK. 00:06:20.340 --> 00:06:25.200 Just bear in mind that we don't have any semi-colon after the function and also if we need to add another 00:06:25.200 --> 00:06:30.360 option as we have seen earlier we can use a comma to add another option. 00:06:30.360 --> 00:06:31.270 All right. 00:06:31.710 --> 00:06:39.770 So first we need to run a specific piece of code for each item that is selected. 00:06:40.110 --> 00:06:40.940 OK. 00:06:40.950 --> 00:06:48.330 Because if we select three items we need first to add the value already then add another line with the 00:06:48.330 --> 00:06:49.360 value be of value. 00:06:49.360 --> 00:06:52.130 Then another line with the value of missies. 00:06:52.200 --> 00:06:52.610 OK. 00:06:52.710 --> 00:06:57.780 So we need to run a system piece of code for each item that is selected. 00:06:57.780 --> 00:07:03.920 So we we're going to be all we going to do we are going to select OK all the items that are selected 00:07:03.920 --> 00:07:08.250 so we're going to be using the class you selected. 00:07:09.660 --> 00:07:15.000 And then we will run a piece of code for each of them and that's when we get to use a method called 00:07:15.060 --> 00:07:16.160 each. 00:07:16.800 --> 00:07:21.840 So what's how to use this method inside this method. 00:07:21.840 --> 00:07:26.830 We will write a function but we need to execute for each of those elements. 00:07:27.090 --> 00:07:28.730 OK. 00:07:28.740 --> 00:07:37.170 So we will define the function in sight and what we're going to be doing every time we will create a 00:07:37.860 --> 00:07:38.370 paragraph. 00:07:38.370 --> 00:07:45.860 So if we select Audi we have the value or the text which is Audi puts it in a paragraph and then updates 00:07:46.020 --> 00:07:48.980 to the Microsoft Steve or appended to the Microsoft. 00:07:49.170 --> 00:07:49.990 OK. 00:07:49.990 --> 00:07:53.100 So so we're going to create a paragraph 00:07:58.740 --> 00:07:59.690 right. 00:08:00.120 --> 00:08:07.180 And we changed the need to change the text of this paragraph or set it to something. 00:08:07.510 --> 00:08:14.430 And the the text we need to use inside the paragraph is the text of the selected item. 00:08:14.520 --> 00:08:23.720 So we need to access the selected item purse using the keyword this and we need to get it fixed. 00:08:24.860 --> 00:08:25.770 OK. 00:08:25.770 --> 00:08:33.350 So that goes as the barometer of a text that will be what's inside the empty paragraph. 00:08:34.080 --> 00:08:37.270 And then we need to add this to the microwave. 00:08:37.320 --> 00:08:39.240 So we're going to use another method. 00:08:39.250 --> 00:08:41.250 It's append to. 00:08:42.330 --> 00:08:43.500 OK. 00:08:43.680 --> 00:08:51.540 So we need to apply it to the Microsoft staff using ID. 00:08:51.830 --> 00:08:59.490 So we're going to put the ID of the cause of death inside the barometer of the method too. 00:08:59.920 --> 00:09:01.000 All right. 00:09:01.350 --> 00:09:02.790 OK so let's try. 00:09:03.090 --> 00:09:03.870 Make sure it's working. 00:09:03.870 --> 00:09:08.770 So if we click on our D we can see Audi appearing in the series. 00:09:09.260 --> 00:09:17.010 And if we selects three you can see all three of them showing in the Microsoft div we can change the 00:09:17.010 --> 00:09:19.790 signing of the Microsoft div so that the height is OKto 00:09:22.560 --> 00:09:24.780 to it looks better. 00:09:24.810 --> 00:09:27.030 Now we can see that it is working. 00:09:27.480 --> 00:09:28.030 OK. 00:09:28.140 --> 00:09:34.830 That's how we make elements flexible and also how we can run some code once a certain elements is selected 00:09:34.840 --> 00:09:41.870 .