WEBVTT 00:06.140 --> 00:12.710 In this video you're going to build a website which will allow users to search for cars. 00:12.710 --> 00:16.400 So you're gonna have a simple database of cars. 00:16.400 --> 00:21.280 Well it's not going to be a real database is going to be a simple javascript array. 00:21.380 --> 00:26.780 Where are you going to store information about those cars including different properties of cars like 00:26.780 --> 00:29.120 the make model year and so on. 00:30.780 --> 00:41.330 And then users will be able to type a U URL to search for those cars so they can add a query like this 00:41.330 --> 00:49.500 one to specify properties like the transmission of the car the minimum price 00:52.930 --> 00:56.540 the maximum price and so on. 00:56.560 --> 00:59.110 So what are we going to do. 00:59.110 --> 01:06.040 We're going to break this challenge into small mini challenges because you're going to need to learn 01:06.040 --> 01:10.960 a few more things in order for you to compete to complete this exercise. 01:10.990 --> 01:18.290 So first of all you're going to be introduced to the U.R.L. module which is a built in module in node 01:18.970 --> 01:28.600 so this module will help you pass a specific URL and extract different information or different bits 01:28.600 --> 01:29.960 of information from it. 01:30.370 --> 01:40.160 So it will help you get the query in a more convenient format the URL as well and so on. 01:40.480 --> 01:48.470 So this will be an opportunity for you to learn how to read the docs of the node Web site. 01:48.760 --> 01:56.540 So first of all you will need to go to the documentation of node and then go to your url. 01:56.580 --> 02:05.010 So if you remember the documentation can be accessed by going to node Jess dot org docs and then choose 02:06.030 --> 02:08.600 the version that you want. 02:08.610 --> 02:17.700 So we're gonna go to your URL and now I'm going to suggest that you check the you are l thought sparse 02:18.090 --> 02:18.510 method 02:25.520 --> 02:29.500 and see what you can do with it. 02:29.570 --> 02:35.690 So I'm going to pause the video here and I suggest you come back when you went through this. 02:35.780 --> 02:36.490 All right. 02:36.500 --> 02:39.550 Hopefully you had a nice read through this junk. 02:39.590 --> 02:48.950 So what I suggest now is use the URL dot pass method and tested on the request those you are El 02:51.880 --> 02:55.980 value which we retrieved earlier. 02:56.050 --> 02:56.980 So this was 03:00.900 --> 03:03.100 right there. 03:03.260 --> 03:16.210 So using the documentation you can set the pass query string parameter to false or true. 03:16.220 --> 03:26.890 So by default this is set to false but if you want to pass the URL then you will need to set that to 03:26.890 --> 03:27.700 true. 03:27.700 --> 03:28.030 All right. 03:28.660 --> 03:41.140 So I suggest applying this to request to see where l and ARD Abraham it's a true and see what you get. 03:41.360 --> 03:45.890 I mean I posed the video here and I suggest you come back once you tested that. 03:46.170 --> 03:46.520 All right. 03:46.520 --> 03:48.650 So hopefully you manage to do that. 03:48.650 --> 03:51.920 So let's do this together now. 03:53.150 --> 03:54.140 So let's 03:59.300 --> 04:16.610 console both log the outputs of your l dot pass of request also URL and set the next parameter to true 04:16.610 --> 04:18.260 to pass our oil. 04:18.410 --> 04:21.200 So you need to make sure that you include 04:25.600 --> 04:33.950 or require the URL Okay so let's start our up. 04:34.820 --> 04:42.330 Okay uh let's go to Chrome and let's try something 04:46.330 --> 04:46.630 OK 04:52.080 --> 04:52.830 so you can see 04:55.430 --> 04:57.990 what's passed you are real. 04:58.010 --> 05:05.850 Looks like so you can see a few things here like the path name which is for slush. 05:05.870 --> 05:12.670 Cause you can also see a query property. 05:12.730 --> 05:17.260 Well we don't have a query at the moment but it's something we'll cover in a bit. 05:17.260 --> 05:17.840 All right. 05:17.920 --> 05:27.650 So basically we mainly need the path name and the query because we want to show cars if the path name 05:27.680 --> 05:29.820 is for large cars. 05:29.990 --> 05:37.830 And we have a query specifying what specific cars our user is after. 05:38.180 --> 05:38.630 So 05:45.450 --> 05:48.390 let's go back to our code and 05:52.650 --> 05:57.540 this time log the query itself and the path 06:08.910 --> 06:10.060 so it starts here again 06:14.150 --> 06:14.490 OK. 06:14.550 --> 06:17.500 So does our query and that's our path. 06:17.560 --> 06:28.430 So I'm gonna try a query for example that's one and you can see our query right there this time our 06:28.450 --> 06:38.410 full path is this one instead of the path we can use something else called Path name. 06:38.730 --> 06:48.850 Let's see the difference between the path and path name so let's print space. 06:49.020 --> 06:56.160 So the path we'll give you the full path including the query while the path name will just give you 06:56.220 --> 06:58.390 whatever is before the query. 06:58.410 --> 06:58.850 All right. 06:58.860 --> 07:01.430 Now here comes your next challenge. 07:01.440 --> 07:12.450 So just before the end of the body tag you will need to check if we are dealing with a car surge meaning 07:12.480 --> 07:18.680 that you can check if the path name is cars or forward slash cars. 07:19.080 --> 07:30.260 And then if that's the case you're going to prints all the cars corresponding to the query including 07:30.260 --> 07:39.970 their details and a picture of the car so I suggest storing the path name and query inside a variable 07:45.260 --> 07:52.030 so for example I'm going to set the query variable to this 07:58.910 --> 08:00.190 and the path name 08:04.250 --> 08:04.810 to that's 08:11.680 --> 08:12.670 okay and 08:16.610 --> 08:20.980 let's log query and partly 08:29.310 --> 08:30.900 so just to give you a hand. 08:31.530 --> 08:36.990 So the condition here is going to be if path name 08:39.700 --> 08:42.510 equals false light comes. 08:42.590 --> 08:43.960 All right. 08:43.960 --> 08:59.590 And here you will need to filter the array cause using a function which you will create so here he goes 08:59.590 --> 09:09.250 your function and then the outputs of the filter method which will be an array of course you can apply 09:09.250 --> 09:10.510 to it's a for each 09:13.360 --> 09:22.230 like that and then inside the for each year on your code to print the corresponding cars though before 09:22.230 --> 09:23.220 pausing the video. 09:23.490 --> 09:31.250 I'm just gonna print here the different promises or possible promises inside the query. 09:31.310 --> 09:49.450 So you're going to have to make model year transmission mean price and month's price. 09:49.650 --> 09:50.280 Okay. 09:50.310 --> 09:55.020 So I'm going to post the video now and um I'm gonna let you do this on your own. 09:55.020 --> 09:59.850 And then once you're done you can come back to compare your findings with what ever we gonna be doing 09:59.850 --> 10:00.170 together.