[00:00:01] Hey welcome back to the courts in the sky. We are going to finish up the Iraheta now styles. So it's our application you'll notice that it's all dandy gray but it doesn't display which one selected. So what we want to do is have it display these hover styles on the one we have selected so examples for request it should display the styles without me hovering over it. So let's go ahead and add in those styles super simple because we already have the styles which means all we have to do is having a piece of functionality and then copy the style somewhere. So let's say it good right now and let's say OK let's take in a parameter that is telling us which one we selected. So let's say selected and it's not the title of either support request or newsletters. So we need a positive sense which is good news or not. Yes. And on that had an adult's passion. The whatever it's called the perimeter and you'll notice right there on my screen and hovering. I had another child when he selected it. So let's say selected is newsletter. And then let's go to our support such as the same thing let's say selected is what we don't like. Let's just say support request. No one go to our newsletter digests. I mean my aunt. Yes. And let's just apply it time based on which one it is so let's say OK on this ban let's give it a class name and say we're going to need string interpellation Woodys and Javascript. Let's put up with. We're not even stranger ablation. [00:01:43][102.2]
[00:01:43] But you get the idea so putting on some brackets here let's just say this or oh it's a selected question mark so it's selected let's return the national theme and now underscore underscore selected tag. Are we after you say selected is equal to newsletter and then say OK this is true. We want to return now selected. If it's not true we simply want return Nothing. Now we want to do the same thing on our other Stansel copy this put it in here. Except we don't want it to say news letter. We want to say OK support request is selected and we want to return this. Now let's get this tag. And what's the pricing stance to it. Well it's hard now I had an idea. See it's us and I'm going to clean it up a bit and then I'm going to add it to the very top. It's a Naxalite did you put it out there. So it's recognizing it recognizes it as a class tag. And then I'm just going to say OK we want these selected styles on Hunter so I'm going to copy that and throw it in here. Should be good. Let's go to our application and test it out of the page and select one of these. It's not so let's see why this is happening. We have an we're about to put it right. Color color red when you go back to heter now and see what's happening. So selected is equal to news letter and then it's because we have this extra space. Let's get to it and I'm not sure what happened. [00:03:24][101.2]
[00:03:25] But yeah now it should work. That's correct. We've got to reload in one of these should be selected. All right sweet requests if selected run support request. Let's click on Newsletter newsletter is selected and yeah that's exactly what we want. So let's back newsletter. We have all this. It's good design and see what we have. OK. So what we want to do in the next set of guides is Thio to see what we want and style what style the content component very first and then we'll move on to the archive and so on. So in the next guide we will styles the content component and just remember that is I'm going to use loaded lot to digest and it's the newsletter content. And then if I click on Newsletter content was looking KOMMANDO bring us to news content. Yes. And this is the component. So we'll be styling newsletter content. Yes and the next guide for what's coming out of sync is status get high get Chemeq and what we did in this video was we finished styling the pair now Jersey. OK I will see you when the next guy. [00:03:25][0.0]
[203.4]