WEBVTT 00:06.210 --> 00:09.590 In this video you're going to add the up and down icons. 00:09.600 --> 00:15.010 When you source elements by name so the end result is gonna look like this. 00:15.030 --> 00:21.090 So when you source in the ascending order you get the up arrow and when he soars in the descending order 00:21.570 --> 00:23.350 you see the down arrow. 00:23.790 --> 00:29.700 So let's go ahead and do this now before we write our code. 00:29.700 --> 00:34.260 We will make a few changes to this code right here. 00:34.410 --> 00:40.890 So at the moment we are selecting the elements of IED name but later on we will need to do the same 00:40.890 --> 00:49.150 thing for the elements of IED size and the elements of IED time which refers to the last modified header. 00:49.530 --> 00:58.020 Now a good idea would be to delegates the Click event to the parents of these elements. 00:58.080 --> 01:05.170 They all have the same parents which is the table row inside the table header. 01:05.340 --> 01:06.750 So what we can do. 01:06.960 --> 01:23.000 We can go to our template file give this row an I.D. So let's call it table had a row and then we going 01:23.000 --> 01:28.080 to use the concept of event delegation. 01:28.310 --> 01:41.660 So the way it works is as following we are going to select the elements of I.D. table head row 01:45.580 --> 01:52.280 and then we're going to add the event listener to this elements 01:55.000 --> 01:57.010 so the event is going to be click 02:00.070 --> 02:04.570 and then we're gonna have our callback. 02:04.620 --> 02:09.450 So in the callback we're gonna have a problem with the events. 02:09.450 --> 02:12.190 So we're gonna need this problem is set later. 02:12.330 --> 02:17.720 So the function to execute is going to be asked following. 02:17.730 --> 02:26.040 So now when the user clicks on any of these elements we will trigger the Click event on the parents 02:26.700 --> 02:31.590 and then we will need to know which of these elements has been clicked right. 02:31.590 --> 02:36.110 So here comes the event targets. 02:36.360 --> 02:45.670 So events dot target is a property of the event object which will tell us which of these elements has 02:45.670 --> 02:48.550 been clicked all right. 02:48.790 --> 02:52.080 But first of all you need to check if there is actually an event target. 02:52.540 --> 03:02.860 So if event targets meaning that this is not undefined then we gonna write some code now to execute 03:02.890 --> 03:05.830 the code corresponding to the name header. 03:05.860 --> 03:12.390 You can just check that's the I.D. of these elements is a name. 03:12.400 --> 03:30.200 So if events targets both I.D. equals name then you execute this code which you wrote earlier. 03:30.230 --> 03:36.030 So now it is the list is make sure that our code is still working 03:40.860 --> 03:41.320 that's great. 03:41.340 --> 03:47.660 So you can see us we aren't sorting the elements successfully. 03:47.660 --> 03:48.000 All right. 03:48.030 --> 03:53.910 Now let's add icons when we sought the elements in the ascending or descending order. 03:54.060 --> 04:00.780 So it starts with the ascending order and on an icon here. 04:00.870 --> 04:08.270 So what we need to do you need to go to these elements and aren't too it's in an HMO and I. 04:08.430 --> 04:11.130 So for now let's just start with some text 04:23.870 --> 04:24.780 and see what we get. 04:31.690 --> 04:32.610 And here you go. 04:32.720 --> 04:40.970 So you can see that we added some text there and it's had a real icon by going to iron icons dot com 04:41.060 --> 04:45.230 and look for up or up arrow. 04:45.230 --> 04:47.040 So that's the arrow I'm going to use. 04:47.050 --> 04:47.990 So this copy that's 04:54.720 --> 04:58.880 And let's also copy the down arrow 05:02.350 --> 05:05.930 and use its right. 05:26.890 --> 05:36.750 Let's try our code so now it is actually working but the icon is actually hidden because it's using 05:36.750 --> 05:40.230 the same color as the background color of the header. 05:40.350 --> 05:45.480 So what we can do we can go to our styling sheets and make a quick change the 05:48.530 --> 05:52.960 SO WE says the icons to be of that color. 05:52.970 --> 05:57.740 So what we can do we can restrict this to the table body early. 05:57.860 --> 06:04.000 So we're going to select Iowan icons inside table body only. 06:04.520 --> 06:14.200 So now if I save and try again it is time we can see our icons so they are repeated because we don't 06:14.470 --> 06:16.780 clear the icons before adding new ones. 06:16.840 --> 06:19.750 So let's fix those 06:25.300 --> 06:26.850 now the top of our function. 06:26.990 --> 06:32.790 We're going to clear the icons like this. 06:33.200 --> 06:44.400 So let's select all elements with tag icon icon and then use the remove method of jiggery thus we an 06:44.400 --> 06:44.880 easy one. 06:44.880 --> 06:50.610 So let's try this. 06:50.670 --> 06:51.300 Perfect. 06:51.300 --> 06:53.900 This is working as we want it. 06:54.120 --> 07:05.650 So it is add a space before the icon to make these things better. 07:05.660 --> 07:05.950 All right. 07:05.960 --> 07:12.500 In the next video you're going to create the same functionality you built for the name sorting to size 07:12.710 --> 07:13.910 and last modified.