WEBVTT 00:05.090 --> 00:10.940 In this video we're going to have a quick look at our app and fix anything that is not working. 00:11.090 --> 00:21.960 So let's have a quick look at our home page so you can see that our elements are printed files and folders. 00:21.960 --> 00:29.710 We can source by name by size and my last modified. 00:29.710 --> 00:37.830 Now if we check the title of this page it says and defined well it's supposed to say home for the home 00:37.830 --> 00:38.260 page. 00:38.280 --> 00:39.000 Right. 00:39.000 --> 00:44.330 Because if we go to any folder normally the title is the name of the folder. 00:44.400 --> 00:46.390 So home should be called home. 00:46.950 --> 00:54.140 So let's have a quick look at the code corresponding to this bit and see what needs changing. 00:54.150 --> 00:58.860 So if you go to respond those days. 00:58.920 --> 01:01.470 This is where we created the title 01:04.600 --> 01:16.360 so I'm going to look title and here we go that's how we built the title of the page. 01:16.460 --> 01:27.330 So basically we extracted the name of the folder from the path name and after reversing the array thus 01:27.330 --> 01:35.790 we got we selected the first item of the array and we chose that as I have for the name. 01:35.800 --> 01:43.480 Now the problem is when your path name is just forwards lush you end up with undefined because there 01:43.480 --> 01:48.980 is actually no element in your array index 0. 01:49.560 --> 02:02.320 So to fix this we're going to add an if statement saying if folder name is undefined then sets for the 02:02.320 --> 02:04.750 name to 02:09.390 --> 02:10.860 now before trying our code. 02:10.880 --> 02:17.000 Let's change this to let instead of constants because we have changed its value later on. 02:17.030 --> 02:23.110 So it is to write our code and here we go the home page now is called home. 02:23.330 --> 02:29.480 Now you may want to hide certain files and not show them inside your file this. 02:29.480 --> 02:40.360 So for example this file I would like to hide its if I go to any other folder I can still see that file. 02:40.390 --> 02:47.470 So to do this I'm gonna need to go back to the main contents. 02:47.470 --> 02:49.540 Those days file 02:56.530 --> 03:05.820 before looping through the items array where we stored the different elements inside our folder. 03:06.010 --> 03:16.970 We're going to filter this array items and remove files named dots the S and the score store. 03:18.090 --> 03:18.990 So let's do those 03:30.380 --> 03:37.660 so we're gonna change the value of our array items to the outputs of the filter method. 03:37.830 --> 03:45.960 So our fields filter Method Method will take a function take in the elements of the array and then returning 03:46.770 --> 03:54.450 the results of the test element is different from the s store 03:57.280 --> 03:58.600 so it's save and try. 03:58.620 --> 03:58.990 Okay. 03:59.010 --> 04:08.710 I make sure that we don't see this file anymore perfect. 04:08.750 --> 04:16.700 Now if you remember we put our projects Files folder inside the home directory basically on our computer 04:17.060 --> 04:24.390 it was installed inside the static folder so inside this project files we had our templates it's styling 04:24.450 --> 04:29.920 and our jobs because file which takes care of the sorting etc.. 04:30.270 --> 04:40.930 So if you don't want to show this folder in the home directory you can do that in a similar way. 04:41.240 --> 04:51.680 So we'll do that only for the home directory and the home directory is reached if the path name is forward 04:51.680 --> 04:58.690 slash so it's a comment here. 04:58.970 --> 05:08.170 Directory remove products once so we're gonna check if the fourth name is false. 05:08.170 --> 05:08.840 That's like that's 05:11.580 --> 05:15.760 then we're going again to filter items array. 05:15.960 --> 05:26.180 This time the filter function is going to check if the elements is different from projects files 05:29.750 --> 05:30.610 so let's try this 05:34.390 --> 05:37.470 and now we don't see products files anymore. 05:37.470 --> 05:44.050 Now if you want to hide another folder let's say I want to hide. 05:44.080 --> 05:45.180 That's one as well. 05:45.250 --> 05:46.630 Then I can just create an array 05:49.390 --> 05:51.730 containing all those names 05:58.860 --> 06:03.270 and then use the method includes elements 06:09.670 --> 06:16.050 so we are checking if this array includes elements and we want to reverse that. 06:16.060 --> 06:24.910 So we want the opposite because we want to keep only the items which are not included in that so let's 06:24.910 --> 06:30.700 save and try this and we need to see this projects for disappearing. 06:34.790 --> 06:35.660 We don't see this anymore. 06:37.360 --> 06:44.500 It's one more change does you may want to implement in your projects is when you click on a folder you 06:44.500 --> 06:52.240 open the web page in the same tab when you click on a file. 06:52.240 --> 07:02.070 For example you may want to show the file in a separate tab so to do this you just need to go to 07:04.990 --> 07:12.710 a chunk of code where you created the link okay. 07:12.820 --> 07:23.560 And here you can add an attribute to your link which is Target's so we're going to set target to blank 07:25.420 --> 07:25.880 like that's 07:30.770 --> 07:35.970 but the problem is we want to do that only for files not for this. 07:36.350 --> 07:49.560 So to do that we can write some code inside clearly brackets like this and check if it is a file by 07:49.560 --> 07:51.000 going to the starts 07:54.770 --> 07:55.640 variable. 07:55.640 --> 07:57.470 So let's see what we call this variable. 07:57.500 --> 07:57.880 Earlier 08:05.180 --> 08:07.910 we call this item details that starts 08:15.060 --> 08:16.320 to check if it's a file. 08:16.320 --> 08:24.230 We're going to use the method is file of that object so if it is a file 08:27.040 --> 08:31.150 then we're going to set this to blank. 08:40.800 --> 08:47.460 Otherwise we're going to set it to an empty string. 08:47.460 --> 08:51.530 Now we are using double quotes inside no grades. 08:51.550 --> 08:52.450 So let's change that. 08:52.510 --> 08:58.180 So let's use single quotes and then that Kurds inside 09:00.960 --> 09:02.530 and that looks better. 09:02.530 --> 09:04.210 So let's save this and try. 09:04.210 --> 09:11.720 Our code so if I click on an image OK let's refresh the page. 09:12.100 --> 09:21.930 So if I click on an image it opens in a new tab so let's try that with something else. 09:22.080 --> 09:25.550 If I try a video it opens up a new tab 09:28.930 --> 09:29.410 that's great 09:36.890 --> 09:43.180 congratulations you have just created a fully functional file explorer app using no dice. 09:43.370 --> 09:51.920 So this app is a real showcase demonstrating some advanced capabilities and skills which you used while 09:51.920 --> 09:53.150 building this project. 09:53.300 --> 10:00.650 So this includes core no J.S. modules like the file system the child processes the path module and so 10:00.650 --> 10:01.190 on. 10:01.190 --> 10:10.670 You also wrote javascript code using iOS 6 and you managed to master advanced code like using promises 10:11.000 --> 10:13.080 etc. But this is not the end. 10:13.240 --> 10:18.770 You're out by the movements is still sitting on your computer and you are using your local server at 10:18.770 --> 10:19.660 the moment. 10:20.000 --> 10:24.940 So you need to deploy your app to the Internet and make it available to the Web. 10:25.700 --> 10:33.920 So to do this in the coming videos you're going to learn version control using gets and then you're 10:33.920 --> 10:37.030 going to deploy Europe to Heroku. 10:37.040 --> 10:44.180 I'm confident you are excited to share your work with the world so you can move now to the next video 10:44.390 --> 10:47.540 and start deploying your up to the Web.