 I'm assuming you're here because you've been following along with our Mars weather app. In this video, we're going to be doing the little toggle switch. We've already put the HTML of it. We're just going to be styling it up and actually making it work. So you get the little Fahrenheit Celsius things we can click on, the little things going to jump back and forth. One of those really useful things to know. So let's jump in and check out how we can do it. All right, let's get this unit toggle going. So the unit toggle we have right here. Obviously we need to get this looking a little bit different. So the first thing I'm actually going to do is unit toggle. We have here grid column. I didn't call it unit toggle, did I? I just want to check something. I just called it unit. I put unit toggle. This is just unit. It was going in the right place anyway, just because it was the only empty cell. So it made sense for it to go there. But I still like, since we're using grid, we're explicitly stating stuff, we might as well tell it where it should go. And what I'm also going to do here is do a place self end. And yeah, let's just do a place self end. And that should move it down to the bottom corner there, which is more of sort of where we want it, right? It's going to line up that way. And it's going to line up with their text on the bottom there. So it should be in the right spot. We're a little bit off. So anyway, we have a lot of styling to do here. So we can always add a margin to it or something. I think it's just because the wind text is pretty short. Yeah, so we have some empty room there. So maybe we could play around with this a little bit to try and get that working a little better. But for now, I think it's okay. So on my unit, that's okay. Let's go back to here for a little bit. So this is the thing that I ended up changing quite a bit along the way. So I think the first thing I'm new is I'm going to leave, actually, I'm just going to save this for a second. I wasn't seeing anything come up. I had to save there because I just Yeah. Anyway, now we can see we have my two toggle things there and we have my button that's right in the middle. So I'm going to get the button in the middle looking okay first. And then we're going to play around with the rest of it. So the unit, then I had my and toggle, which is my button. So the first thing I'm going to do is a border zero. That's not actually I'm going to do a cursor pointer, because we want to make sure when we go on top that we get a little hand icon to show that it is interactive. And what else do we need on this? We need a let's give it a width. See how that looks. That's not too bad. I think do we need to give this a height? I don't think we'll have to give it a height, but we will need to give it a border of let's say two pixels solid and my bar color. Great. There we go. I'm actually going to make this like slightly bigger. There we go. Just because that semi colon in the end of the line there was annoying me a little bit. The background on it because let's actually I have my toggle. And then the other thing I want to do in here is do an and after I guess we'll go with the after the I'm not giving it a height because this is what's going to populate what's inside of it. So if you know anything with pseudo elements, you know, we need some content on there. And I'll give it a background as well. So var, whoops, background of our color gray. So it's the same as my toggle the border that I put on there. I'm going to give it a border radius of 50%. And now we want to give it a I'm just going to give it a height of like, I don't know, point. Let's just do one run and see what that looks like actually. Oh, and one other thing we're going to want to display a block. So it shows up. And then we got my nice little circle. I want a little actually it's come back up on my toggle here for a second and just give it a background of transparent, not transparentize transparent like that. There we go. That looks a little better. And actually the unit, you know what we can do actually, this could be interesting. I'm going to switch this. Let's say my unit here has a color of our color gray. So just because I wanted my f in my seat, all like there's sort of it should all be faded away. But when I hover, I do want it to change. I'm bouncing back and forth a little bit. But let's see, I want to round the corners on that I need some space here. So I'm going to create that space first. So margin, I don't want to be too big. I'm going to go with pixels instead of m's or rams, just because if not, I think it would be a little bit hard to play around with. And now the width of it. So let's give this a width because right now it's not a good width. And I'm going to do a I'm going to start with 50% and see what happens here. But actually that looks pretty good. Maybe we can just leave it like that and we don't need a calc. We'll see. We'll start there and we'll we'll play around with it if we feel like we need to. Okey dokey. I'm also unit toggle. Let's do padding of zero. Ah, that's interesting. That sort of broke things, but that's okay. Padding of zero is okay, though. We need our border radius on here. Border radius. Interestingly, if I do 50%, it's going to give us this weird ugly oval, which I really don't like. But if we do 100 v max, or you can do something else, it's going to give you nice round corners, but make it more pill shaped. Because I guess because of the way things are calculated, I don't actually know why this works. I know why the 50% works because it's going to like the 50% point. And then it's going off. But this like the V max here would be the same as if I did like, you know, 10,000 px. Like if you have a huge number on it, it's always going to give you this type of thing, whereas the 50% won't. So if I do 100 v max, it's the bigger between the height or the width of your screen. It just means you're always getting a nice pill, pill shape. I'm just literally changing the number here until I get this to be a circle. There's probably a better way to do it. Well, here, my height is one ram. Why am I not just doing one ram here? There we go. We have a circle perfection. Another thing I'm going to do on my unit is a display flex. They're already all going next to each other. But you can see now it's actually centered vertically, which is nice. I could do a gap of like 0.5 m. And look at that. The gap actually works on flex. This is amazing. I said, we're going cutting edge. We might as well stick with cutting edge. This normally wouldn't work. You could use margins instead. I think Firefox is the only one that supports the gap property right now. And I am in Firefox. I said we're cutting edge, but most people I think for this would be on the toggler itself. We could add a margin on this. 0 on the top and bottom and like a 0.5 on the left and right just to create the spacing we need. That's simple enough. But gap is on its way. I'm very excited for when all browsers support it. What else do we need to do? That's actually looking pretty good. Now, what I want it to do is when I click from one side here to the other for my radio buttons, I want that radio button, like I want this toggle to switch to the other side. And that's where things get a little bit more fun. So to be able to do that, I think we're going to have to break out of all of this. We are. And this really depends on how you set it up. Actually, there's two different ways I could do it. We have my button unit toggle. Hmm. You know what? We could do it. I was going to do it the other way around. We have my toggle there. So here's my after. I'm going to break out of my after. So when my unit toggle has, so I'm going to do the ampersand. So my unit toggle has a sibling, which is checked. I'm just going to change for now color background, background, border color is red, just to show you and let's see if it works. It's not working because that's the label. So we are going to have to break out of here just because if I look at this, I really want to be targeting this input and how it's in relation to there. So this basically what we could do actually is if we come down all the way up to here, I could do checked. So if anything is checked and it's direct sibling is my unit toggle, it something's going to happen to my unit toggle. So for now, let's just say that the border color becomes red and see if that works. So there you go. This is checked. So my border color is red. And if I go here, this is no longer checked. So it's no longer red. So we get this relationship between whether this one is checked or not checked or, you know, we, yeah. But in this case, I don't want that to happen. I want the after to change. And what do I want to do with my after? I want the margin left to become auto. So now if this works, there we go, it's pushed all the way that way. Actually, I did it backwards. You can see it's working, but it's inverse. So actually, in this case, we don't need anything. So oh, yeah, actually, I'm going to, we're going to put that back on. We're going to say margin right is auto. I think what we'll do is we'll just do say them, the margin, uh, how explicit should we be? I'm going to say margin right margin on the right side is no my margin left is auto. So by and here my margin left will be the three pixels. We set it back. So here we go. So right now the margin left is three pixels and the margin right is auto. So it's coming all the way to the side. I guess I don't really need that. Do I? We don't really need that line. But we just need this to overwrite this default state because the default state is going to be that where it flies over to that side. So if this one is checked, it's using a margin left of three pixels. So the margin left here is three pixels. But if you have one, we always see margin left and margin right set to auto to center something. But if one of those margins is set to auto, it's going to push that thing the entire way across. So here we can set that and it's going to fly over to the other side just like that. Awesome. You know, I'm actually going to change all these colors here to my light because I was I was thinking of something, but this is going to be a lot easier to do than change colors light. I'm just going to set my whole so it's all going to be white. But then here we can come and set my opacity on this whole thing to like a point seven. So that grays it out. And then on hover, the opacity will go up to one. So if I hover anywhere here, so we're showing that we're more interactive. Yeah, we're going to do that. We also want to say that my did I give my labels classes? I didn't. That's okay. My unit toggle my unit here, we can just add label is cursor pointer, because it's going to give us this feeling that it is interactive. Let's also and this is just the same as having like dot unit space. So it's any label that's nested inside of there, just a and I guess even here this whole checked thing would be a little bit safer. If it was in there, I don't see how it could be anywhere else. But it's going to make it work only for checked items that are inside. So they're nested inside this unit component that we're building out here. So just a little bit more, you know, we're self containing it a little bit. Again, it's really specific with my unit toggle here. Is it necessarily probably not? But whatever, we might as well do a transition on opacity for say 275 milliseconds on a linear opacity is one of the few ones I will do as a linear transition. So there we go. If we come on any of this, it just makes it feel a little bit more like we can interact with it. And last but not least, we do need to turn off our inputs here or not our inputs, but we don't want to see the toggles. We only want to see the C in the F. So I can't use the screen reader only that I used up here because this has not focus not active. So if I were to use screen reader only, let's just show you what it would do. Call that not on here on my input. Class equals SR only. When I click on that, though, it would appear because it's in focus state. So if I click there, well, that would only have it here. But anytime I click on it, it would it sort of appears and then disappears. And then I can't actually click on anything because of the way things are moving around. And it's not working at all. So instead of doing that, I'm just going to do let's just take all this off. Save. I'm going to copy this. And I'm going to put it on my input. So let's just see. There we go. We can see that it's working, I think. So, you know, I'm not a big fan of nesting things because if we do go look at the compiled CSS, let's just go take a look since we're here. What this results in is things like this, my unit label, my unit input. I'm not a big fan of doing that. I like flat CSS, just like CSS select, just class selectors as much as possible. But I think there's no harm in little little things like that. As long as you understand why you're doing it and you have a good reason for it. I think it's completely fine. And you can see there's lots of errors coming up in here. But I have a feeling they're not. It's just related to, it's just related to the way auto prefixes handled some of these weird things that doesn't like the syntax for grid that auto prefixes putting on it. But it's making sure auto prefix is amazing. It's making sure that it's working over in everything here. So anyway, that is why we have some errors there. But there's no actual errors. Let's go back to there. So there we go. This whole section is working. There we go. Now we need the on click for here, but Kyle will hopefully set that up for us. And I think that's working really well. I have one last change that I do want to make, which is on my toggle on my toggle, I put a margin point five, I'm going to bring that up a bit bigger. I want a little bit more space around that. I think that looks a little bit cleaner. And there we go. So now we can toggle back and forth. And eventually that will be connected to my units here of Celsius and Fahrenheit. I hope you enjoyed that. And I hope you're still enjoying this series on how to build a Mars weather app. We only got one more left in this series where we're going to build out that thing on the bottom. That one has a whole bunch more going into it because we have a little bit of typography to do, but we got to get the whole functionality of it to actually go up and down. And of course, we need those things that are going to slide in and slide out and have some animations on all of that as well. That's in the next video. Make sure to subscribe if you haven't yet subscribed. So you don't miss that one. A big thank you for watching this one, of course. And a big thank you to all my patrons for helping support everything I do here. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.