Live-code a dropdown navigation | HTML, CSS, and JavaScript

Key Takeaways

oops [Music] hello everyone hello from me lyanna and him michael and him yes here we are again ready to code hopefully the weekly web dev challenge it's quite a big challenge this week i against my better judgment have decided that we will also do the css i don't think we're going to finish this because it took me a while to do it oh well personally oh yes there's your tea what is it um i suppose the thing is we kind of need to do some of the css before we do the js or do you think you can do it no i think you need to do the success to to do the gs then okay let's get into it welcome yes hello ppp slp i never know if i'm actually saying that right or is there another way of saying it let me know oh pear's here and alex yes everyone's here why don't i everyone yes okay shall we get started uh yeah yeah let's roll i love enthusiasm there's nothing else um so this is the end result we want so i will do a little screenshot of that okay and yeah usually have it slightly to the side don't know [Music] so i hope you're going to enjoy this challenge michael i know you love css try to do as much as possible it's my favorite yeah totally um so my plan for this right is to well style up the nav well first of all i have to start out the card yeah and then the nav yeah and then we can work on the js do you think that sounds good yeah to be honest i'm not worried about the gs at all because but the the css looks insurmountable yeah i know what you mean but hopefully we'll get there okay they'll look some more people have come hello nasa hello ellen thank you for coming and m was name perfectly said ppslp okay good that's good today i no longer need to wonder okay right let's get into it i think i'm gonna start well we already have the font loaded in so that's good news and having a quick look um here in the html so this is the nav yeah i should mention actually a few people said that it was difficult to read the screen so i've upgraded it so we're now in 1080p so i hope that makes it better you can see all my mistakes clear so anyway this is the nav bar and this is the rest of the card so i'm going to style that up first i think okay for now so it's not in the way i think a good plan would be to have display num on nav and actually that is what we're going to want um on page load isn't it because yes we don't want the page the nav loading with the page so i'll do that first off and then get cracking with the styles um so with the container cool so i can see i've got a background off i guess that's light blue i probably use a slightly custom color but no time for that um i'm gonna i'll set a width on it i don't think it matters hugely what we do if i do 70 and a height of 100 vh nothing's happening yet because my image is enormous um i'll also do a max width of about 800 because we don't want it stretching indefinitely for those people that have huge wrap around screens you know you need to keep a lid on those people i'm surprised you're not one of those people actually no but that's because i'm too cheap yeah i i don't want to spend like hundreds or hundreds of pounds on the screen good today um and it says scrimba content is awesome thank you of people coming in thank you all for coming um i would love to read all your names but if i did that i wouldn't write my css maybe i should do that right enough rambling on with the show uh yeah judging by how you know how in a rush you are i would imagine there's a lot of css wow yeah there is i'm gonna put a display of flex on it because that's what i do with almost everything and then a flex direction of column ah that's a relief that's actually looking halfway decent yeah that's pretty good um and then we want it in the middle of the viewport so the old trusty margin i should have tested you on that one do you think you'd have known that no no i still i don't know why these things just still do not resonate with you no i still can't have it in my head i don't i don't know why it is i'm just moving this um so i can have a separate section for my nav styles just to make that a little bit easier right so am i going to do anything else with this at the moment possibly not i think what i'm going to do is style up the nav then we can do the js and then i'll come back and tweak for example this arrow actually needs to be over there um or not but i think there's more important things at the moment oh hello from russia scrimba hello from wales let us know where you're tuning in from it's always very interesting to hear um oh i've got mr dc who's the biggest fan of scrimper says i've been using tailwind makes things way easier you like tail when don't you well i've heard a lot of good things about it and people who like tailwind tell me that it's not as horrible as playing css so just by that virtual i like it more but i haven't used it at all oh um there's a question from em within about bootstrap i know nothing about bootstrap or little if you do know the answer feel free to um drop the answer in the chat and hello from canada and hello from india yes okay let's carry on so yeah i'm going to style up this nav that's going to be my next move i think and to do that i am first off going to give it the background color i think that makes sense yeah and this is my all time favorite color hot pink i don't know why ever since i started coding i was using hot pink for basically everything including debugging you know when you change the color most people use red or something to see what's going on i've always used hot pink i don't know why it's just stuck with me so that's what i'll do the width of it um i don't want additive symbols i don't know what that is um i reckon is going to be about 25 okay obviously looking a bit of a mess at the moment hopefully position fixed okay that's looking better and z index one um it's already at the front so we don't actually need it but in case you were going to add other things onto your site later on you probably need a zeb index uh yeah and then i hope this is gonna work let's try it i think i need to put position up to later on well let's give it a go 15 oh no i don't i live here i wonder why not okay well that's fine it's probably it's a reading decision and then it's always boring when you don't really know why something works but let's go with it height 100 all right oh yeah okay cool nice it's looking like a nap actually yeah and well i guess for now display none and then over to you oh you already have this yeah yeah you already have this bad boy right okay i think now is a good time to get the gis in provision what do you reckon yeah sure let's go i've got greetings from miranda i've got greetings from turkey i've got greetings from south africa wow and oh hello lianna michael and uh hello from northern california oh love yeah okay aloha specific north southern north central so is there such a thing in central california oh yeah yeah probably don't see why not yeah well i would love some sun but then we had it this afternoon pretty unusual anyway uh yeah so with this i guess what the whole thing is that we click on this arrow and then this pops up correct and i guess because you're going to move this arrow towards to the right we actually don't want to hide it or anything because it will just get overlaid with uh yeah with enough uh so if i just practice so really oops so really what we want is just do that right yeah that's it so we just wanted to toggle this display none let's say yeah so uh literally the only thing we need to do is on click of that arrow toggle this style and then when we click on and click on this arrow we toggle it back cool okay so i mean really it would be nice if we could have a way if you click off the nav file that also toggles it back but let's not get ahead of ourselves then let's start with the arrows we've only got 49 minutes yeah interesting so yeah well yeah let's start with the arrows and then we'll just decrease on that uh so where is this arrow here and that's that's probably this one isn't it uh materials icons outlined uh novelist item close menu no that's the one in the navbar yeah so you need the one down here the open menu one and i need the one that says open menu so i guess i can't remember off top of my head but anyway so let's go for all quants with it const um open arrows yeah because open error i'd have done it with camel yeah yes uh i don't know why i did that that's quite useful for me but anyway uh open arrow was it document.getelementbyid oh nice although not by id because i mean we can't stick an idea on it right now has it not got one uh no i think that was a class name okay uh so yeah it has a class name but i mean we can stick an idea on it i would go with that for some reason i don't know why i don't really trust getting the elements by class name uh well they do say that uh for testing uh you should really stick an id so then you can actually test this in an automated way and also you can kind of collapses classes are for css and stuff and i prefer to go for you know you either grab an element or you grab an element by id so then you kind of separate your js from css so if you want to refactor your css and then some class names don't make any sense anymore you won't break your js when you refactor it yeah kevin powell says you should use classes for all your styling so that ties into that yeah uh so and i actually forgot what was that again um menu but i guess we can just call it open arrow yeah maybe open that of course it doesn't really matter yes one of those conversations about naming things that can just we call it bike shedding uh yeah i guess but i i i call them fiction if people disagree with me okay so we've grabbed our open arrow yeah so now i just want to yeah so oh there you go cool so yeah actually cool okay it works there and then basically what i want to do is i want to write a fun well actually i won't write functions just yet uh what will do is open arrow what is it like and event listener okay cool yeah nice okay let's click and then a function yeah and i'll just write i'll just call it toggle that's what color does sensible and then function toggle and and i just want to verify that it actually works together yep right so if i click on that that says toggle awesome so why am i so surprised i don't know i don't know oh no there you go so now it has actually been toggled yeah on here can i check it on here yes i can i'm checking if we are in um yes we are in 1080 we're in 1080 in the 21st century hd is it hd i thought it was hd it's the only higher up option available oh someone says zoom um like this probably oops let us know maybe they meant um in any case yeah let us know if you're happy with zoom but if you're not happy i mean we can probably zoom in a little bit more maybe we should see maybe we should get one of those big curved screens yeah that'd be good so function toggle so we got to oh i can't remember what the syntax is you have to um i think you basically want to grab uh well i guess you do want to grab a style and then toggle or toggle the nav uh talk about display none so i can't remember that toggle display javascript uh let's play none all right there we go call class displaying non-javascript and it basically says that's jquery uh uh it doesn't matter yeah so you basically have uh yeah okay so there we go so index.html uh where is that nav it's here oh okay and let's go on id now as well so so what i can do is basically i'll just close enough same thing document get them invited have and then all i need to do is just basically nav dot uh no i think it's like style yeah what does it say over there it said your style display i feel like you can probably oh okay so i think you can no there's definitely a better way of doing that that's a joke [Music] yes six toggle how'd you hide her okay yeah that's what we want but we want it to say display none no we wanted to say flex because it's none by default we want flex or block oh i see all right okay um yeah i think you can actually toggle it uh so like i see most doesn't work no no it went out of the battery i hope not disastrous wouldn't it yes i think you can actually just do this lm class list toggle oh really i know you could do that in jquery yeah so who wants that uh but then you toggle a class name so if i just say class name toggle and the class name basically what that we want to do is instead of having this display i think there is one in there that we can use actually maybe there's not there's not i think we should make one so what you do is let's have a class called active cool i'm gonna do it with display block for now i might change that a bit later and then um this yeah you can actually now go for what that yeah and then i just i think so maybe because i'm not toggle it's not a function have a look at that have i actually written it properly class list not class name oh yeah so nav class list i thought that looked wrong i wasn't going to say anything okay so now when you click on here so now when you click on the click on here it doesn't work but when you click on this it also doesn't work it did work well no when you click when you click on the closed arrow you have to click only on this arrow so the only thing that we also still need to do is where's the close arrow no oh and as it says nav is an id yeah it does also have a class called nav though which was already in there yeah so and there isn't already uh so what you have what we have here is arrow open nav div id and then we basically have two icons okay so we can just feel like alan says this is what i had in mind style dot display equals block yeah i can't well you can do that um but the issue with that is that you have to write two functions instead of one so you have to write one function that says style display block and then you have to write another function that goes style display none when you want to turn it off and you have to invoke different ones so once that you write just this classlist toggle active and you have only one function to wire up both so basically um around with conditionals and all the rest of it oh yes ding ding ding ding i need a bell noise is it okay it's just gonna have to be this we've got 40 viewers right okay i was like what happened what's going on on the new york stock exchange when they ring that bell when something happens i don't know what it's like that oh cool sorry and then close those arrows and says is classless cobble used on ids no um i don't think so but we also have a um what am i saying we also have a class class nav id now which is also called nav so that's why it's working i think and michael says talking classes is more performant than changing inline styles is it not um maybe i um i heard something today that um every dom change has a cost so i don't know uh i don't really i don't really like getting involved in like performance questions because like okay we wait let's count yeah you have you have to have really big app where this kind of would make any difference it's not a llama trekking page card yeah i don't think so um it's mostly like is it is it more comfortable for me personally to work with it i mean that's what matters yeah um not the user experience or anything well no user experience would be exactly the same right developer experience yeah that's right um it's an interesting point yeah and you obviously you know before you say that something is more performant than something else you kind of need to measure it so basically you need to write a test that you know quantifies time how much it takes how much the update takes and then you say oh okay you know what i've run these benchmarks and they actually work out as being quicker than the others but i've never seen anything like that so separation of concerns yeah that's right now you're grabbing the old clothes arrow oh yeah we actually wanted to probably should call it closed nav so that's why i'm probably going to go back to this and call her close now just to be consistent it's the other one that's called open enough close knife uh basically the only thing i want to do is yeah do the same thing add another event listener for a toggle function and um and that's it so that should kind of do it there we go and that closes it so i guess we can add an event listener to uh so there was you basically said like what if we want to click off uh and it looks like this is quite a large i hate to break it to you but we don't actually want it to close if we hit the back arrow do we that's a bit weird why not when you hit this arrow actually it's not going to matter because that arrow is going to be behind the nav well this arrow yeah not that one the that one yeah this one yeah this arrow would be behind it so i guess the only thing that's left is when we click this and click off tay says better to use aria attribute for targets um what's that i'm not sure what that means i mean like an aria label i know i just know um add an event listener to the document yes and check the event target is not the nav oh that's right that's a good idea yeah good plan let's do that then so it's called um container i think that's what we want yes let's do that we could get into a discussion about do we want if we click outside the container but i think for the sake of my sanity we're just sticking this yeah well you don't want to stick you don't want to stick a toggle on the document yeah no advanced well have a look container yeah equals the element by id does it have an id yes it does great news container yeah and then i guess actually no here basically copying that you reckon uh we'll go for it go for it first you know it's wrong you're gonna watch me fail anyway i know i think i think it's a learning experience close i think we should make another function oh nice close nice because yeah if you toggle you basically click on it and it opens in half and you click on the document again and it closes it out so actually i think these should be grouped like this doesn't really matter yeah it's fine then copy this function close yeah right now i've got so now we do need another class don't we yes so class list instead of toggle you have a function now i think it's called remove yeah remove yeah active let's give that a go oh that's not good come here what's going on oh i think every time oh uh every time you click okay every time you click on your yeah we haven't done what we just said what we're gonna do which is to check if it's not the um open arrow okay so um got any ideas if that's a good start well you so i wonder how you would grab that so basically your clothes will need to have uh you'll pass it in event what uh so what you're doing here is when you click an event uh your close function receives an event an event so i think what you need to do is you need to pass it an event here and let's just uh console log and see what's up like that yeah so you have a mouse event so what we want now is to see what the target of that is and you click here it's a paragraph and you click here it's in each one when you click here it's spam materials icons and okay so if we copy that and when we do if event.target is not equal to what that id is right then it closes right otherwise it toggles as the nasal says it's being caused by line 13 indeed yeah i can't have in a way yeah so if think it's been well it's caused that by the fact that we're not checking the correct target in our close event well yeah uh so and then basically what we want to do is event.target michael shield says event.targetclasslist contained yes okay i wanted to say equals probably uh well i say class because again why i don't like relying on class names in javascript is when you're refactoring your css you change your class names your javascript breaks uh so it's very few michael i think you're over optimizing maybe let's just get the job done why are you panicking you still have another half an hour to go there's a lot of css in there michael well maybe not that much okay well look not event target classless contains i think we should go with that yes i can think so too from his windowsill vantage point alex is crying with laughter um that might be working it's just off screen all right no i don't know no i don't think so because it's still uh if yeah well i hadn't made it my original one it was a lot simpler than this michael i don't think we should have stuck with my idea well no we've already implemented your idea we haven't we have i was gonna do in where you've done toggle i was gonna do an if statement and if the nav has display block then you put display none yeah else vice versa does that work with when you click off on the document no not yet well yeah so we have implemented that i think we could do a similar thing uh i don't think i don't understand okay well let's crack on yeah i know you you watch me you watch me kind of like re-learn the ui work as well um [Music] how was that oh yeah well let's say like remove tried to debug this that's that i should have worked uh to do oh no so we're still logging this but that obviously didn't work huh uh container evently adding the clothes we do get but then uh classless contains i wonder if that actually okay so let me actually see what's the value of this bulletin is it actually true i wonder if that's because it okay that's true and okay and that does remove oh no no that's not what i want to do ah i want to do the opposite of that right oh yeah yeah do the opposite of that right cool missing bang there we go the problem we will work okay i don't know clean up console logs don't leave console logging okay all right okay and uh that kind of and when i click on this it doesn't open okay there you go over to you for css thank you chad for your help i couldn't have done it without you yeah not even yeah fully our logic always catch me yeah what's that um exclamation mark yeah anyway um what am i doing so uh we need to go and style the nerve so first up so i can actually see what's going on going to do that um just opening up my screenshot i'm going to put this on my other screen um so i can kind of make you see what i'm doing yeah uh what to do next i reckon we need to move the area you think i'm going to close the console for now which arrow both arrows um you really i don't know i think you only need to move the left arrow okay yeah let's do that um it has a class called open menu so i'm gonna target that i'm going to do this is one of my favorite things to do i hope it's going to work live margin left um auto yes kevin powell gets really excited about stuff like that so do i i didn't get used to it michael doesn't get it but that's fine um and then a bit of padding i guess padding one in well maybe not on the top not one m 0.5 m 0.5 there we go um i reckon that's good good for now and actually i reckon the container could do with some padding i um have put that on first because now that's affected my arrow okay i think now the navbar we can go back to styling that because what's driving me kind of nuts is on there yeah those lips i think it is none oh nice yeah and then the links whoa yeah what does that mean more than more than what more than eight how handsome this is it's not more than it when you use it in a css the name context this is more than symbol any uh links which are inside um list items oh so it's like applying this to children yeah um oh i see um yeah alex is saying uh ms is linked to the font size right so normally 16 pixels unless the user changes the settings in chrome i don't know if that's amazon if that's rams i think it is i think both of them are linked no rems is a root element so that's linked to oh i see to the root size that you have to find basically yeah and m is linked to whatever the user's defining settings michael's cleared it up here the other michael m is relative to the font size of the parent element i think yes oh i see okay oh yeah it's annoying me now yeah yeah that actually brings some bell now because you know uh i have like despite what people think that i hated i have actually tried to learn it so i have remembered some feeling pop quiz this clears it up m is relative to the font size of its direct or nearest parent rem is only relative to the html root font size right so remember it was an exercise somewhere in scrimba where you like you have lots of different nested elements and you use m's to kind of illustrate how they depend on each other oh yeah i'm just adding text decoration none to my links because you don't want those underlines and i think the color should be um and now i actually yeah on the list of items i think they could do with a little bit of padding 0.5 m it seems like a lot doesn't it i'm not really sure where that gap is coming from so i'm going to get the old devtools out what cap this big gap here zero that hasn't helped if it's not on the eel but i think it's something to do with margin oh sorry maybe it's the padding yeah it is the padding why is it got that maybe it's a default probably it is okay get rid of it awesome [Music] okay cool there's another gap up there which is a bit annoying i think that might be the padding of the nav no margin ah okay then so we'll also have a margin of zero on the ul that's looking better isn't it yeah and now um midruck says em and rem are responsive units i've missed a bit of this discussion um but that sums it up yes exactly um and then we need a hover state for the list items and actually a focus state for the people who are tapping oops and that's going to be background color of um i don't know light salmon [Laughter] i love it this website starts looking more like toys r us department it's llama trekking it's not meant to be serious michael you know llamas they're not serious animals aren't they um and cursor pointer which isn't going to work because i have missed that now it will work woohoo yeah okay cool nice um next up i'm going to fix this gap up here so to do that get rid of this figure out what the problem is uh looks like my h1 has got quite a big margin by default as it always does get rid of that um what do you look for why is there still a big gap between oh oh okay yeah so the div that contains our arrow is stretching the full width of the page oh i see you're looking why the llama trekking is not in line with with uh with an arrow pointing left yeah oh i see right that's because the din is too big basically yeah open menu that was it yeah so now i think if we do i thought we already did this but maybe not width three percent what's that done there's not open menu what's open menu ah so open nav i know that's the id it is that right so we've got yeah yes open menu is the class for that div yeah yeah width isn't working um so here when you have this is what i do background color hot pink hmm no it's working so margin left is auto but do you need to have it at zero padding zero can you open that box model this yeah so you have imagine that okay yeah so this is where i think i need to do can i put my arrow in a span um it is in a span so now you just need to shove it right yeah maybe give it a min width didn't you do that with your nap down there i don't make a few things right yes no that's not the right thing to do left zero interesting i'm gonna stick with this for now we'll take off hot pink actually do you know what um i'm kind of worrying needlessly because that the original design actually was like that i would see it that was um a waste of five minutes well oh well clear it up and carry on um which i work on next isn't it done i don't think so why what's what's missing well and here there's a massive gap so i think we should fix that with a min height on the image i'm gonna go with get rid of this i don't know if this is the right thing to do but i'm gonna do it anyway um what do you reckon let's see what 50 does stretch his llamas [Laughter] 40 yeah i actually think that's going to be okay because when we um basically spread everything out with justify content space around no no no i don't want that i want space between the difference is whether or not we have space at the top and bottom as well as between the items well clearly that's huge so i think now if i take that off yeah no i'm not gonna do that i'm gonna do center i swear to god just had a small accident there with our light and our cat that happens from time to time yeah he loves that he's like you don't need that oh look i've got a what are you doing bus correct you need to get a container really oh have i not done that right position what was that again you need to give the container position of relative yeah so the arrow will be absolute yeah within the container and now you want to move it right yeah i think so okay smashing things is that right oh yeah but we don't want it quite from zero on it like maybe eight percent oh nice oh okay wow well let's see how you actually understood this hang on what give container position of relative position of relative on the container a container closes the arrow is that right container is over an arrow the arrow is inside the container yeah yeah if that's what you need yeah i see yeah okay thank you for helping me out nice one look i even learned something yeah that's amazing um i'm going to put in a margin below that h1 cool [Music] and then that's a bit much one m's i guess that should be zero honestly that's like if you've ever seen the gif of like a bloke on a bicycle on a mountain bicycle just going down these mountain trails they've got a kid behind them in like a little wheel and like the guy does these amazing mountain bike trips and the kid just sits there behind them you know just looking out and they do like all the spins and turns and stuff on the mountain trail i feel like that kid right now is that good i'm just like someone does something it looks awesome so do it like this doesn't it margin bottom i don't think that wants to be as big as that right i think not 0.5 and that's actually reduced it so clearly it needs to be bigger than that because the default was bigger than what i'm already setting on yeah so what do you reckon michael how have we done it did you fail i thought it was done like half an hour ago yeah i think that's pretty cool yeah that that's pretty good it sounds pretty nice to know that you can actually align these things yeah pretty good nice yeah so anything else we could do with the js uh what about we've got 15 people i know we've got two things we could do an animation oh interesting i've never done actually i've literally never ever worked an animation but i can do it in css well you can can you animate that arrow for example actually no can you oh no look yeah that's a good point oh and asa says we need to remember to toggle the opacity which is totally true because when we open the nav bar this should basically slightly gray out oh does it okay that's gone wrong yeah okay so how do you grow out in css once you do grade out in css i can add opacity 60 that is what we want so in that case just grab that style and stick it into the so we need to make another style then i just added interactive all right okay see this is where your solution falls down because now you've made the navbar inactive as well and that's not what we want well you can actually go for or you can toggle two classes if you want we're gonna have to aren't we that's going to be good inactive i reckon and that has that okay so so now we need to do it in the js so you need to toggle it on the container so suppose you do need to add it to the container yeah so it would be this yeah um container got classless toggle being active yeah wow i'm actually surprised it worked oh no we didn't why not because when you click on it when you click on the thing uh sorry when you click on the container with the nav bar closed further down no what are you looking for like that does appear to be working no but for some reason it has you see like it has grayed it out yeah and now it's done the opposite you see when i click on it hmm yeah so how did you do that by so when you click i feel like there is something in there uh so i'll explain uh oh look we've got yeah says active.body so you have an active body you have this uh open bar menu so you have this div that is kind of so when you click on this that kind of works but you still have this sensitive part of the css over here but uh this div has is picking up your clicks so when you click in this area ah that toggled it so you still you see or once you click on that edge it actually picks it up so we probably need to reduce this space why is that space even there good question get your computer out guess it's that padding we don't actually need that padding yeah so once you remove that padding what's it on id open nav yeah let's remove that padding you won't have that sensitive area on which you can click in this book to appear so i think it's because you're adding padding on the left on the right i'm not though with half an hour oh wait maybe i'm just looking at the wrong one it has a class of open menu so it was that one yeah so i think that padding 0.5 m it doesn't add it to both sides no that's adding it to the bottom well the bottom doesn't have anything okay if you're oh i was but i was imagining for some reason that that zero oh there's another zero yeah but um yeah no that's fine so i need to do we actually want it on the right and then right not on the bottom and not on the left right so you reckon that's gonna i think so sort it out looks like it uh well kind of yeah because you see if you if you refresh the page yeah you open it on this you close it here and it still remains so what we need to do is we we need to actually it only toggles it if you click back on this arrow so we need to put it in our clothes but it doesn't close it it doesn't toggle it back to normal once you click off see i think we've used the entirely wrong approach here michael maybe and i'll tell you why um come on this when i make the weekly web dev challenges i always i'm not always actually um but i usually make a solution so this is what i've come up with ignore the fact that the llamas are stretched that's um another issue in the js oh hello pumpkin look michael i'm not being funny yeah but this is my channel yeah but the thing is that your that javascript doesn't work with clicking on on the main container no but i think you could make it so that it would and it wouldn't be hugely complicated don't you you will run still into the same issues with that's basically what we've done i don't think we would michael's facial expressions watching this are quite entertaining yes yeah i don't know why everyone tells me that you need to toggle the class also when you click yeah yeah exactly i think so all you need to do is just go to that js and toggle it okay then why didn't we just do that i don't know i don't know so that's what yeah in close events yeah you need to toggle that class um so like this basically there yes uh i think so that's right so what was happening i don't know why oh no oh okay so you actually don't want to toggle it you want to remove it yeah yeah that appears to have fixed it how ace is that there you go oh i think your approach wouldn't work i wouldn't say it wouldn't work i think it's overly complicated i have got some news which i find exciting that's not what i wanted to do just what's the exciting news i opened my own stream so we're a stream within a stream you know last week we were talking about background blend mode that can merge yes i think background images oh yeah that's right with other background images or it can merge images with um gradients and right so on and so forth um i have made i was going to share the link with you but it's going live in three minutes a video obviously about background blend mode over on my youtube channel so you can go and check it out should you like not to shamelessly plug or anything um yeah thank you for coming and helping us with our um my screen is stuck i think it's actually not it's just um that thingy was still open yeah yeah i think we we're not really sharing anything yeah thanks for coming and helping us all out with js that was exciting oh ah sorry if i mispronounce your name mudrang gupta are you are you that kid from twitter if you are please share a twitter account i think that people should follow you because you're a really cool dude so please please link yours he's really gonna wonder what's going on oh you've subscribed thank you oh nice cool i'm i'm your twitter follower so you know share it and i think you've got some interesting stuff to say so you like it's like i think it's like gen zed twitter that i think is pretty cool to follow it's really it's really nice to see kids uh building in public and stuff oh there you go see he says yeah oh really oh yeah awesome yeah oh there you go so please do subscribe to the guy who's really cool awesome yeah feel free to share your twitter in this chat mood michael says what's your channel um link's here no it's not here cause it's slightly further up in the chat you can't copy and paste it how do you pin it do it anyway um yeah it's all about css mainly i might branch out into other things um but just amusing things and rough i doubt it amusing things about um yeah that i find with css um ppslp says thank you l m very helpful per usual well really it was you that helped us the chat helped us to get this job done what community team work exactly amazing and pumpkin he helps everyone oh thank you for subscribing you know yes pumpkin is very helpful oh there you go he's off we were we have a tradition in the scrimba team on friday afternoons i keep me to get you to join this we play this game called scribbler scribbler dot io does it sound like i would like it oh that's not it i think everyone likes it okay oh this is it yeah you're off the clock i get it no i'm saying no not right now i'm saying like normally uh untie at work when you play this yes maybe you could take a late lunch break but basically it's like pictionary you have to draw pictures and then the other team um not take the other players you have to guess what you've drawn yeah i'll hate it come in one yeah i was doing this and pumpkin was walking up and down on my screen while i was trying to draw romania which was quite difficult to do but yeah you have to choose from three words i probably draw like castles and bears i did draw a castle there you go i i drew the romanian flag which i had to google yes so if you feel like playing scribble give it a go um and then benjamin says you could animate the width of the sidebar to slide it in instead of animate the display property actually some people have done animations um in their solution we should have like the next web of challenges as a little you know yeah like like some kind of animation challenge that would be quite interesting do you think oh yeah i think so i've been i've been looking over like uh different animation libraries and stuff there are obviously like really amazing animation libraries uh like 3js have you ever seen that i've heard of it i don't think i've ever seen it like some stuff that i've seen on their website i'm like wow that looks amazing right when you look at some of the examples uh on the on the right side of the set like this one look at that someone created i feel like my computer is gonna blow up when this loads look at that someone has created like with css uh no it's it's like javascript javascript 3d rendering i actually want to you can actually turn it around that is so cool you can actually turn around yeah i know how awesome is that very nice it's like a little i don't know building block um so yeah superhero super cool so yeah maybe we should kind of obviously not that and then benjamin said uh we could also give the arrow a cursor pointer yeah that's true definitely well there you go that's the last thing today and then the clothes one should have it as well oh yeah there are a lot of things we could do yeah to tweak it but um yeah those are the main things oh check out design course aka gary simon i think for 3js yes sounds good and tom chan says i love this game yeah and if you want to join the weekly web dev challenge and you haven't already the link is here so you get all the new challenges every week and we'll be back well i'll be back next wednesday yeah um a portfolio review with molly mae gallagher is it next week that we're off on holiday or are we that's the first i've heard of it no on friday no that's amazing ah that's all the way in may isn't it that's next week may it's next week may is next week but not that one oh okay yeah portfolio review with molly may caliga and then uh michael and i and pumpkin we'll be back uh next friday thanks freddie yes how do we submit the weekly challenge um instructions are in the challenge so if you go to it's thank you if you go to this challenge the one that says latest challenge and watch it it will tell you what to do but basically you solve it and post the solution on twitter with weekly web dev challenge disco oh discord yeah we have a special channel for it okay gonna wrap this up oh actually can before we do uh share a link to our discord we just said go to discord but so you can share it there yes okay have a lovely weekend grab pumpkin oh yeah please come back next week with lovely having you you help us a lot i will see you soon [Music] you