1
00:00:00,060 --> 00:00:05,160
Be playing styling to our application, so what it's doing is it's going to search YouTube and return

2
00:00:05,160 --> 00:00:08,550
back 10 results for whatever the search query is.

3
00:00:08,770 --> 00:00:14,670
And in this case, we're actually searching within our channel and then returning back the results that

4
00:00:14,670 --> 00:00:16,520
are corresponding for the channel content.

5
00:00:16,830 --> 00:00:23,010
So we've applied a little bit of styling in this lesson using Flex in order to stock it and have two

6
00:00:24,300 --> 00:00:27,840
rows of content and then it is responsive.

7
00:00:28,120 --> 00:00:33,930
Adjust the one row of content if we resize it, added some styling to the button and also to the input

8
00:00:33,930 --> 00:00:37,800
field and also some styling into the title of the.

9
00:00:40,190 --> 00:00:47,690
Of the video, so the main objective, of course, is still remains to be to work with JSON data that's

10
00:00:47,690 --> 00:00:49,110
coming back from YouTube.

11
00:00:49,430 --> 00:00:51,040
So you're welcome to try it out.

12
00:00:51,200 --> 00:00:57,560
And I do suggest that you try getting different property values out, putting them on the page to really

13
00:00:57,560 --> 00:01:02,700
get familiar with what you can do with Jason and connecting to various APIs.

14
00:01:03,320 --> 00:01:07,450
So let's get started, apply some styling and wrap up this mini application.

15
00:01:07,970 --> 00:01:12,780
So once it's working as expected, then we can update some of the content that we have here.

16
00:01:13,010 --> 00:01:15,860
So I want to clear out what the search results are.

17
00:01:15,890 --> 00:01:21,860
So within whatever the query, search query value is, let's remove that.

18
00:01:22,020 --> 00:01:27,710
So when we do make the request, we can remove that and also when we're outputting content.

19
00:01:30,000 --> 00:01:39,600
Let's output each one search for and then whatever the term was that we searched for, and that term

20
00:01:39,600 --> 00:01:42,190
is going to be within the queue value.

21
00:01:42,540 --> 00:01:45,120
So that's already contained within the main object.

22
00:01:46,080 --> 00:01:48,120
And I just going to use the tactics here.

23
00:01:50,910 --> 00:01:56,970
And search for a cure that would give the user a little bit more details on what they're searching for,

24
00:01:57,150 --> 00:01:58,140
a search for test.

25
00:02:00,590 --> 00:02:03,760
And let's try another one, just make sure it's working.

26
00:02:05,900 --> 00:02:09,290
Search for JavaScript, let's return back to JavaScript content.

27
00:02:10,730 --> 00:02:17,850
We want to apply some styling to the images and let's make the images responsive within the box.

28
00:02:18,800 --> 00:02:21,020
So for any of the image tags.

29
00:02:22,940 --> 00:02:29,720
And max size is 100 percent, so set up the max width to 100 percent.

30
00:02:32,650 --> 00:02:42,690
So that will resize the images fit within the main containers also, instead of using the regular styling,

31
00:02:42,940 --> 00:02:47,460
let's apply and add in to the elements as flex.

32
00:02:48,430 --> 00:02:52,670
So instead of width, let's set it up as flex 50 percent.

33
00:02:53,320 --> 00:02:55,530
So that will give us a flex of 50 percent.

34
00:02:56,890 --> 00:03:03,670
And we don't need the display properties anymore or keep the border for want and the padding and then

35
00:03:03,670 --> 00:03:04,630
in the parents.

36
00:03:04,780 --> 00:03:07,690
So this is going to be where we've got the main container.

37
00:03:09,370 --> 00:03:11,140
So we'll have to add to the parent.

38
00:03:12,310 --> 00:03:21,220
And apply the display property of Flex so that we can use the flex box and then how we want the flex

39
00:03:21,220 --> 00:03:21,880
to behave.

40
00:03:22,180 --> 00:03:26,710
So set the flex wrap and we're just going to wrap the flex content.

41
00:03:29,510 --> 00:03:31,370
Let's set our font size.

42
00:03:32,940 --> 00:03:41,460
So I make the content small point nine M and also let's do a text, a line and let's center line the

43
00:03:41,460 --> 00:03:46,340
text in the main container and the main part is going to be with an output.

44
00:03:46,500 --> 00:03:52,860
So let's copy the Flex and the Flex wrap because the main parent and then for the container itself,

45
00:03:52,860 --> 00:03:54,750
this is where we need 50 percent.

46
00:03:55,800 --> 00:03:58,140
So this will put 50 percent across.

47
00:03:59,010 --> 00:04:04,140
And let's go back in here and we'll make a quick update that we want to.

48
00:04:06,660 --> 00:04:16,230
I put the initial search content and we need to close off each one a little bit of debugging here and

49
00:04:16,230 --> 00:04:17,400
let's see what that looks like.

50
00:04:17,430 --> 00:04:18,810
So the search for test.

51
00:04:20,680 --> 00:04:26,230
We want to have that at the full width, so that's not going to be contained within a container, whereas

