1 00:00:01,030 --> 00:00:05,320 It is great that we can show our users a list of results right here, but right now the results don't 2 00:00:05,320 --> 00:00:06,130 really mean a lot. 3 00:00:06,460 --> 00:00:11,350 It'll be great if the user could maybe click on one of these results and go to the corresponding Wikipedia 4 00:00:11,380 --> 00:00:11,860 article. 5 00:00:12,430 --> 00:00:13,930 That's we're going to add in this video. 6 00:00:14,170 --> 00:00:18,190 We're going to show a little button on the right hand side that a user can click on to go to the official 7 00:00:18,220 --> 00:00:20,290 Wikipedia article on computer programming. 8 00:00:21,450 --> 00:00:23,560 Did you so let's flip back over to our editor. 9 00:00:24,370 --> 00:00:26,220 I'm inside my search dog, J.S. File. 10 00:00:26,380 --> 00:00:29,070 Now going to go down to where we render out our results. 11 00:00:29,430 --> 00:00:30,210 Here it is right here. 12 00:00:31,910 --> 00:00:36,860 First, to show a link on the right hand side of every search result inside of this First d'Hiv, the 13 00:00:36,860 --> 00:00:38,930 right above, the one with a class name of content. 14 00:00:39,440 --> 00:00:45,110 We will add in another div with the class name of right loaded content. 15 00:00:46,130 --> 00:00:47,350 Well, then close the dive off. 16 00:00:48,290 --> 00:00:53,620 And then inside there, we'll put in an anchor element and I'll give it some text like Go. 17 00:00:55,320 --> 00:00:58,240 I'll give the anchor element a class name of UI button. 18 00:00:59,560 --> 00:01:02,660 And let's now flip back over and to see what that looks like. 19 00:01:03,530 --> 00:01:03,740 All right. 20 00:01:03,770 --> 00:01:06,890 So that's the button the user is going to click on to go to the corresponding article. 21 00:01:07,490 --> 00:01:12,560 Now, we just need to make sure that this anchor element as a link assigned to it or in a property. 22 00:01:13,710 --> 00:01:15,320 I'm gonna give myself a little bit of space. 23 00:01:19,580 --> 00:01:19,850 Arrigo. 24 00:01:20,900 --> 00:01:25,890 And then I will assign in a draft property to get a U or L that the user can visit. 25 00:01:26,100 --> 00:01:29,990 We're going to go to a very specially crafted you are l are just going to basically type it in. 26 00:01:30,000 --> 00:01:33,150 This is just a little bit of trivia knowledge about how Wikipedia works. 27 00:01:33,840 --> 00:01:37,980 We're going to do some string templating, which will require us to put in a set of curly braces. 28 00:01:38,980 --> 00:01:47,490 The back ticks and then we will put in H TDP s colon slash slash e n Wikipedia dot org. 29 00:01:48,570 --> 00:01:49,590 Then a question mark. 30 00:01:50,200 --> 00:01:53,030 Do you, ah, I.D. equals. 31 00:01:53,880 --> 00:01:59,670 And then we are going to do some string templating right there and put in the page I.D. or this particular 32 00:01:59,670 --> 00:02:00,090 result. 33 00:02:00,510 --> 00:02:02,310 That's how we go to a very particular page. 34 00:02:02,340 --> 00:02:07,680 We essentially go to Wikipedia with a query string property of C, you are I.D. and then set that equal 35 00:02:07,680 --> 00:02:10,200 to whatever the page I.D. is. 36 00:02:10,590 --> 00:02:12,850 So inside there will put in results dot page I.D.. 37 00:02:13,530 --> 00:02:15,490 And once again, remember the response. 38 00:02:15,490 --> 00:02:22,080 So we get back from Wikipedia has a lower case I.D. So we have put in age lowercase I.D. If you put 39 00:02:22,080 --> 00:02:25,590 in Capital I or Capital D. It is not going to work correctly. 40 00:02:27,070 --> 00:02:27,700 Let's save that. 41 00:02:29,140 --> 00:02:30,120 Well, then flip back over. 42 00:02:31,020 --> 00:02:35,610 Now, if I hover over any of these links or these buttons, you'll see on the very bottom left hand 43 00:02:35,610 --> 00:02:39,900 corner of your browser, little preview page says that you're going to go to see where I.D.. 44 00:02:40,170 --> 00:02:42,900 Five three one one for this first article. 45 00:02:43,590 --> 00:02:48,810 One, two, three, seven, seven one and so on that we can click on this and it will take us the appropriate 46 00:02:48,810 --> 00:02:49,170 article. 47 00:02:50,090 --> 00:02:54,410 There's computer programming, I can go back and try out program that works. 48 00:02:54,860 --> 00:02:56,330 I can go to a functional programming. 49 00:02:56,720 --> 00:02:57,560 Yep, that works. 50 00:02:58,070 --> 00:02:59,240 And I think you get the idea. 51 00:03:00,350 --> 00:03:01,270 It was looks pretty good. 52 00:03:01,990 --> 00:03:05,470 Now, there's just one last thing that we need to take care of inside this project. 53 00:03:05,920 --> 00:03:11,170 Remember, right now, whenever user types into that input, if they delete everything inside there, 54 00:03:11,410 --> 00:03:14,770 you'll notice that we don't quite get a group good result back, as a matter of fact. 55 00:03:14,790 --> 00:03:15,400 We get an error. 56 00:03:16,370 --> 00:03:20,360 In addition, if we only delete a portion of that. 57 00:03:21,560 --> 00:03:25,450 And then start to type inside for every character we press. 58 00:03:25,750 --> 00:03:27,730 We are making one additional request. 59 00:03:28,330 --> 00:03:30,250 This is extremely inefficient. 60 00:03:30,330 --> 00:03:34,690 It would be a lot better if we could somehow just wait a little bit for easer to stop typing before 61 00:03:34,690 --> 00:03:35,980 we actually do a search. 62 00:03:36,610 --> 00:03:39,010 So those are two things we're going to fix up in the next video.