Live-code an emoji game with us | HTML, CSS & JavaScript

Key Takeaways

[Applause] [Music] we don't know how long he's gonna stay here i also don't know if you can hear me because we're trying again with the music so you know the score if you can't hear me [Music] let me know so today michael we are solving the weekly web dev challenge that's right yeah david says he can hear that's good if you can hear the music that's even better um or maybe you don't want to hear the music i'm fiddling with this because yeah the usual okay it's growing up anyway yes let's uh get into it so first of all i think i find [Music] yes you should talk you know you normally talk so much and now you're silent and everyone wants to hear you so anyway yes to do that we're going to go to our dashboard and hit that widget and here we are we now have 13 50 students where is pumpkin scrimba tattoo um questions where is our scrum battery yeah that'll be coming next actually i have ordered some scrimba wall art which will be behind me as soon as it arrives oh yeah that's news to you as well yeah yeah it's very exciting it's got scrim emojis i've just realized i'm going to get a copyright strike because it's started playing what was in my queue which is physical by olivia newton-john so yes i mean why would you not want that to play let's get through my entire queue then right hopefully now that will be royalty free okay so nice on to the real deal the challenge so what we have to do michael is yeah should we start with the basic one uh yeah yeah developer so yeah let's start with an easy one we've gotta wire up these this button so it shows these emojis okay sounds simple enough yeah sounds pretty straightforward yeah and we've kicked off with um in the basic challenge the button's already there and there's a div with a classic emojis and i do have emojis and then the emojis are in containers of their own called emoji container all right okay yeah cool well thanks for watching yeah so what's what does the js was like the js looks like this ah we've got just an empty function shelf shall we pour our tea we've got teal already [Music] i realized i uh vastly underestimated the size of my desk when i incorporated the tea and the cat and all the rest of it into it but there we are fair enough we'll make it work hopefully hopefully yeah so where would you kick off with this in the html or in the js uh i would have a look at html once again because uh yep so we do have a button on line nine so i'll just draw the mouse so yeah we've got the button oops and it looks like we already have it wired up here so pretty much the only thing i would do is just just literally check if it works or not check if the button works you mean yeah if all the wiring up goes so i don't have to spend pages debugging and then it's like uh some something silly console log i work yeah pretty much um okay uh and in that case i'll just go for oh yeah just select it so uh what was that emojis yes so i'll just select all the emojis uh was that document get i think it was had an id on it didn't it sure does yeah i had an id on the container so i'll just grab a container whoa this just happened he does want to go somewhere i'm not sure he can go somewhere though because there's a lot of equipment lying around and last time with granny we body slammed my light didn't you so please don't do that again guarantee if you will but there we go he sits up on the windowsill if you're wondering yeah because he has a very good spot to look at birds yeah yeah uh anyway so get element uh by d so that's the basically the well my idea is to basically switch off the whole container right so we just want to toggle all the emojis yeah so that was the basic challenge at least right sorry so there you go emojis container i'll just grab those and then i'll just go for emojis container that's style yeah okay style and then you help me out with css how do you what style do i need display display cool flex and display will be flexed because i want them all in a nice line yeah fair enough so i'll just okay cool so i just show them and then there they are i'm shocked at their own success [Music] and then if i just do none oops need to say that okay so now it's just refreshing okay so once i have that part try it again okay yeah okay okay so does it work to turn it off no so that's the next one that i will do and basically i'll try to extract this to [Music] yeah so i'll just go for like display [Music] and then if ah the old if statement out yeah if display is [Music] none and i want it to be [Music] yeah oops but i can't remember javascript all that well because i'm now kind of wondering will it that is basically the link between because i'm updating this display and will it carry over to this display basically will i mutate this property value as well if i'm mutating the other one uh that's something i can't remember now so but i guess we'll find out right i guess we will yeah yeah and if not then i'll just revert it out from variable um else i just want to make that display do to be none right ollie says nice cat i'm heavy he is very heavy yeah he's pretty big over five kilos actually so he's on a diet but we think our neighbor's feeding him because he's not losing any weight right so that i don't think that would work so basically in that case i'll just i'll avoid being clever yeah you should [Music] lagging going on it's because you're insisting on using your fancy keyboard you know people start with the right keyboard everyone needs to have their own tools you know [Music] yeah so now i've saved that okay there we go oh your mouse is okay so show hide yeah okay well i'm not that bad at this good to know okay so we're in business so the um stretch goals were to um show and hide these individually do you think we can do that uh yeah yeah sure should be should be doable uh that's what he normally says when he doesn't think something is doable so no it should be something by the way if you've got any questions for us about this or in general you can ask us anything in the chat yeah yeah type those while we're at it yeah so i'm kind of wondering uh why i didn't why that thing didn't work uh but oh well [Music] uh right so in individual modes so for that i'll need to have a look at html once again and okay so we wire up the button toggle visibility function clicked on here emojis here and then basically every emoji has uh is in a paragraph with a class of emoji i was inventive with the class names yeah fair enough um yeah okay cool i'm not sure we actually need that div with a classic emoji container uh no i don't think so either uh i think that was a bit um much kind of probably optimizing for the future probably yeah you were thinking about multiple paragraphs and anchor tags and so on yeah i do have a habit of adding too many tips do you think it's better to have too many or do a few uh i think both of them are pretty bad i think i think shall we remove it uh i think you should have just enough like everything really yeah [Music] there we go i'm sure there's an easy way of doing it but never mind there we go so that shortened the code and it still works even better yes it still works uh and the next thing i'll probably do is an extra oh yeah there you go save that cool i think the next thing we can do is probably well just because i like uh separating i'm actually not from javascript um unless you obviously write like reactants on in that case you kind of indisperse these things together but for example what i want to do with this button is that you have this on click and it references a function and normally what happens is for example if i decide to change the name of this functional function to just uh for example toggle right so if i change it and then this now breaks yeah uh so what i want to do is i basically want to move all of that into my javascript so what i'm going to do is i'm going to remove this on click and i'm gonna go here and basically do the same thing i'm just gonna grab a button so const button equals and i can't remember if it's uh it's class show hide okay so i'll just crab uh button document get element black class name and that was show hide my memory is awful yeah okay yeah sure right and then basically what i'm gonna do is oh actually um well the thing is with getting class elements is that now i've got elements so this is an array of one well it's an html um collection all right it says here html collection of elements so basically i would need to like access this array so what i normally do and this is also a tip for testing uh add ids to these things uh so you then in your just would be able to go and grab element id and do some testing crowd says uh what magic trick could you use to delete the lines because now that was command x yeah and i've got a question here on you says in general is it better to give that function toggle visibility as a parameter like talk of visibility emojis again in general oh yeah just uh yeah joey is about to give that function together visibility a parameter like total visibility emojis uh maybe we will we'll get there i have a couple of ideas that might have yeah we'll basically be going down a very similar direction here use id or pick the first element says cars ah yes exactly well pick the first element would be tricky um well i'm not really a fan of getting a collection and then accessing the first element because if i have multiple buttons then i would be going like the first element or the second element but you never know how they actually get added into that array because arrays are not ordered so it would be i prefer to go like sure fire away you know id button and for example if there were more than one button i would probably give it an idea of pass on show hide kind of like this class name and so on and the reason i'm separating my classes from my id's is as i said it's a good practice to have for future when you have testing involved uh and then you have your style separate your tests separate and then you can change your styles and you can change your tests without breaking one and the other at the same time and it says listen on the button then exactly yes so yeah i'm going to this and then insert i'll just go by d i'll grab a verbal button because i was there d and then yeah i'll just there you go it already uh gives me all the suggestions to add an event listener um i think it was click whoops yeah yeah so in html of some reason it's one click but in javascript just click uh and then for that one click i'll just say [Music] which is the name of the function yeah which is the name of the function here and let's just take that there we go hey works good um probably just slightly expand that to get a little bit bigger on the screen yeah so there we go uh then so because we already know how to add an element to one so what we can do now is we basically want to do is go through each of these and individually to every single paragraph and another event listener another idea then uh no what we're going to do is we're going to just grab all of them together uh because they're all the same okay yeah um what we're gonna do is literally for every single paragraph with class emoji we're gonna add an event listener that once you click on that paragraph you can toggle it so let's go for that before we start that i've got a question from michael here cool i have five sound files i was trying to cycle through by creating a variable let current sound equals that yeah now that current sound is a string variable it's not working i think i'm missing a step uh possibly i will probably do oh i see we mean um you have basically a selector well uh like you're in string interpolating and then sound and whatever the name of the variable is uh oh interesting so i would probably go for i would just attach all of those sounds to a different one with event listeners so i mean it's really tricky to explain that actually even seen the whole code so i'm like trying to think of this um incorrectly post it over on our discord channel now we can find our channel in the module 4 channel and tag michael and he'll have a look let's do that oh and i'll be using a switch statement yeah that's a good might be better anyway yeah i like switch statements anyway yeah but if you do need further help michael you know where we are on discord share a link to your script correct so um basically we have uh where we're going and all right so grab all the rubble the emojis so cons emerges the documents get element by last name can we already do that uh well we did that by id uh and the id is this so we are basically grabbing the container uh to toggle them all but what we're gonna do with individual emojis is that yeah so here is this by d who's the container but yeah it's late in the day we've had an exciting day so console.log images and that should give us an html uh html collection so that's what we need so all of them should be there and basically we're going to do is i'm going to go for just right follow for [Music] emoji in sorry not in off because in gives you a key and off gives you a value so uh constant emoji of emojis so i want basically the value of an array of emojis and i want each value [Music] and then what i want to do is just grab [Music] yeah why not i'll just cut the log emoji [Music] oh yeah i get the paragraph nice uh and then i think if i actually go to an actual dom when you're writing vs code and so on uh you would actually see there we go so you would have the whole paragraph with all of these clips can people actually see that yeah oh there you go uh hopefully you can there you go so you would see the whole thing even with emoji inside the whole paragraph that is nice actually uh so the next step would be to basically once i have an emoji i want to add an event listener that noise without cat yawning yes really he's a loud yawning cat and he's now hoping to get brown which is going to be interesting yeah yeah oops pause everything cats come through come on i don't think he wants to go he does i love this from the valley street if he's looking he wants to jump and if you don't move him he will go won't you he's unstoppable anyway continue yeah so we have uh anime listener and then basically what i'm gonna do is i would add a toggle function but i already have a toggle function right there so i'm just gonna do some renaming because this toggle worked at the time but actually we have individual toggles and we have a toggle hole so i'm just gonna grab that is it worth calling the other one probably individual clarity uh not really because i feel like if you have toggle all and then toggle it kind of contextually you realize that you know it's that uh but then now i'll get an error saying that pogba is not defined which because we haven't done it yet yeah so [Music] uh caffeinated pixels says this is an interesting one it's not actually about this if she says oh she's not sure it says um some of the front-end screencasts mention study groups how do you join one of these yes they're a bit below the surface at the moment but what you can do is send me a message on discord and i will add you to one uh yeah that's it and then alice says oops you've taken the focus off i'm sorry and it says i love him i think she means the cat oh well and so does elizabeth oh yeah it can't sell we're not actually selling anything oh there we go here we are adding display flex once again yeah some of you might really have a question like where do i actually grab this emoji uh and that's a very good point uh what i'm gonna do is i'm gonna basically pass uh the emoji into the talk function and then i'm gonna say yeah display flex but to be fair what i can do is i'm basically rewriting this code again right yeah not dry yeah pretty much so um i feel like what actually would be better if i just say uh toggle emoji or because it's a little bit more universal i'm just gonna say toggle element and then the element would be going here i'm just gonna literally [Music] because i was already rewriting and i have it here but it's somewhat similar so what i'm going to do is i'm just going to say element element element right so it's basically the same logic and now we've got somewhat do we have this duplicated so i'll come back to that in a second let's just make sure yeah let's do one thing at a time so now toggle uh so this should well we still have this button this should work but when i click on this it says oh i can't do that i cannot read property of undefined and that is mainly because what we do is we say plus this toggle function uh but what i want to do is i want to invoke it with my argument and what i'm going to do is i'm going to basically pass an image that would be anyway so there we go so the box is this beard the cat has disappeared if i flip this it displays me the container again oh no now how do we make them reappear well uh basically what the issue here and we will get to it also so we've gone out two issues uh one of them is we have duplication code and the second one is that when we individually click on these there's no way to get them back uh there is no way to get them back so although that dog did just come back no i didn't click off yeah what i'm going to do now is i'm just going to try to remove this application and because we've got this toggle all uh i already have uh we have emerging container but emoji container is just literally one element and we already have a function for that right as a general question if you've got hard tasks and easy tasks what do you think is best to tackle first um depends um normally i go for like it depends how annoying these easy tasks are um so yeah i'll probably tackle the easiest one like for example if it's to do with improving code readability i'll probably improve that first and then move on to the next one i tend to do okay i find it easier to work in the morning so i do the harder stuff in the morning and then the easiest stuff you can do in the afternoon after lunch unless it's something that's going to make a lot of difference to what you're doing yeah yeah working styles [Music] so um so there we go i can probably make this a little bit simpler but i don't want to do that okay so now we have individual and all of them but they're not uh they're basically kind of detached from one another and they're not mirrored so kind of when you expect show hide you expect that things that hidden are shown and the things that are shown are hidden and this is kind of the general problem with the approach when you're going for uh hide this whole container instead of hiding in all things at the same time so this is kind of you know at this point it's you're trying to evaluate the drawbacks because what you can do is you can loop over every single uh emoji add it to an event listener and then when you click toggle all you invoke those event listeners there we go okay i have to come back uh but for example if you've got an awful lot i think he's typed something he's trying to communicate yeah so if you if you've got a lot of elements um then it might increase a load on the page because if you have an awful lot of event listeners on an awful lot of things so if we had all of the emojis in the world on there that would crash uh probably not you have to have a lot of eventlessness to stop it right to start making it go slow you're tapping oh sorry no it's not me it's the cat so there you go yeah i personally think that for this application it would be probably easier just to loop through literally all of the emojis once again so like the way i add event listener to toggle an emoji what i can do now is instead of i already have this event listener for a toggle for one paragraph so what i want to do is basically i want to go toggle all i don't want to pass the container i just want to say you know what just grab all the emojis and talk them up uh i'll just do that probably in the loop there's a comment and it's not showing on i know it's what about event listen on the parent dev and just grab the closest um give a listener on the parent div crap the closest not sure i'll follow uh but let's have a look the don't listen on this yep so i think we will have still well that's kind of what we have right now as well with uh so we have an event listener on a container which is basically this container uh well that's kind of what we have right now if i understand alice's question correctly so if not watch this space yeah drop it in chat let me know don't follow but i think that's what we have right now um so in that case once we have all of the emojis so toggle all i'll just switch for what's the entire functionality we're going uh david is asking over there i think show one at a time uh yeah toggle basically hide individually correct so for example if i switch the cat off and then i click this button i want to see the cat because i see all of them really don't we do we i think we do i was thinking about show the hidden and hide shown right so unexpected token that's what you're typing here yeah anyway let's continue yeah though basically if you toggle one emoji off and then you click the button then i want the hidden emoji to be shown and all the showing emojis to disappear i don't want to throw a spanner in the works here but originally what i had in mind for the individual part was red be like a show hide cat button a show hide golf buttons and so on so they've each got their own buttons oh well i mean i'm just undo well yeah i was all open to interpretation yeah i understood your birthday exactly that's how i understood the challenges that i'm coding it's like that diagram of them what the product manager asked for what the team understood yeah exactly like what i don't want to do you know is like to have a product meeting about this and uh you know trying to verify what we need to do uh because i'm not at work okay i don't i don't know i'm not getting back to you i guess um so uh four goes to where she's emojis and then what i'm gonna do is i'm just gonna um toggle an individual emoji alex says alice is clarified so you're adding a listener uh to toggle each emoji of emojis you might be able to bubble the click for the whole div and just check which emoji what it refers to to cut down on the event listeners ooh yeah i guess that would work yeah but i don't remember how to do it okay continue with your own plan i'll go i'll go it's like a good idea alice yeah actually that does yeah that sounds like a pretty good idea but i don't remember how to do it so sorry yeah uh which is why you know i stayed from beginner and now i'm intermediate um hello hello alex hey anyway you know it's like uh it's like watching a c-sharp dev write javascript that's painful so i'm really sorry it's not like that it is that yes okay then let's continue pouring tea very carefully because i'm prone to accidents with liquids i had one today actually in the car yeah yeah at least one we've almost made our radio not work it really works anyway yeah actually it wasn't working the other day it wasn't playing spotify and i was figuring it out for a very long time you know fiddling with all the wires and all the rest of it kind of actually realized that the volume on my spotify was completely down and that's why it hadn't worked all along yep oh wow whoops so oh no why is it not working console logs to the rescue let's have a look emoji okay so that works but when i toggle so what does that tell you exactly then well so far so far so good we we're we're in the right spot yeah uh so something isn't quite working when i'm trying to get into this so oh i think i know what it is but not sure [Music] that is this console just to save it sorry that's my keyboard so uh i have got this far but for some reason i'll try to go through all of them [Music] so i have element style display called none flex it's because you renamed emoji too elephant uh yeah well i'm passing it here is an emoji and here is picked up his armor for some reason like when i go to show hide so i got there i already have display flex display now so i've got these styles displayed but for some reason they're not there is it overwriting it somehow with display none um no i don't think so [Music] because it seems like it's in there when this happens sometimes if you save everything oh you want a real logo really like that screen how is it okay no this is the yeah it should be in the note i know but we need to find the note don't we let's see i think i've just deleted it oh no i know that is an epic fail well can you remember what it was oh yeah we could probably just probably just go for it once again anyway yeah don't do that you're going to speed right now while i look for someone comments john says scrimba is really cool thanks guys for doing this thank you i'm glad you're enjoying scrimmage that's really good to hear and alice says pumpkin solved a challenge yes if pumpkin put the challenge on it would involve uh removing keys from the keyboard with his claws i reckon so yeah maybe at the end of the challenge we've just sold a keyboard alex says has pumpkin made a guest appearance already he very much has yeah several times and he's doing his best to trash the place but not so far so that's exciting yeah so let us know if you're planning on joining us next wednesday michael will be back again uh he will be sharing his top developer tips cheat sheets productivity and all the rest of it yeah and because i work as a back-end developer i'll pretty much be showing things that would be useful for front-end developers know to know when you work with and just kind of like vs code tips and tricks what you do like how to make api calls how to make them quickly uh and so on so yeah definitely continue typing i'm buying your time here and you're just wasting it oh well and the other thing is this will be news to you actually alex um you'll also have a chance to speak to michael on monday because he's going to join what we call office hours which is where you can drop in and ask your code questions oh really yeah that's what we agreed oh yeah monday at 5pm so alex if you're still there if you could drop some kind of link i would do it but every time i touch the mouse it turns off the keyboard so uh yeah don't do that all right and you've typed nothing since the last thing i said no because i i can't i can't i can't talk and type so you're not meant to be talking about that's the whole point yeah okay oh thank you you know oh michael will be joining that's good to know never good live everything always goes wrong it's like live in germany especially with animals around yeah yeah it was just toggle you renamed the function to toggle oh yeah that's right uh well actually to be honest just to save time uh what we wanted to do is save time i'll delete everything well to save time because we have already implemented the individual i mean you can go back in the recording so the code is right there so you can go back and record and see how to add an event listener to each individual item uh and now what i'm gonna do is i'm just gonna recreate toggling all through toggling all individuals at the same time that's kind of the idea that i want to go and and basically what i would do is yeah here i uh all the visibility for emojis forza for every emoji i just want to go and um what is that style yeah yeah ah type style dot this play equals so as you saw earlier the very before thing i do is minimum change to see if it works or not and did that save that let's do it i don't think we've added the click event or the event list now uh well it's still is still here no yes ah no you're right you're right actually because total visibility is on the button yeah sorry all right so i want to go and add that individual event listener to all of them [Applause] [Music] uh google here oh no that's why because you put toggle but the function's called global visibility that's all right yeah i think that's why it wasn't working earlier [Music] because you're pressing the button [Music] visibility is not defined as because we need to update the html [Music] there we go [Music] come to logs again [Music] do i want to invoke it yeah um no of course i still want [Music] i still want the thing on the button because i'm clicking the button i wasn't going to say anything yeah but like come on michael i know the code has been deleted right don't panic don't panic you still need that thing on the button actually it might not have been deleted it's it's it's okay don't touch it no no no no i already i really freaked out don't touch anything [Music] actually just for clarity on what just happened if you're wondering on scrimba there are two places where your work might be stored scrims which is if you make something completely from scratch this is where it ends up and notes which is if you start adjusting the code in a lesson and then save it it ends up here and a lot of people don't know that i didn't know that at first actually and sometimes they come to me and say that they don't know where their work is and i say might be in the other place and it usually is that's a hot tip but in this case i actually have deleted it so that's a shame carry on pumpkins yawning again let's see if he comes down on his own boy for your extra place oh i know i know he's looking ominously over the screen i know so uh yeah that's now with individual emoji um yeah i'm not actually quite sure why this one doesn't but if i just go ah why not double croc this one click toggle uh and once i have already these emojis stored and then i'm just looking through them [Music] yeah that's kind of like the same thing that we had previously that it does it looks like it's added it so let's go for let's go for it michael i don't think there is a class name emoji [Music] yeah let's if uh emoji [Music] style [Music] display equals [Music] [Music] else [Music] there we [Music] yeah so it doesn't look like it displays me the flex but [Music] oops come on come over here [Music] it doesn't look like it has applied the style but i have to check it out yeah so we can see in details already uh over here they oh i'm pointed with my finger on the screen that's yeah there so we do have display flex and then when you click that button again it has plain none yeah i don't know many of them actually well yeah because we've been clicking it all over again i think actually number one because it's an individual emoji hey uh that seems to look like something has not [Music] so maybe then strange hard [Music] so we've got this dog okay so we'll have to put display flex on that uh well no what we can do is that's just the console [Music] and then [Music] find it here but actually let me just try uh we've got that class emoji right and then in the css now [Music] uh if i just create that emoji and just actually make it visible by default uh display [Music] is it actually this play block or the inline block this property and let's have a look what are they so we have none inline blog yeah it looks like yeah looks like block is and one of the properties okay style display oh no that's got to be an equals has it no it hasn't [Music] i mean maybe i don't know [Music] oh it's an id is um uh it's specific so it's always overriding it so that's what i said isn't it i said it's being overwritten and it is [Music] so that was the problem yeah there we go basically we needed to do the whole thing on the id and not on the class um well the reason is specificity problems yeah very good and that's why i hate css so does that anyway reverting back to where i was hey there we go so now you can sorry the mouse uh screams get a little bit thrown off by open dev tools so there we go [Music] i know that's that's how it works yes so i think someone uh someone said get the root emoji div and then disable none yeah exactly but um the thing that we had slightly earlier is that they basically become detached uh but anyway so now once we have uh these so now once we have already the code for toggling all of them uh or now we can also toggle individual emojis uh and then you wouldn't have that mismatch so you can probably write that if you want uh although yeah maybe why not maybe we'll have six minutes left a lot of knows we've got nothing else to do this evening in lockdown exactly uh so anyway we have even listeners on each individual emoji and we have this toggle function so you already seen me earlier writing it before it all disappeared so i'll just very quickly update this uh to toggle all the reasons also earlier before it all disappeared so we go to all and now what i'm going to do is i just want to write a function all individually for individual item and i want to pass an emoji into it see it's good that you're like the perfect uh kevin powell student you learn all about specificity right yeah you usually learn the hard way like this yeah well there you go i'll do that right so and now probably get rid of this console log and because we're really reusing the flasher i can grab that into individual and then i can just reuse this individual function right uh so obviously the drawback is that you're looping twice over every single element um but the benefit is the emoji style is i cannot read property display or undefined so that looks like uh event oh right yeah of course because what i want to do is i want to invoke this on every single one i want to bind it which is why i do it with an arrow function and i want to bind it to an individual emoji and i want now to pass that emoji into it [Music] i think the cat would make one's if you click the box fish still the dog oh yeah of course because i have uh this style earlier while i was debugging and i didn't remove it interesting uh although that's at least i think that's where it is [Music] says not you personally every time someone does a demo oh yes [Music] no it's still there this is annoying [Music] well that's what we had that's what we had at the very beginning uh so you can go to slightly earlier in the stream to see why we want to go down the toggling all of them individually rude i think okay so why do we have this particular dog uh displaying so again [Applause] uh console log emoji [Music] and then we can have [Music] it can't read the display on the other ones maybe well they're all the same so i don't know why oh because i have passed the last so for every emoji on emoji i add an event listener and it passes the last one to it uh so pumpkin's now licking the keyboard that's his input so what i have done is i have bounded incorrectly and basically what to do is constantly well i basically want to write an error function to do that because of how javascript binding works no still [Music] still have that dog over there [Music] oh well uh yeah fish [Music] news well in that case what i want to do is debug slightly higher up [Music] because we clearly this logic is correct and i want to see [Music] uh this is like a little trick how to pass a lot inside of your event listeners groups okay [Music] oh come on you want to get off no he wants to sit down oops there we go okay say hello to the people and distract them from the fact that we haven't solved it [Music] i think i have misplaced some of these or have i yeah so oh yeah of course because i forgot oh there we go progress secrets highlighting syllable uh right so and then what i want to do is i just want to go to log what's going on here i guess sorry that works and now let's have a look at yeah i guess that one um pass [Music] even though i have added listener to every uh emoji emoji let's go slightly around yeah i think i feel like i'm over binding um event listener for this particular one which is why on literally every single one of them this it gets attached with this one but i can't remember why [Music] um yeah can't remember can you we can probably google this here i can i mean i don't have a choice um thanks for sticking around with us what i should have done is i should have solved it in the comfort of my room and then copied and pasted it yeah oh hindsight's a wonderful thing eh uh tall event listener two more developments why not here we go cool that's what i need that is what you need i'd have a listener click function and query select msg okay so that that's just uh a solution to the thing uh but every so all the buttons each button gets click and then you just link it to that function uh but i think uh i just link it to a functional maybe give it a go closer can i access toggle before which is here okay does that still work cannot read property display of undefined honestly i feel like i want to go back to the stream and see what have i coded that it worked when i did it individually oh well i mean we could do that yeah we can't do that because we're still alive yes oh well i can't remember that we're here though do we uh no that's not individually [Music] oh yeah that was that was all of them anyway so uh and with that okay so once uh i want to actually pass yourself like this [Music] [Music] not sure oh oh well i'll definitely probably figure it out how need to think about it i can't remember now oh well no worries well i'll post it in the comments somewhere well that's actually quite a good plug whoops what has happened in i will uh send everyone here they're probably already on discord but if not i will send you an invite [Music] so you can all come and see michael's solution when he clicks it up that's right very shortly it will probably come to me in a second i hope so yeah you can join scroomba's discord channel um i won't screenshot oh maybe i will yeah why not nothing yeah it's been an hour and i have to do my chores yeah right this is our discord channel if you don't know and on my billions of notifications i don't normally have that many i'm not really an inbox zero type of person but anyway come and join um so we can chat about all things code it's wonderful there it's very nice that would be fantastic and yeah that's what i was trying to say earlier michael will be available although this possibly hasn't been the best advert for it for coding help on monday at 5 p.m that's right i don't know where it's going to be i wonder if it's in luna if you ever want to know what's going on in scrimba you can come to this link here lu dot ma slash this is where you can find all the links to sign up um but there isn't a office hours one yet because we've only disagreed uh that we're gonna do it but there will be one and michael will be there and it will appear in the dashboard right here so yeah come along and ask him your coding questions that'll be nice and then yeah i know there's another thing we will be back again us two on wednesday all right is this news to you is it oh yeah that one yep yes sharing all our tips and tricks another thing you can do michael is um when you solve the challenge you can put the link to the screen in the comments of this youtube video definitely yeah so be back to check it out in literally probably a minute can you grab pumpkin to say goodbye and if you like this let us know and we'll do more there you are thank you for coming to step me up see you later everyone okay thanks everyone bye yeah