Be playing styling to our application, so what it's doing is it's going to search YouTube and return
back 10 results for whatever the search query is.
And in this case, we're actually searching within our channel and then returning back the results that
are corresponding for the channel content.
So we've applied a little bit of styling in this lesson using Flex in order to stock it and have two
rows of content and then it is responsive.
Adjust the one row of content if we resize it, added some styling to the button and also to the input
field and also some styling into the title of the.
Of the video, so the main objective, of course, is still remains to be to work with JSON data that's
coming back from YouTube.
So you're welcome to try it out.
And I do suggest that you try getting different property values out, putting them on the page to really
get familiar with what you can do with Jason and connecting to various APIs.
So let's get started, apply some styling and wrap up this mini application.
So once it's working as expected, then we can update some of the content that we have here.
So I want to clear out what the search results are.
So within whatever the query, search query value is, let's remove that.
So when we do make the request, we can remove that and also when we're outputting content.
Let's output each one search for and then whatever the term was that we searched for, and that term
is going to be within the queue value.
So that's already contained within the main object.
And I just going to use the tactics here.
And search for a cure that would give the user a little bit more details on what they're searching for,
a search for test.
And let's try another one, just make sure it's working.
Search for JavaScript, let's return back to JavaScript content.
We want to apply some styling to the images and let's make the images responsive within the box.
So for any of the image tags.
And max size is 100 percent, so set up the max width to 100 percent.
So that will resize the images fit within the main containers also, instead of using the regular styling,
let's apply and add in to the elements as flex.
So instead of width, let's set it up as flex 50 percent.
So that will give us a flex of 50 percent.
And we don't need the display properties anymore or keep the border for want and the padding and then
in the parents.
So this is going to be where we've got the main container.
So we'll have to add to the parent.
And apply the display property of Flex so that we can use the flex box and then how we want the flex
to behave.
So set the flex wrap and we're just going to wrap the flex content.
Let's set our font size.
So I make the content small point nine M and also let's do a text, a line and let's center line the
text in the main container and the main part is going to be with an output.
So let's copy the Flex and the Flex wrap because the main parent and then for the container itself,
this is where we need 50 percent.
So this will put 50 percent across.
And let's go back in here and we'll make a quick update that we want to.
I put the initial search content and we need to close off each one a little bit of debugging here and
let's see what that looks like.
So the search for test.
We want to have that at the full width, so that's not going to be contained within a container, whereas
this is containers going to be 50 percent.
So let's add in a div there and try that one more time.
And let's give this one a class and I'll give it a class of search.
So that way we can give it a Fleck's of 100 percent.
So select the flex and do one hundred percent, so the search term goes all the way across and I can
make it big using the font size.
So that way, the search term is showing up there and then we've got the results are nice and neatly
stacked together and fully responsive.
And if we ever want to update it, we can do thirty three percent as well.
So if we want three rows of results and in that way, if we do update it, we can really easily also
change the default results if we want instead of 10 12.
So that nice and neatly stocks within the three columns and just change that back to ten and then going
into where we've got our flex, let's update this back to 50.
And then in order to make it responsive, if we want to do a flex of one hundred percent on the container
at a particular breakpoint, let's add in the media query.
So whenever we hit a max width of and to do it at six areas where we're going to set the breakpoint.
And select the container and for the container, let's select the flex and put to one hundred percent,
so on smaller sized screens, we'll just go all the way across larger sized screens we can stack to.
And this, again, depending on what your preferences for the stacking and how you want to output your
content.
So this is just a simple example that we've got.
We using some simple styling, using the flex box.
And of course, it's up to you however you want to style it.
Also, if you want to update the styling of the button, we can do that as well, where we've got the
button button.
So let's select the button object, apply some larger styling.
So set the background color and how, but we just set it to red and have white for the text.
Do some padding their.
So the button looks like now.
And also want to update the font size.
So one point, five p.m. and then also let's also update the input, so the input for search Q with
a class of search.
Q.
And we'll also do the same font size.
Let's set it to with a 100 percent display of block.
And actually, we don't need the 100 percent if we're doing a display block, I'll also do a display
block for the button.
And let's set it to 90 percent for the with so that it's not taking the full available with and then
to censor it, we can do a margin auto to censor the content and we might also want to censor the button.
So, again, whatever you prefer, let's also update the line height.
Two 30 PEX.
And for the button, add in a cursor pointer and then for the button hover, let's change its opacity.
So that there is some difference whenever we go on top of the button and maybe that was a little bit
too much.
So there we go.
So we've got our fully functional mini application that's searching YouTube.
In this lesson, we did a lot of styling, so go ahead, test your application, and then once you've
got the application running as expected, then update some of the styling, make it look nice, and
also try out getting different property values from the JSON feed and put them on a page.
And just variations of this application to get more familiar with the Jason coming from YouTube.