Solve React Code Challenges With Us!
Key Takeaways
Solves React code challenges with a live stream of Scrimba's developers
Full Transcript
two hey everyone nearly press the goodbye jingle oh no that would have been a disaster yes um we are now live for those of you wondering if it started yeah it has now yes yes sorry for the delay slight technical issue with my second screen not for the first time it's really annoying anyway in case you haven't heard overall scrimber.com there's a brand new course link dropping into the chat it's called react challenges yes everyone always ask us about more react yeah that's true um new teacher on Scramble Daniel Rose and yeah it really is just react challenges um which is great for leveling up your react skills from react learner to reactive we say 40 challenges and 40 Solutions and yeah I've seen them 40 challenges look at it I know tons of them I've seen them all and yeah very exciting indeed um so what we're going to do today is try to solve some of these challenges I have not touched react for quite a while Michael how about you um well I do work with it I wouldn't say every day but okay well that's good however the often enough to know what to Google that's hopefully all we need yeah that's good enough and Daniel this teacher has hopefully given us some point some point on um which challenges you might like to see on this stream his particular faves and whatnot say um we're gonna kick right off but first a short pole oh yes I did start this slightly earlier but just to reiterate um if you're new to watching scramble live streams please put a bunny rabbit into the chat if you've been before hit me with that tiger alternatively um oh look loads of people have already done it you rather than before we even ask yeah you may choose to go for the regular attendee lion there's no strict criteria for this yes it's just a feeling from within but hello and welcome bunnies slash welcome back Tigers hello everyone yeah so um the first one we have and in recommended I suppose oh yeah I've just like uh yeah like the first one is the first one so I think like it would be yeah it would be nice to see how um you get ranked up on on it and yeah I don't know actually if they get progressively more difficult as the course goes on um we're doing the calls let me know yeah I think um they kind of start out with uh very interesting book because you do have uh I don't think the sound is connected so if I there's probably just like a feedback from our uh speakers but uh yeah Daniel very nicely introduces every challenge there is uh quite good explanation you know so you need to get used to it and then you know there's a very little diagram like sometimes what you need to do that kind of thing yeah and um Daniel also informed me that there is up here I think it's oh look at that yeah so we won't look at that just yet maybe later yeah they do have like some first first things for you to see chant here is one is what code reviews they do so let's hope we can do at least the first one yeah I think uh well I'll be very worried if I'm going to do the first one um but from from all I can see uh yeah you basically uh you need to create a button uh give it a class name uh when you click a button you change uh you change state so it's kind of I suppose like you can't start these charges you can't start learning react from these challenges no so you probably should have done like a Basics react course first and date okay then react is just the perfect thing for you and that's this uh 11 or maybe 12 hour free react chords with Bob zero yes that's one of the recommended prerequisites yeah so once you once you've done that and you're also looking for some extra practice uh or for example you're thinking oh yeah I haven't done react for a while maybe maybe I need to do that course again well you don't need to do the course again you might just jump into react charges and uh you know challenge yourself a little bit and then maybe you know most of the stuff could be a good um way to assess your skills yeah exactly so uh from that basically you you know some of the hooks so I'll just uh rotate so if I need to add a button and button yeah I'll just say play because it says button says play so I'll just I like starting small okay there is a button that says play cool um I do need to add a class to it and do you remember that interact it's class name not class okay cool and uh so the challenges are really preset um they do have like style CSS oh look at that video game button why whoa that is kind of like the buttons you like creating yeah well wow I'm not that good but yeah look at that very nice indeed and there is before I love it this one button has more CSS than I've ever written in my life often the case right cool yeah that's what's nice about this course I think you also get quite a good look at various CSS things and it's not just about react although the challenges are reacting yeah exactly you can you can do the you can do the challenge and then you go oh I wonder how this like bottom path is done oh look at that when it presses it actually feels like a mechanical button very satisfying yeah I know so there must be some kind of like um background to stop it's kind of like dark gray maybe not I don't know I can't tell um I I think it's to do with that before because that's got a shadow on it box Shadow oh I see right so there you go so you can have a look at you know how it's done oh very nice Okay cool so yeah index.js uh is we're set up and then an app GSX is uh where the code needs to be anyway so uh I have set up and normally I quite like to invent things a little bit differently um and then okay so we have set up a class name and then what was that for the second so user clicks the button yeah and then we basically need to toggle the state and change the word there Okay cool so so good so then should be on click and we can then say do this function and execute basically set um game running to the opposite of whatever it is game running and then with a play we can also change that to say game running if game running then I need to pause right yeah yeah if something is playing if it's running you've got to pause it I need to pause it yeah it's not open you could go back to play I go back to play okay so now it's paused now it starts oh look at that and that toggles okay there you go and I think that's kind of uh that's kind of the challenge done is I think so well I mean there is nothing else um yay if you complete these tasks correctly the button should have some nice visual effects and the workshop background should be automatically replaced by a light blue background oh yes that has I wonder what happened to the workshop [Laughter] yes there we are okay awesome right so uh that was nice stretch I'd say you know good limbering up yeah so you can uh and then I think oh yeah there is a solution as well um now let's have a look is is my solution different uh so I won't play that I'll just scrub to the bottom yeah game running oh okay so he did go to uh sorry I'll just scroll back so he did go from game running first yeah fair enough and then wired up on click yep same is not running yeah test that oh look at that that's going on ah he now extracted it to a separate handle click okay fair enough so what's the benefit of doing this uh it's just kind of separate uh because if you have to do multiple things if it's not just one function and you have to continue logic further on and there is more stuff to do on the click of a button on that button yeah if it's just in line it becomes a little bit tricky to read so people just uh wire up it to this um it's kind of it's not really you don't have to name it handle click but most people just call it handle click it's a bit of a yeah but it's just the thing people do very nice cool awesome save that what is next yes um oh the fire starter Fire Starter yeah is that prodigy and maybe that was the inspiration behind it yeah okay Prodigy with CSS okay cool um you've tried any of these challenges and if you say which ones and how it went oh look at this um fish thing it's convention to name handlers like that oh yes thank you that that was the word I was looking for I was like well there is a word for doing this thing or is it called convention it's just the thing people do okay yes exactly you can see how I struggle to find the actual words I was like what is that called there must be a word for it yes that's the one uh cool so react challenges fire starter have you have you done that oh I looked at it I can't profess to having solved it oh okay cool because I'm kind of walking in blind are you yeah actually well no it's like lagging proceedings here uh can people see also hear us maybe hmm one moment I think I know how to fix this maybe not well anyway while that loads loads I mean it will be funny if screen boys haven't uh issues arrived on the legs should happen um let's take a look at this from I'm not sure it's a question or more of a comment Daniel I wonder if that's Daniel the course maker set uh game running Pro value to the opposite oh I see interesting what does that mean uh so you pass it uh I mean I'm not entirely sure like that's what people used to do in class-based components but I'm not entirely sure whether it's actually necessary anymore to do it with hooks um it's kind of like you're passing um just to avoid race conditions when to if you click for example button too quickly or something or like double click it then it might just happen that those two things will coincide which you don't want which you don't want so you're basically saying that uh you know just make sure that everything's run from the previous value so you actually change it to from previous to next so if you double click it'll it switches it rather than tries to go one by one into another okay uh but with hooks I think that's kind of managed for you anyway so you probably don't need to do that at least I haven't seen people do that but if you can Daniel you can link me to some blog posts that I can learn a little bit more LinkedIn user I always wonder if that someone is just like calling themselves LinkedIn user or it's just it's just I was streaming software not picking up your name yeah anyway um so if you want to be anonymous which is fair enough indeed I signed up unrecommended scramble already yay oh that's good very much [Music] fish I think it's necessary if you need to maintain the previous value of state to do something with it um if we have multiple of them it says asan and to ensure the value is the last modified one okay cool is this recording uh yes I hope so yeah I love your website your website's so underrated why don't you put some ads on YouTube to promote your website um I don't know we just never run ads yeah I'd rather that than the uh the ads I do get on YouTube which is a I think uh I think I just exist basically wants to have better ads on YouTube which is why I mean don't we all I probably shouldn't say this on YouTube I might get banned anyway on to the next challenge yeah the fire starter challenge um this one seems quite convoluted oops um another thing it actually is okay so let's have a look um oh boy so the user needs to be be able to pick up the torch and use it to light the wooden fire your task is to allow them to do as follows oh that's like basically scripting your own game or something yeah pretty much it's all to do with um events so there is hover and and the tree and there is this background oh what who's like writing a game cool game development your task is to allow them to do as follows uh the torch equip State should be set to True whenever the user's Mouse button is down and is anywhere inside the torch container div so when they're clicking on the torch in other words right the torch equipped stat should be set to false whenever the user mails button is up and their curses anywhere inside the wrapper rapper line 54. 954 all right here uh okay so there is already some stuff pre-written for us so there is a conditional class name where if you have a torch uh then it also adds relative no cursor is that what that means torture craft okay we can see true uh okay okay so now the torch is like it moves with a mouse right okay okay gotcha okay so torch equip means okay um uh so the wood kindling stage should be set to True when all of the following conditions are met so when you have a torch and you enter the wood container okay the wood fire State should be set to True when all of the following conditions are met wood killing stage should be set to True Wood on fire should be said to trigger okay ah so it's basically like you use Hager torch and then you put it over the kindling and then it comes on fire I think you have to hold it for a while though don't you um yeah possibly okay the user's um cursor has left the wood container div you don't want any pyrotechnic accidents ah so it's like you hold it over the kindling and then when you leave it it's it's on fire oh okay okay okay okay everyone at Catching Fire when it's still there even though I think it could Okay so um okay I think I'm kind of following this uh Circle it one at a time yes but then torch equipped State should be said to true whenever the mouse button is down yeah so I'm kind of thinking uh where would you run background effect okay so that says like don't worry about that Cody you don't have no worry about that yeah don't worry about that wouldn't fire said curse position I think that's like uh watching and watch utilities so that uh updates Mouse position oh yeah uh so that is handling like all of this torch movements and the rest of it I think that yeah that's that's cursor position don't worry about any of that I literally just have to worry about the the logic just the things that are in these four points yes okay you do seem really nice says Daniel thank you how do you uh sorry I can't clarify um what we're saying earlier because hooks are async so you want to guarantee you get the latest value yes and the Mysterious LinkedIn user his name is Hassan children now we know hi guys let us know those of you watching where you're tuning in from yes we're beaming to you from Sunny Wales actually it is sunny today it was it was yeah yeah so back to this um torch equipped States set to True whenever the mouse button is down so about Mouse button torture group say should be said to true the user must down and is anywhere inside the torch container uh so torch container so I think there I need to write a Handler which said um cool so I need to scroll up Mouse button is down so clip on those down react on the house on Mouse down almost down oh I'll just do it like this oh whatever is it torch containers torch container must be okay so that seems real that's the thing that's the thing Okay cool so what do we need to do uh so Mouse button is down and anywhere inside torch container torch equipped States should be set to True oh okay so I just said uh set culture craft okay okay so once I put miles down I can actually now do this I'm sure it's sunny yeah turning in from Kenya welcome question from Vish about this so um you need to add an event listener on the torch container yes I think it's a little bit uh yeah because normally uh you know we add event listeners to like buttons or maybe inputs or stuff like that you know um or forms but obviously if you're doing Game Dev or something like that then you know you need to interact with objects so yeah I haven't but realistically you can set an event list and I want literally any Dom element so you can you can have it anywhere uh so I think that's why I was like where do I put this because again day to day you're not really well at least I don't do games so I just do like forms and dashboards stuff like that you know interesting stuff but game is yeah very nice okay so the event listener here being on Mouse down yes yeah correct uh so you can have on click on Mouse down and uh different uh react s reject synthetic event Michael I don't think this is what we need is it uh uh miles events oh well yeah the in react they're called synthetic events because they are not like Native dog events so but yes you'll have uh yeah see measurements on click on contacts or double click on drag on drop on Mouse down on Mouse enter on my sleeve oh that's actually that's actually hand against I think we need that later when it needs to hover over the thing yes and then on Miles leave I guess we use for them when you take it out this one oh yeah okay one last move on my sound on my server on Mouse up okay miles down miles up here fair enough so I wonder what's the difference machine on Mouse leaf and on mouth out [Music] Mouse Leaf versus on Mouse out Leaf is fired when the pointer has exited the element and all of its descendants whereas myself is fired when a pointer leaves the element or leaves one of the elements descended hmm so if you've got something inside that wrapper ah I see right so if I could fire before it leaves the actual wrapper right okay I can't imagine extremely specific but fair enough yeah clearly clearly some clearly a lot of people actually needed it if they either as a separate um well yeah why could you not just move the mouse Leaf one if there is a native event then clearly it was needed okay cool okay yeah on we go right so torture grip stage should be safety Falls whenever the user Mouse button is up and the curse is anywhere inside the rapid div ah so torch equip State should be set to Falls if my mouth is up anyway inside the rapid div okay so inside the rapid Dev on Mouse up and if I need to set that to set torch Equip to pause okay see so now I have like if I click nothing happens so I have to hold the button and when I release it it goes away and which one did you do that with which event listener uh one Mouse up so if you drop the torch then it has to come back okay sounds good um then we have um the work handling State should be set to True when all of the following are met which is equipped the user's cursor has entered the wood container okay okay torch equipped torch equipped enter the wood container wood container ah there you go wood container so is it um working links they should be such a true user's cursor so on my mouse enter and then oops sorry I need to because that's kind of an outer function so I would say was it if watch a quilt not really a bullying so I don't need to check if it's true yep and that's his data type you mean yeah uh torch equipped and oh so yeah that's it yeah because the other part is if you're in the wood container and this only fires if you're in the wood container yeah okay so if torch is equipped oh [Music] so set wood kindling the trip okay whoa look at that yeah oh so now yeah you can see that it's only doing that that um when you enter the wood container how have I actually done that with the scene so maybe I should actually do mouse over did you know so what kind of should it be set to true oh yeah uh I think what I need to do is else to work handling controls so their favorites appears if I draw it wasn't it doing that anyway it still does still does that but then maybe that's what it's supposed to be sorry oh what never mind so what's the difference between Mouse over and mount enter I actually don't know oh my God because we did leave and excellent versus on Mouse over most painter Mouse over well Center ah so almost over is like you see you can move around and that would get triggered every time Mouse enter once Mouse move a little bit nippier I suppose so I need my Center I suppose yeah yeah so it's not too well because we only needed to file once I think yeah yeah Victory Fire literally fire okay cool and I think I think the the wood fire station should be said to True when all the following conditions uh so it's basically a little bit more the same so wood container uh has left the so now I have to do mouse out I think on Mouse out um yeah what so would fire State I guess is it true I need to do that uh so on Mouse out so if I'm just equipped kindling is true yeah then Set uh what is it that I need to send but on fire set wouldn't fire that it's a very well named variable laughs okay yeah wow that is pretty cool that is pretty cool nice honestly I'm like how did he do that how does that what is this I think it's just a fire Emoji with some effects on it the fire emoji I believe so all right okay components fire jsx yeah cause look okay fire emoji and then fire vibrate class fire right oh um class either two separate classes oh so vibrate is like the animation that pulses it yeah okay fire is um positioning it really so then we can do um yes vibrate is indeed as you said the animation that pulses it cool so the Kindle then oh I was wondering how you know when the log was pink yeah um that's done with a filter if you're wondering at home ah I also Kindle is right it's it's an animation as well yeah so let's demonstrate that yep yeah so I pick up a thing says there's pulsing oh so yeah those different colors you see on the logs are done with um different filters and it's on a loop nice oh yeah look because if you hold this over it won't set you on fire so you have to like Kindle then take it away and then it will it'll work well yeah well done that was awesome nice sick says Julie nice great that is so clever is extremely clever I know and it's pretty it's pretty neat code as well like uh you're actually I think um also there is a lot of really cool stuff about uh set curse position where he passes uh to see where the where the coaster is I remember doing that a few years ago it was we weren't using Rihanna previous job oh it was hell I could I would imagine they said like anything to do with geometry can be pretty tricky Anthony it says around background effect so basically this is like keyframes in the game where every single frame you have to like redraw the scene every single time yeah yeah so round background effect um torch equipped update Master position okay so it updates updates the most position uh listens to Mouse move update Mouse position oh I see so oh okay so it kind of listens to oh so that's when you'd use Mouse move then if you needed to constantly track what the mouse is doing yeah so so yeah basically uh whole thing males hahaha imagine if you leave that in production someone just sees it in your console client why but we're actually not stop moving it okay it does stop yeah see look at it it probably tracks it's really fast isn't it so it basically runs it on every Mouse move um it's like a limit to like how many times a second it will do that uh I don't know probably your PC it seems expensive I mean it's I don't know then again we've had that since like Windows 98 with the trailing cursor uh if torch equipped and would not on fire set kindling uh oh okay so it kind of resets the scene oh I see okay oh wow okay nice Daniel Rose has clearly put a fantastic amount of into these challenges I know that is undeniable yes it kind of feels like uh you know one of these tasks where you know you in your first job you're not gonna be asked to for example create the whole thing but they will tell you like oh can you spot a bug or something can you wire up this component or can you change how this works this feels like you know a ticket that is perfect for that kind of first job um yeah there's a lot of stuff that already works and you can read some code and you can learn some interesting stuff from the code base uh and also you know there is something for you to do yeah so very nice gold stars and smiley faces indeed oh there's one oh look cool stuff yes completely agree yes um has this loaded yes it has so let's see how Daniel did it all right yes I need to scroll all the way to the end to get the full uh solution yeah so uh we can see that uh Daniel has gone down the way of writing custom handlers so toggle torch handle Mouse and uh uh and then he said handle Mouse leave okay well the kind of how exactly they work uh so he wrote a separate toggle torch function and then on Mouse up on the wrapper and males down he just says total torch yeah fair enough so that keeps the jsx nice and yeah a little bit less cold and then the mail center and then Mouse leave uh he just said yeah there you go so it's like someone nicer because you see in my yeah I think in in my next move would have been because there is miles down separate uh Mouse up so you can probably tidy this up to make it like a little bit neater to see better refactoring yes where's the benefit of this is all your functions are grouped together so if you need to work on them you'll find them yeah yeah I think that in this way you can easily see that you know on Mile Center on this day of this is what's going to happen you know there are separate uh events and it's a little bit tighter to see yes very nice okay time is ticking um yeah that's in a different window do not be alarmed it is this one Yes actually no let's do this Emoji personality test challenge so this person I don't know what this is trying to say resonates yeah with pizza going fast let's say and pausing oh I'm not sure like I think you're laughing because it's uh it's a very British thing to say uh but for for the Emojis or this yeah the middle one I don't I don't think there are other other countries might have the same one but yes pizza and then something and you have to put life on hold for a bit I feel like we might be missing some context oh nobody's focusing on muscle memory it says I just success for you focus on it the most that's why your teaching stays in on my mind yes that is true the scrimber methodology is to get you practicing as much as possible like we are now yes so this challenge oh let me submit a bit um so handle click function above needs to be completed for the app to work okay so there's literally um oh yeah that's that's a big handy thank you very much appreciate actually yeah the lovely people watching can see the Emoji the USS clicked should be added to the end of the electing ages stage array yeah okay again you I think in these you can actually press play and Daniel will walk you through it so you don't have to read it and I think he will also show you what what to do and stuff and what needs to happen yes and then you have these um notes so you can refer back while you're working without having to re-listen them yeah so the Emoji that user has clicks should be added to the end of light emojis okay so you click on this it gets appended to one array the Emoji is that you didn't click should be added to another array okay makes sense the current Emoji State should be set to the return value of get random emojis yeah so you choose one of the three so there is um no there is light emerges and password so you click on one you can get inside it here the other two get added there and then you have to reset the scene I suppose yeah should be set if you complete this tasks correctly the Emoji should be sent to their respective callers when you click on them and the counter the talksuit increment until you reach 10 at which point the test results were revealed you should only write code inside handle click function above okay so handle click function above oh so you literally just say [Music] um and there is a function and get random emojis for you already Okay so uh handle click uh I would imagine that there is some kind of event Dot like event in a handle click and let's have a look at the council log depend up talking about it empty strength Target button not text no you're trying to get the Emoji from this yeah uh let me see so maybe we should look at the random Emoji generating um yeah so let's see where does it actually do button handle click uh handle click so presumably everything gets passed into it yeah but I think this get random Emoji must be somewhere else yeah so get random emojis they just pre-populate this already yeah but with what uh random emojis choose rather Emoji Emoji the floor math random okay array three fill map choose random emoji so that cuts from the Emojis emojis data emojis whoa that's a lot of emojis is it oh word really there's 1454. yeah okay okay I really hope you just cope with that from somewhere and didn't have to type it all out yeah I think he probably did uh important components and in composed there is an emoji list ah so that's hi there honest items like and there is a result model uh so once you get to 10 it will probably do it for you Okay so hmm so I wonder if it's uh well let's have a look at some hints update liked emojis update past emojis okay you have access to the Emoji inside button ads text content so close and yet so far never mind never mind can we go yeah event.tire dot value too much uh vanilla uh okay right so so that's your click on them yeah what yeah yeah yeah it has scratched it so now we need to add it to the liked Emoji's State array yes uh so I foreign where you can say so do you pass one and then you can spread the rest of them I also like why do you want to do that the light Emoji map oh maybe not I'll just say satellite Emoji but then I probably shouldn't oh no here teenage years push if it's an array or does that not work I mean it would work I think I'm just over complicating it yeah because you just do that then you can probably just light Emoji's thoughts gosh yeah I think it would be much simpler because I'm trying to like think you need ability but I think it's just easier too let's do this first and then see tax content okay right emojis push event Target dot text on it counselor like teenagers uh hi Tomatoes not bad it's not a function do I even need to call that hey react uh uh use safe hooks arrays oh no look at that so you actually do need to do that push yeah so you do so you do need to do that immutability stuff there's a Target um who doesn't like that which is a bit worrying okay apparently it does like it it doesn't like it uh in which case uh pasta more juice I need to say set pasta my release old array and that would be so what is old array the older age like uh you run the Handler so the data that you already have stored is your old array and then you say take all the rate as input and now just use whatever you have in it add a new thing to it okay makes sense so you could use do you have do you have one yeah it's just an argument to this function so yep sounds good uh past so for past I probably want to say kind of like Karen Dot current emojis dot pop I don't know if you can say cons liked for content so I had a light Emoji to that and then I popped I probably liked the hair pop actually returns is pop gonna work okay it's pop why no it just remove d uh because pop takes the through either little one on the front or the one on the end ah yeah j s pop versus how do I remove the specific item oh what really there is no method to just say remove it array filter so you need to use a filter to do that wait what are you why are you removing it well because I want to just say um because you you basically have three emojis if you click on this one it gets added to here yeah and the other two needs to be added to that yeah so I'm taking I'm taking all three of them filtering this one out taking these two remaining put them in there so I guess you do need to use filter oh you feel you're not filtering it out are you well I need to remove it but if I I don't think there is like a method that says remove this so you probably need to filter yeah uh as it says yeah filter return others that are not that so past would be uh current emojis filter elements where elements does not equal liked okay well that's good and then I just need to say spread the past because it's two of them right yes yay um another third element will be the current Emoji State should be set to so then I just need to say before that yes Muhammad says I have to look up what this means H3 metallic how are you yes very well thank you hope you are too you need the Old State and then push to it because you need to maintain the value of the previous state I think that's what we did is it yeah good uh yeah because I did think that age was it three double one oh I was like is that a Nokia model or something yeah that would have been a good name for a phone 3110 I believe that 3110 Nokia is an actual yeah I had one those are the guys yeah that is an actual I had a 33 kind of thing um Dave Carson is back what have I missed lots of react fun ah 3110 yeah that's a bit of an obscure one but everybody has a 310. yeah that was a good phone yeah hello to you Jerome says I can see you that's good yes old array equals previous state does it yeah that makes sense let's not overthink it I think we would probably missed the context when it was posted um Prashant said splice I don't think that would work because um you'd have to with splice if you give it a specific point in the rate cut whereas it's going to be different each time so I think filtering is uh yeah but it kind of changes you can you can do it with the splice but I feel like filter is probably a little bit more self-descriptive um this might already be resolved chances remove um shift removes the one from the beginning yeah uh yeah but yeah that's the thing though it's like I don't actually know where it is can you give a point we need to use filter yeah so the third one is the current Emoji State should be said to the return value of get random if you complete these tasks correctly okay so let's see if I have completed this tasks correctly well we haven't done the third one have we yeah I have uh Set current emojis to random emojis okay I miss that uh okay so what's my I don't like any of those oh okay fire I think oh look at that there's one obviously the bunny okay kiwi yeah yeah oh no not sad cat keyboard yeah okay Dragon okay six uh another train why not yeah yes or not face palm okay okay your personality is great do you think it ever says anything else uh I don't know I don't know let's have a look um so where is that results model get results um on click get results okay where does it come from must be elsewhere no oh props get results so that comes from props uh so does it actually come from okay get results search results to true uh a suspense I gotta love this uh you know when it's calculating the result it's actually just set timer for two seconds when I say you're I can't find it index GSX no uh GSX oh I know it's up there the Emoji personality no yeah look where is that yeah results model there you go result model sure results get results with authority reset generate list that doesn't say what the results are yeah I think get results is the one that does it adults social results okay show results that's just a ball but what is the actual result so maybe it is I missed it in the results mode const message calculating oh okay right sorry there is it says try again uh all right yeah yeah so you just never said that yeah you just get all the emojis that you have picked and then yeah it says you're great and these are the ones we picked oh look at them go I think that's probably the best personality test you can ever come across on the internet yeah Dave Hollister says wouldn't you um just have a light property on an emoji oh I love the GSX Loop to filter through them and just just have an emoji set emoji maybe it could do it like that which should we um yes yes hi hi hello to you it's clearly considering everything yeah yes nuances of my personality um so let's see now what's Daniel came up with I can't imagine they would be very different it'd probably be somewhat similar but okay yeah so click Emoji takes content okay he did filter just like ours okay so that is actually I hate to say this um it's what Dave said but he's done it with a collect emoji oh it's not what we did um well we had a separate one that was calling it a past emoji I think ah okay well anyway so yeah you do have but these okay it's very hard to call these hooks differently so yeah well anyway [Applause] are you trying to think how to be hip I'm trying to figure out what this means it probably means something like getting pictures of a cargo ship I again I think it's uh Tech speak of some sort you know well I gathered that that hello is Inland Empire that wasn't evident to me I'm saying I'm not down with the kids you did do what he did by the locksmith yeah so that's um react challenges for you yes yeah so go ahead have some fun and uh yeah check them all out 40 fun challenges oh Dave is helping us he says the problem means heck hmm maybe yes 40 fun challenges for you to try out and you'll get to test your skills in all of these things very nice well well done Michael rounder Applause that was a lot of fun we will be back in a couple of weeks with a brand new stream top hits TBC any closing thoughts uh enjoy weekend tomorrow or today if you can well many people consider Thursday evening on right yeah have fun everyone I wasn't preview glad you enjoyed it thanks for coming along and a happy react challenging I guess yes well hang on I need to find a bundle foreign
Original Description
🎓 View our courses: https://scrimba.com/links/all-courses
This week, Leanne and Michael are taking on coding tasks from Scrimba's brand-new course, React Challenges.
Join this live stream to see how they get on, offer them tips and advice, if React is your thing, and find out how many challenges they can power through in one short hour!
🔗 Check out React Challenges for yourself on Scrimba: https://scrimba.com/learn/reactchallenges
OUR ONLINE CODE COURSES
💸 Enroll in the Frontend Developer Career Path - https://scrimba.com/learn/frontend
📚 See all our courses - https://scrimba.com/allcourses
⚛️ Learn React for free - https://scrimba.com/learn/learnreact
💛 Learn JavaScript for free: https://scrimba.com/learn/learnjavascript
📝 Learn HTML and CSS free - https://scrimba.com/learn/htmlandcss
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Scrimba · Scrimba · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
CSS Grid Course: Learn the Basics in 3 Minutes
Scrimba
CSS Grid Course: Positioning Items
Scrimba
CSS Grid Course: Why Learn It And How It Compares To Bootstrap
Scrimba
CSS Grid Course: auto-fit & minmax
Scrimba
CSS Grid Course: Implicit Rows
Scrimba
CSS Grid Course: Fraction Units And Repeat
Scrimba
CSS Grid Course: Justify Items and Align Items
Scrimba
CSS Grid Course: An Awesome Image Grid
Scrimba
CSS Grid Course: Named Lines
Scrimba
CSS Grid Course: auto-fit vs auto-fill
Scrimba
CSS Grid Course: Justify Content and Align Content
Scrimba
CSS Grid Course: Template areas
Scrimba
27. Setting up the structure - Responsive CSS Tutorial
Scrimba
25. Making the navigation responsive - Responsive CSS Tutorial
Scrimba
36. Playing with the title's position and negative margins - Responsive CSS Tutorial
Scrimba
31. Starting the CSS for our page - Responsive CSS Tutorial
Scrimba
26. Taking a look at the rest of the project - Responsive CSS Tutorial
Scrimba
15. Spacing out the columns - Responsive CSS Tutorial
Scrimba
33. Starting to think mobile first - Responsive CSS Tutorial
Scrimba
22. Making our navigation look good - Responsive CSS Tutorial
Scrimba
37. Changing image size with object-fit - Responsive CSS Tutorial
Scrimba
44. Module Wrap up - Responsive CSS Tutorial
Scrimba
16. Controlling the vertical position of flex items - Responsive CSS Tutorial
Scrimba
39. Setting up the widgets and talking breakpoints - Responsive CSS Tutorial
Scrimba
42. Setting up the About Me page - Responsive CSS Tutorial
Scrimba
35. Changing the visual order with flexbox - Responsive CSS Tutorial
Scrimba
23. Adding the underline - Responsive CSS Tutorial
Scrimba
21. Using flexbox to start styling our navigation - Responsive CSS Tutorial
Scrimba
20. Creating a navigation - Responsive CSS Tutorial
Scrimba
40. Using a new pseudo class to wrap up the homepage - Responsive CSS Tutorial
Scrimba
43. Fixing up some loose ends - Responsive CSS Tutorial
Scrimba
32. Starting the layout. Looking at the big picture - Responsive CSS Tutorial
Scrimba
24. A more complicated navigation - Responsive CSS Tutorial
Scrimba
28. Feature article structure - Responsive CSS Tutorial
Scrimba
34. Styling the featured article - Responsive CSS Tutorial
Scrimba
18. Making layout responsive with flex direction - Responsive CSS Tutorial
Scrimba
19. flex direction explained - Responsive CSS Tutorial
Scrimba
41. Creating the recent posts page - Responsive CSS Tutorial
Scrimba
17. Media Query basics - Responsive CSS Tutorial
Scrimba
30. Home Page. HTML for the aside - Responsive CSS Tutorial
Scrimba
38. Styling recent articles for large screens - Responsive CSS Tutorial
Scrimba
29. The home page. HTML for the recent articles - Responsive CSS Tutorial
Scrimba
10. ems and rems an example - Responsive CSS Tutorial
Scrimba
1. Starting to think responsively - Responsive CSS Tutorial
Scrimba
4. Controlling the width of images - Responsive CSS Tutorial
Scrimba
5. min width and max width - Responsive CSS Tutorial
Scrimba
3 CSS Units. Percentage - Responsive CSS Tutorial
Scrimba
11. Flexbox refresher and setting up some HTML - Responsive CSS Tutorial
Scrimba
12. Basic Styles and setting up the columns - Responsive CSS Tutorial
Scrimba
8. The Solution Rems - Responsive CSS Tutorial
Scrimba
14. Setting the columns widths - Responsive CSS Tutorial
Scrimba
2 CSS Units - Responsive CSS Tutorial
Scrimba
7. The problem with ems - Responsive CSS Tutorial
Scrimba
6. CSS Units. The em unit - Responsive CSS Tutorial
Scrimba
13. Adding the background color - Responsive CSS Tutorial
Scrimba
9. Picking which unit to use - Responsive CSS Tutorial
Scrimba
Tutorial to Learn Alpine JS - Full Course for Beginners
Scrimba
Guide To Algorithms in Javascript [Binary Search] - Full Course / Tutorial
Scrimba
Learn UI Design [7 Fundamentals Tutorial] - Full Course for Beginners
Scrimba
Javascript Tutorial for Beginners [From 0 to ES6+] - Full Course
Scrimba
Related Reads
📰
📰
📰
📰
The Case of the Ghost Tooltip
Medium · JavaScript
How I made a scroll-scrubbed video portfolio fast (Next.js 15 + GSAP + canvas)
Dev.to · Pratham Sharma
5 Reasons HTML Is About to Change Frontend Development
Medium · Programming
5 Reasons HTML Is About to Change Frontend Development
Medium · JavaScript
🎓
Tutor Explanation
DeepCamp AI