 you've made it to the last video in this series on how to build a Mars weather app almost sort of it's my last part of the series the last part of the whole series is over on Kyle's channel i'll talk more about that at the end though in this one we're going to be looking at that thing that's on the bottom that's sliding up and down and has the little animation going and we're moving the title around and we have an arrow that flips there's a lot of stuff to do in this video let's jump in and see how we can do it and so the very first thing i'm going to do is come in here and do a previous weather weather and let's give it my background of var color light oh not gray light oh you got to spell things properly for them to work previous weather there we go uh so that's good my color on this color can be var color gray hopefully that's dark enough oh it's a little light what did i do in the original design definitely had that as darker we'll go with this one i think that's the one we want there that looks a lot better perfect um on this we're eventually let's do it now we're going to need a position of absolute on here absolute with a bottom of zero which does that to it so width will also be a hundred percent to make sure it's the full size so in the previous days we can give that a display of flex and it should line everything up next to each other we're almost done look at that that was easy all right uh you know it's like 50 of the layout just that's awesome um so if we come and look at what this should eventually be looking like we want it to have like our arrow here that turns around and we need this whole thing to move up and down um now we do want this to like hide away and come back up so the way we're going to do it i'm going to turn this off after but we're going to do a transform on here and i don't know how much we need to translate it by but we'll find out let's just try 50 to push it down by 50 and see what happens that's not too bad actually let's do it a little bit more there we go so it's sort of like hiding away like that um but we want our button that we can click on our toggle thing that we can click on there so if we come back and take a look we have a checkbox that's going to be set up with our label of weather toggle there um so we can set that up to be that triangle thing that's going to be right here so to do that i'm going to uh previous weather previous days let's go right here because we're before previous days and we have our uh we're going to leave the checkbox on there for now we'll just get rid of it right at the end so for the next part is our show previous weather label which i'm going to also give a position of absolute now because i'm going to give this a background of uh little lime green just so we can see it while we're working on it so we have my little label that's there right now uh so let's first do a left of 50 percent which will move them over now it looks center but it's not actually centered yet so let's give this a width of like nine of i don't know 10 ram um so you can see it's growing out that way and even let's make it that bigger let's make it like 30 ram so we can see like this is not centered it's starting the left part at the center so on here we're going to do a transform translate translate of 50 percent and that should whoops uh negative 50 percent and that should suck it so it's like dead center now so that's cool uh it is nice and dead center let's bring this back down to like a 10 so that should be right dead in the middle uh another thing we can do is a display of actually i was going to use a display flex and do some complicated stuff but i could probably just do an align uh text align center on this oh there we go my arrow is now in the middle uh so we're going to make that more complicated that we had to let's give it a font size because we need that to be bigger font size of uh can we use one of my bars let's see uh maybe my h1 actually would be okay uh font size h1 let's see what that looks like not big enough h2 might be too big that's not terrible and we'll give it a line height of one just to make it a little easier to control there we go uh line height of one and okay so we're we're off and running a little bit now once again i want to make each triangle so if you remember the last time or a while back i made a triangle using a clip path for this one so that was a couple videos ago uh we're going to be looking at doing the exact same thing so we're going to do a polygon polygon we need a clip path first clip path polygon and we're going to do the same thing so 50 0 comma 0 100 0 100 percent comma 100 percent 100 percent and of course it's a clip path and there we go we have a nice triangle right there so now the only problem is where it is positioned so we also need to move it up so we can actually do that where i did my translate here we did 50 so i'm just going to do a comma and i think it's negative 100 that we need to move it up it's total exact height so it's in taking its own height and moving it up 100 percent of its own height which puts the bottom where the top was and it's exactly where we want it to be and the other thing we want to do now is the background color can be my var color light boom there we go and so now when we click on that the whole thing should come up so actually we want to make it look like we can click on that so we should also put a cursor pointer on there so now it looks clickable there we go super duper um my color i guess i could actually change just so that's not so harsh um color bar color gray there we go and we're looking pretty good we're looking pretty good so now when we click on that we need a whole bunch of stuff to happen right so this is where things get a little bit more interesting um so for this to work we are going to need a little bit of javascript that's going to come in here so let's just come here and leave another note for kyle um label here so previous weather so uh when clicked add show weather to previous weather div uh so now you know the idea is if somebody clicks that this previous weather is going to add a show weather class so what is show weather going to do let's go and play with that a little bit we can come down here and we can say show weather so show weather is going to do a few things one of them is we need to move the whole thing back up so transform translate zero uh what did we do that what did we do a trans show weather previous weather we did a translate why so we'll stick with that translate why of zero so it means that whole thing can slide up now when that slide up or slide down happens ideally we can transition that so we can do a transition on there uh so we want to do our transform say it shouldn't be too long so like 350 milliseconds and for now we'll stick with a simple ease maybe we could make that a bit fancier after um so let's just come to here inspect element find that so if we have show weather's on we see it remove show weather it should disappear so it slides down and then back on here previous weather show weather so somebody clicks on it the whole thing will slide up like that so that should work pretty nicely so that slides up and slides down and you know what uh you know what i'm looking at this now um i originally did this with the label and the input here um because there's a cool trick you can do but i'm not even going to be able to do that trick because there's too many things here i need to change um this would still work like we could definitely use this kyle could definitely come in and use all of that but i think we're over complicating matters um when i think what we could do is just have this as a button instead of a label uh button um the checkbox isn't going to help us at all and it just creates a little bit more work and actually trying to hide the hide the the checkbox after the fact so i'm going to switch that over to a button so when clicked i'll just say toggle uh that so i mean it's a simple thing to do so he can set that up so when clicked toggle show weather to previous weather div um yeah so that should be simple enough so now it's changed a few things we just need to fix up on that um so let's just look here i'm not actually sure why the button why that happened but okay uh we're going to need to put a border of zero here to get rid of that and my i know i font family family inherit the joy of form elements not inheriting font families i do not understand there we go that looks a little bit better so we're back to where we were before so now we can now people can click on it and it should work perfectly fine and we can tab onto it and everything i do think one thing i will add to here is i think what we'll do is do a dot and hover comma and focus which normally i've been trying to avoid actually making these the same lately but what we'll do is we'll just switch the color to var color dark and font size what was my original font size h2 uh i'm just gonna put like three rim i just want to see what that looks like oh no we don't want to do that eh that's kind of weird never mind i'll change the color i'm gonna leave it at that so uh at least there's some indication there's a few little things going on that that should go up and down okay cool um so we have let's come back down to here now sorry about the little detour we just took uh so previous weather that is good that is going to come up but obviously there is a bit more work in the previous weather that we want to do so when this does come up like that show previous weather what else do we want to do so in this previous weather the other thing i want to do is my uh show previous weather label i call that label i guess it can just be show previous weather actually since it's no longer a label so we can take that off there that off there and of course break everything and then oh no what did i do wrong oh and then fix everything there we go okay um so on my show previous weather when it's in there uh actually not on that um so we only want this here let's do show weather like that right uh so actually we want show weather and then this can just because this is gonna make my life a million times easier um so when show weather is on it's going to slide up and again let's just copy that for now and leave it here which we'll have to get rid of afterwards um but show previous or actually what am i talking about and there we go so that'll be up so it's when my previous weather has the show weather on it uh it's going to come up like that um but now we want that to also turn right because we want this to be facing down in this state so where to do that we can come here and we can say my label but we don't want our not my label let's do the right way show previous weather my that that's why we just changed the name of this uh so on my show previous we don't what we don't want to do is do my transform rotate 180 degrees because if i do that the whole thing turns upside down and it's complete disaster come back over to here and find my uh where i have my arrow i'm actually going to wrap this in a span and close span uh so now that we have the span in there what i can do is come back to here and say the in here a span would be rotated 180 degrees instead it's not going to work at first uh so i'm just going to do a display of block on here uh so there we go it is now pointing down and we could do like a nice little animation on there if we wanted to uh so right here actually we'd have our span actually on here we'd probably have our display block transform rotate zero and we could also uh then put in here uh transition transform to say 300 milliseconds ease uh so that should flip it over and now another thing i don't really like right now is just where it's um you know the way it's sort of up a little bit uh so here we could add a second one of translate y and give it like a negative 10 pixels or something uh maybe it's a bit too much negative six there we go it looks a little more centered so now if we turn off let's come back to here and again uh kyle will be doing this with the j s but uh right here if we turn off the show weather you can see it rotated around and if i bring that back on and do it one more time if i turn it off it goes down i turn it back and if i turn it back on it slides up like that so there we go perfection i think it's looking pretty good and that's working really well uh there's a bunch more stuff here that we need to do but at least that functionality is here so the next thing we're going to want to do is to come um we can easily fix this so i guess we'll start there at the easy part of fixing that up um here are my previous days i did my display flex already but what we'll do is we'll put a justify content on here justify content of space uh between so it'll space everything out and then we can just add a little bit of padding of like 2m there we go so nothing is touching on the sides and actually i'm not going to put that padding on here i'm going to bring that all the way up to here and do padding of 2m the reason i'm doing it here instead is just so we you know everything comes together with it uh i think that does work a little bit better 3m and oh man the fun of css uh my button is now disappeared and this is why people don't like css but come on it is i'm having fun with this uh so we need to move that up a little bit luckily it's really easy to do i know i have my padding of 3m so here where i did my negative 100 i can do a calc and in my calc it is going to be negative 100 plus uh actually minus a 3m and that should push it the rest of the way uh this is where maybe rems would work better there we go and we're good to go uh so rems we just know they're gonna be more consistent across the different areas whereas m's one place it could be different from another so just like that everything is working once again and we can keep going with what we have here um now actually i am i'm gonna come in and do a little bit of javascript i want to make this button clickable because we want to add an animation into here and if i have to do it all through the dev tools i'm gonna go a little bit crazy uh so kyle can obviously change this but i need this for testing purposes uh so we're just gonna create a const of um toggle previous weather toggle is equal to document dot query selector let's turn word wrap on document dot query selector and what was the name of it uh show previous previous weather all right so with that um previous weather toggle add event listener click so when we click we want to do a little function uh and actually that means we need and have another thing here which is my const uh previous weather will equal document dot query selector of dot previous weather so when we click uh we are going to do a function so we'll put a little arrow function here and what are we gonna do we're going to so somebody clicks on that we're gonna take um um previous weather class list toggle show weather and let's see if it works of course it's not working let's see why not you got a spell stuff right is that my only mistake i'm pretty proud of myself if that's my only mistake and there we go it's working fantastic so you can see the little rotation on there okay much cleaner much nicer we can actually see it in action if kyle won't he'll change change this if you need to there we go all right so we have this working at least a little bit so we can make this you know because i want to add some animations and make this look a little bit more fun uh so the very first thing i want to do is i don't want to see these so previous days so all of my previous day uh i'm going to actually give these an opacity of zero so they should hopefully disappear there we go so when it's down like that i don't want to see them but when we have this my previous previous day will have an opacity of one so we can see it they hide we can see it they hide i'm also going to come up here and give this a transform a transition of opacity of like 350 milliseconds opacity 303 150 milliseconds linear let's just see how that looks so they're there and it's a bit annoying that when it refreshes we always have show weather on so let's remove that from there and now when i click here they appear when i do that they fade out so that's pretty cool but i think we can do a little bit more than that um so um so they're going to do that where they appear now i also want this to be in the middle we're going to do this is going to be interesting because i think if it's in the middle and then it shifts like we see it slide over it's going to look really weird right so this one's going to be fun uh we're going to take show previous weather no that's not there previous seven days that's my class main title i'm going to give this another one main uh actually because i'm not doing this for typography reasons i'm doing this only for styling like positioning and stuff reasons we're going to do previous weather title uh because i think it's going to make the most sense uh to do it like that so previous day we're going to leave that okay so i'm going to say my previous weather title is going to be a text align center and then when we come here now we're going to do something fun here but previous weather title text align uh will be left now that's not something we can actually animate it's a little drawing that it just jumps across but i think it works okay i think that's going to work fine though just having it like that but what i do want to do is build in a little at key frames um we'll call it slide in up and call it that um so what this is going to be is we're going to start an opacity of zero oops at zero percent we're going to have an opacity of zero and we're going to have a we should probably put this on multi-line because we're going to have more than one property on here so opacity of zero and then we're going to do a transform translate x uh y of let's say 50 percent so it's going to move things down a little bit then at 100 percent the opacity will have opacity will have gone up to one and the transform will have gone up to translate y should be at zero okay so what am i going to use these for i'm going to use it for these coming in and you're going to see why now because i like it that it fades in but instead of doing a transition here what we're going to do is a animation because now we can do two things at once so animation will be uh my slide up in 500 milliseconds we're going to start with that and so we should be able to oh whoops i don't want it here we want the previous day we want that to be here and we can actually take my opacity off of that then uh the one problem that's going to happen i think is they're going to show up and then disappear so here we also need to put in a four words and just based on how long that took i'm going to make it a little bit longer let's do 750 so then they'll slide up and in just like that perfect and even you know what let's just see what happens uh previous weather title can i put on here too or actually what am i doing let's just let's see i don't know if it's going to work fabulously on there or not but we need a comma actually that sort of helps a little bit because it slows it down like what i want it to do so there we go that's kind of cool and so it gives it a bit more of movement so it's not just like jumping to the other side it's part of what's coming all in here so you can see they're all moving into place and what's cool what we can do now i think uh is on here uh previous weather previous day nth child one we're going to have to do a few of these so let's just copy that and two three four five six seven on all of these we can do a nice little uh animation delay delay like that and i'm going to do 100 milliseconds for the first one and actually i should we'll just copy that on all of them it could have done this a lot faster but anyway that'd be 200 and you get the idea let's see what this is going to look like and so we have it down and then it should be they all come up one after the other now i think that's a little too slow i think uh they should be finished a lot faster than that so let's play with these numbers a little bit and i'll be right back all right so let's see now there we go i think that looks a little bit nicer cool it's always fun doing little things like that so it nice little slide in and then we can click and it all just disappears um and slides back in cool cool cool so i think that looks pretty nice and snazzy like that so a lot of the fun stuff has been done uh we're just going to finish up by fixing a little bit of the typography here there's a really quick and easy thing that we can actually do uh previous day we're all in the previous day still so um dot previous day i'm actually going to just select all direct children of it and say margin of zero because i think everything should be sort of stuck together when we look at what the final example are ahead of here whoops um so everything's a lot closer together so i think just doing the previous day like that getting rid of all the margins works really really well the only things i really want to change in here based on what i'm looking at right now are my this actually looks pretty good my previous day saw is actually looking pretty good but the previous day date i'm actually going to change so here and date font size will be a little bit smaller and i don't think i have anything like that so i'm just going to do a 0.9 rem and we're also let's just take a look that's better and the color of that one was my var color gray which might sort of fade it out a little bit too much um to make it super readable but i think that's okay because if we click more info we're filling it all up over here uh so the last thing we want to do now is my button so that was my more info button so and more info and on this um we can how do we want it to look let's go look at what we wanted so we can do my border is zero and we can use that border radius trick again so border radius of 100 v max uh background is my var color dark and my color is my var color light and i guess that should we might have to change a font size and padding so uh text transform is going to be upper case padding will be 0.5 let's start with 0.5 m 0.25 m that doesn't look so good why not uh maybe i guess i shrink it down let's do 0.5 and i got one then oh i'm mixing this up that's 0.5 should be top and bottom and my one should be here it's always the smaller one on the top i'm like well the shape of those looks really off and even i'm gonna you know we're gonna do 0.3 or something there there we go so that's looking a little bit better they are buttons so cursor pointer uh usually i have that on my first line i know i haven't been super consistent with that but there we go and we want to build in a bit of a hover on here uh so the hover we can mess that in here and hover color uh background background will be color var uh we can just go to the with the gray is that going to be dark enough so we can still read the text yeah that's good enough people understand what's going on and i will add a little margin top of like 0.5 m to these uh just to create a little bit more of a separation i just realized one thing i did here uh that's a little silly i nested this in here not that it mattered because we can't see it the rest of the time um but that would make more sense in this area uh previous day to have like the and star margin zero um just because that was really raising the specificity which i can't say margin top one m i think now i can overwrite it yeah there we go before the way i had it set up i couldn't overwrite it with this because the other one was two classes uh whereas this was a single class um the other one was this was being nested and it was coming later on so just that fixes it it lets me space those out a little bit because i thought they were a little bit too close together and like that it took us a little while to get through all of this but it is done i'm really happy with the result i think it looks really really good and it's all done and it was so much fun to do i hope you enjoyed watching this whole series as much as i had putting it all together now the next step is to go on over to kyle's channel and see how he gets it to actually work with real data coming from the mars lander how amazing is that how cool is that you know it's actual live data it's all gonna be populated in there he's doing all the crazy magic that you can do with javascript to make that happen you can go and watch his video right now to see how he takes what i've done and makes it all work in you makes it work that's so cool so go and check that out but before you do make sure if you haven't yet subscribed to please subscribe to my channel if you're if you enjoyed this of course and a big thank you for watching a big thank you to my patrons for helping support everything i do here on this channel and of course until next time don't forget to make your corner the internet just a little bit more awesome