52
00:04:26,230 --> 00:04:28,720
this is containers going to be 50 percent.

53
00:04:30,610 --> 00:04:35,380
So let's add in a div there and try that one more time.

54
00:04:36,250 --> 00:04:42,190
And let's give this one a class and I'll give it a class of search.

55
00:04:43,360 --> 00:04:46,900
So that way we can give it a Fleck's of 100 percent.

56
00:04:48,740 --> 00:04:58,250
So select the flex and do one hundred percent, so the search term goes all the way across and I can

57
00:04:58,250 --> 00:05:02,090
make it big using the font size.

58
00:05:06,410 --> 00:05:12,860
So that way, the search term is showing up there and then we've got the results are nice and neatly

59
00:05:13,010 --> 00:05:15,290
stacked together and fully responsive.

60
00:05:15,680 --> 00:05:19,100
And if we ever want to update it, we can do thirty three percent as well.

61
00:05:19,550 --> 00:05:27,800
So if we want three rows of results and in that way, if we do update it, we can really easily also

62
00:05:27,800 --> 00:05:32,060
change the default results if we want instead of 10 12.

63
00:05:32,240 --> 00:05:40,460
So that nice and neatly stocks within the three columns and just change that back to ten and then going

64
00:05:40,460 --> 00:05:44,150
into where we've got our flex, let's update this back to 50.

65
00:05:44,930 --> 00:05:50,900
And then in order to make it responsive, if we want to do a flex of one hundred percent on the container

66
00:05:51,140 --> 00:05:55,460
at a particular breakpoint, let's add in the media query.

67
00:05:56,660 --> 00:06:03,830
So whenever we hit a max width of and to do it at six areas where we're going to set the breakpoint.

68
00:06:05,740 --> 00:06:14,730
And select the container and for the container, let's select the flex and put to one hundred percent,

69
00:06:15,130 --> 00:06:21,820
so on smaller sized screens, we'll just go all the way across larger sized screens we can stack to.

70
00:06:22,120 --> 00:06:26,740
And this, again, depending on what your preferences for the stacking and how you want to output your

71
00:06:26,740 --> 00:06:27,280
content.

72
00:06:28,060 --> 00:06:30,940
So this is just a simple example that we've got.

73
00:06:30,970 --> 00:06:34,240
We using some simple styling, using the flex box.

74
00:06:34,870 --> 00:06:37,360
And of course, it's up to you however you want to style it.

75
00:06:37,930 --> 00:06:43,780
Also, if you want to update the styling of the button, we can do that as well, where we've got the

76
00:06:43,780 --> 00:06:45,460
button button.

77
00:06:47,710 --> 00:06:52,960
So let's select the button object, apply some larger styling.

78
00:06:54,990 --> 00:07:04,140
So set the background color and how, but we just set it to red and have white for the text.

79
00:07:05,560 --> 00:07:07,150
Do some padding their.

80
00:07:10,400 --> 00:07:11,990
So the button looks like now.

81
00:07:15,040 --> 00:07:17,440
And also want to update the font size.

82
00:07:21,850 --> 00:07:31,270
So one point, five p.m. and then also let's also update the input, so the input for search Q with

83
00:07:31,270 --> 00:07:32,140
a class of search.

84
00:07:32,140 --> 00:07:32,470
Q.

85
00:07:34,970 --> 00:07:37,250
And we'll also do the same font size.

86
00:07:40,310 --> 00:07:45,920
Let's set it to with a 100 percent display of block.

87
00:07:49,180 --> 00:07:53,950
And actually, we don't need the 100 percent if we're doing a display block, I'll also do a display

88
00:07:53,950 --> 00:07:54,880
block for the button.

89
00:07:58,820 --> 00:08:07,430
And let's set it to 90 percent for the with so that it's not taking the full available with and then

90
00:08:07,430 --> 00:08:15,390
to censor it, we can do a margin auto to censor the content and we might also want to censor the button.

91
00:08:17,360 --> 00:08:22,460
So, again, whatever you prefer, let's also update the line height.

92
00:08:26,480 --> 00:08:27,620
Two 30 PEX.

93
00:08:32,290 --> 00:08:40,960
And for the button, add in a cursor pointer and then for the button hover, let's change its opacity.

94
00:08:44,260 --> 00:08:50,230
So that there is some difference whenever we go on top of the button and maybe that was a little bit

95
00:08:50,230 --> 00:08:50,710
too much.

96
00:08:52,480 --> 00:08:52,970
So there we go.

97
00:08:52,990 --> 00:08:57,910
So we've got our fully functional mini application that's searching YouTube.

98
00:08:59,470 --> 00:09:04,510
In this lesson, we did a lot of styling, so go ahead, test your application, and then once you've

99
00:09:04,510 --> 00:09:10,480
got the application running as expected, then update some of the styling, make it look nice, and

100
00:09:10,480 --> 00:09:16,930
also try out getting different property values from the JSON feed and put them on a page.

101
00:09:18,910 --> 00:09:25,150
And just variations of this application to get more familiar with the Jason coming from YouTube.