WEBVTT 00:07.390 --> 00:14.490 In this video you're going to convert the file size number you calculated in the previous video to bytes. 00:14.680 --> 00:17.530 So let's go ahead and do this. 00:17.590 --> 00:28.250 So first of all I'm going to create a string it units where I'm going to store all the possible units 00:28.460 --> 00:29.330 we may have. 00:29.330 --> 00:36.090 So bytes kilobytes megabytes gigabytes and decimates. 00:36.710 --> 00:41.610 So these are the different possible units you may have there. 00:41.810 --> 00:43.450 All right. 00:43.450 --> 00:51.980 And now we need to convert this number to the correct number of bytes. 00:52.040 --> 01:02.040 So this creates a variable file size might which is going to be returned in the final array. 01:02.180 --> 01:08.490 So this very well is going to store the size invites. 01:10.350 --> 01:11.500 So to make things easy. 01:11.520 --> 01:16.520 Let's have a look at a few scenarios and see how the conversion works every time. 01:16.530 --> 01:25.120 So if the file size is in bytes like that's one then 01:29.120 --> 01:34.490 10 bytes for example would be converted to 10. 01:34.520 --> 01:45.740 This already invites right now if it's in kilobytes then 10 kilobytes is going to be 10 multiplied by 01:45.860 --> 01:48.000 1000. 01:48.000 --> 01:54.300 So again this could be 1000 or 1024 depending on what system you're working with. 01:54.920 --> 01:57.910 So in my computer it is actually 1000. 01:57.930 --> 01:59.990 So this is something you can check. 02:00.090 --> 02:05.350 So you can check that by checking one file and getting the info of that file. 02:05.370 --> 02:11.400 So if it stays on your computer one point six megabytes you can get the info of the file and see how 02:11.400 --> 02:13.960 many bytes you've got inside. 02:13.980 --> 02:20.460 So if it's that number multiplied by 1000 then your system is following the 1000 rule. 02:20.460 --> 02:22.590 Otherwise is going to be 1024. 02:23.290 --> 02:24.660 Okay. 02:25.200 --> 02:35.490 If it's in megabytes then 10 megabytes is going to be 10 multiplied by 1000 multiplied again by 1000 02:35.640 --> 02:39.230 to get bytes okay. 02:42.520 --> 02:46.730 And let's do this for gigabytes 02:50.110 --> 02:59.620 and here you're gonna get another multiplication of 1000 and finally 40 so bytes you get another multiplication 02:59.620 --> 03:00.550 by 1000. 03:01.390 --> 03:14.120 So let's see the pattern here and try to find a way to program this using our string units so you can 03:14.120 --> 03:22.430 tell that's in the first scenario we are just using the same number in the second one we are multiplying 03:23.560 --> 03:28.430 the size with 1000. 03:28.830 --> 03:30.720 So we multiply by 1000. 03:30.870 --> 03:32.790 Okay. 03:32.900 --> 03:36.080 And that's what we did now in this scenario. 03:36.080 --> 03:39.280 We multiplied actually by 1000 03:42.810 --> 03:47.690 to the power to rise using this. 03:48.150 --> 03:57.610 And in this example we multiplied by 1000 to the third power because we multiplied three times by 1000. 03:57.710 --> 04:02.730 And in this one we multiplied by 1000 to be false. 04:02.730 --> 04:04.530 Power. 04:04.860 --> 04:17.590 So let's see the relationship between the number of times all the power and the index of the units inside 04:17.650 --> 04:19.330 the units string. 04:19.360 --> 04:30.580 And by the way here we multiply it actually by 1000 to the power zero which means 1. 04:31.330 --> 04:32.580 OK. 04:32.620 --> 04:33.130 So 04:36.790 --> 04:49.150 the first one is the same actually as the index of Unit B and this one is the index of K and two is 04:49.150 --> 04:52.520 the index of M isn't it. 04:52.600 --> 04:52.870 Right. 04:52.900 --> 04:57.040 So this is sourcing to make a trend here. 04:57.100 --> 05:05.870 It still works with G but the index or G in the string and 4 is the index of T. 05:06.010 --> 05:07.960 Inside Out string. 05:08.010 --> 05:15.620 So basically what we're doing we are multiplying the signs in numbers which is fine size number. 05:16.050 --> 05:26.520 We're multiplying that by 1000 to the power which is the index of the units right. 05:26.540 --> 05:33.440 So let's convert this to code so we take the file size number 05:37.020 --> 05:37.900 and we multiply. 05:37.900 --> 05:51.930 That's with the power of all 1000 to the power index of our units. 05:51.930 --> 06:02.060 So it's against the index of the units we're going to go to the string units and then index of the units 06:02.120 --> 06:04.350 and we stored the units right. 06:12.680 --> 06:23.220 But let's console not log this and see if we get the correct number. 06:23.620 --> 06:32.780 So for one point three megabytes we get one point three multiplied by 1000 twice. 06:32.920 --> 06:36.350 And this is the correct number. 06:36.500 --> 06:40.940 Now we are missing something in our code when we got the file size number there. 06:41.240 --> 06:43.220 The results we got. 06:43.220 --> 06:44.530 There is actually a string. 06:44.990 --> 06:57.760 So we still need to parse this as a float number by using pass floats. 06:57.770 --> 07:01.850 Now we are sure this when we are manipulating a number. 07:01.850 --> 07:11.280 Later on rather than letting javascript quiz the number for us when we do our multiplication. 07:12.040 --> 07:13.000 Now let's try again. 07:18.280 --> 07:25.420 So four hundred eighty four kilobytes is giving us four hundred eighty four thousand bytes and that's 07:25.420 --> 07:27.090 correct. 07:27.180 --> 07:36.690 Okay so this seems to be working and we've got the correct size in bytes. 07:36.840 --> 07:37.100 All right. 07:37.170 --> 07:47.210 Now let's go back to our main content those days file and change the ACMA contents of our table row 07:47.840 --> 07:56.110 because as we said we will need to place the size somewhere so that we can use it later on to reorder 07:56.590 --> 07:57.440 the rows. 07:57.450 --> 08:04.310 So to do this you can follow a good practice which is to add attributes to your HMO attack. 08:04.390 --> 08:16.310 So our task is the table row and I'm going to add a data name for the name of the elements. 08:16.770 --> 08:22.820 And also I'm going to add a data size for the size. 08:23.610 --> 08:35.290 So the name is going to be the item variable and the size is the size in bytes which we received from 08:35.350 --> 08:43.620 our calculate size the function or calculates the size of function depending on whether we've got a 08:43.660 --> 08:46.140 folder or a file. 08:46.470 --> 08:48.900 So let's have a look at the data name 08:56.390 --> 09:01.460 so is the item variable and the data size 09:04.990 --> 09:08.560 is going to be item details and thoughts size 09:16.500 --> 09:23.770 now if you want to make this consistent you can still define another property item details Dot's name 09:26.480 --> 09:29.000 which you can set are the top 09:38.590 --> 09:44.260 two the value of the variable item. 09:44.260 --> 09:44.680 Okay. 09:45.300 --> 09:47.780 And you can create that on the very top. 09:49.640 --> 09:52.560 Like that and we don't need these anymore. 09:56.240 --> 09:57.970 And let's delete this as well. 10:05.120 --> 10:16.870 So we aren't storing the item details and objects. 10:16.920 --> 10:22.330 If you remember we did that to avoid all the blocks scoping issues we had earlier. 10:23.400 --> 10:30.690 So instead of having to define different variables outside that scope or those scopes we just created 10:30.900 --> 10:35.300 an object's right there and then we kept adding properties to the objects. 10:35.310 --> 10:42.400 And it's a good practice which will save you time and make your code more readable right now. 10:42.460 --> 10:48.600 Let's try our code and make sure that everything works. 10:48.680 --> 10:53.060 So if I inspect this table row for example 10:57.850 --> 11:02.980 then I can see that we've got some data attributes that say that's out our data name just there. 11:03.130 --> 11:10.290 And the data size is right that so this is not really the data size we wanted because we wanted the 11:10.360 --> 11:12.040 data size in bytes. 11:12.040 --> 11:12.760 So let's have a look. 11:12.760 --> 11:13.240 Aren't 11:15.960 --> 11:16.940 we put in there. 11:16.940 --> 11:18.320 So he puts that size 11:21.670 --> 11:25.810 and we need actually adult size bytes. 11:25.960 --> 11:26.980 So that's correct that's 11:30.930 --> 11:32.070 so let's try again. 11:37.870 --> 11:39.640 So we're looking at folders only. 11:39.670 --> 11:40.660 So let's look at 11:43.720 --> 11:44.140 this one 11:47.840 --> 11:55.850 the data size other moments is showing that as one million bytes which is correct so let's take this 11:55.850 --> 11:56.090 one 12:00.710 --> 12:09.070 and this slide shows us one million one hundred thousand which is correct as well right now. 12:09.120 --> 12:17.440 The only thing missing in our table is the time or the last modified time which will need to add inside 12:17.460 --> 12:18.510 our code. 12:18.510 --> 12:27.780 So again we're going to use the start or these starts variable or the property starts where we saw the 12:27.780 --> 12:30.660 start of our item. 12:30.710 --> 12:37.030 So this works the same for files and folders. 12:37.280 --> 12:41.060 So we will do that outside our if statements 12:44.040 --> 12:48.090 so this creates a new property item details 12:50.810 --> 12:52.130 and call it timestamp 12:54.890 --> 13:00.510 so it's again that's we going to go to the starts property of item details 13:03.290 --> 13:04.100 okay. 13:04.310 --> 13:11.380 And we need a property called Time m s. 13:11.380 --> 13:20.050 So this is going to be the last modified time in milliseconds and it will give us the UNIX timestamp 13:20.720 --> 13:24.670 it s make our code easier to read. 13:24.670 --> 13:25.600 I'm going to write. 13:25.600 --> 13:33.850 When was the file last changed and he's giving us the unix time stamp. 13:34.090 --> 13:39.520 Now you need to convert about times time to a human readable format like this one. 13:40.360 --> 13:48.230 So we're going to convert the timestamp to a date. 13:48.520 --> 13:49.990 So what you can do you can 13:53.600 --> 13:55.940 create a new property dates 13:58.990 --> 14:01.400 and convert that time some to dates. 14:01.420 --> 14:05.430 So for this you can use the dates class. 14:05.710 --> 14:10.900 So it is you the dates constructor and parse 14:14.480 --> 14:24.090 this value and then let's console that log this and see what we get. 14:30.480 --> 14:37.070 So this is the four months we are getting is not exactly that's okay. 14:37.210 --> 14:43.350 So this corresponds to the glass item 14:47.080 --> 14:51.850 and does a quick comments the date you see that is just dummy data we used earlier. 14:51.870 --> 14:52.110 Right. 14:52.120 --> 14:56.180 So this is the correct state but we still need to change the format. 14:56.230 --> 15:07.750 So what you can do you can't use a useful method called two local string which will convert that data 15:07.780 --> 15:09.930 to that kind of formats. 15:09.940 --> 15:11.290 So let's go ahead and do that. 15:20.970 --> 15:26.580 To local string or local dates. 15:26.600 --> 15:31.760 String like this and let's see what we get. 15:31.760 --> 15:38.350 This line. 15:38.470 --> 15:45.250 So this is the dates we're getting this time which is still different from that one. 15:45.310 --> 15:57.050 So let's use local string instead and see what happens and this time we get the correct dates with the 15:57.050 --> 16:01.050 time as well. 16:01.130 --> 16:12.060 Now if we go to our data attributes let's add one more these attributes all the time and it's quality 16:12.150 --> 16:17.880 data time so we will assess this one to the property time stamp 16:24.350 --> 16:31.970 like that's if you have a quick look at what you've got inside the timestamp you will find that it's 16:31.970 --> 16:33.620 not necessarily an integer 16:36.860 --> 16:37.860 it still carries 16:41.810 --> 16:47.660 something in the decimal part you can see that one is not really an integer. 16:47.780 --> 16:51.350 So if you want you can pass it as an integer. 16:51.360 --> 16:54.530 So when you define it you can despise this 16:58.720 --> 17:02.220 as an integer like that. 17:03.490 --> 17:06.870 And this will make sure lets you only keep 17:11.910 --> 17:13.070 the integer parts. 17:13.150 --> 17:23.460 OK so now we've got all our data attributes the data name the data size and the data type and we are 17:23.460 --> 17:30.680 missing something there in the data time so we're missing in other groups right. 17:31.910 --> 17:35.510 Let's try again this looks better 17:42.970 --> 17:49.210 so far we have been using dummy data in the last modified column so to use the correct data we just 17:49.210 --> 17:57.010 need to replace this data using the property date of item details 18:02.010 --> 18:03.240 so let's try this 18:06.380 --> 18:10.590 now you can see the correct data being displayed. 18:10.630 --> 18:17.620 So if you go to media for example then you can see that these different files they have different last 18:17.620 --> 18:19.720 modified information. 18:19.720 --> 18:20.020 All right. 18:20.020 --> 18:28.960 Can be next video you're going to move to the calculate size F function which you will create and calculate 18:29.020 --> 18:31.900 the size of elements of type file.