This kind of raw unplanned video format was so great instead of a polished precoded solution so some newbies could follow along with your thought process step by step. The problem might have been very easy but the cleanup and optimization was a golden nugget. Awesome content as usual

I am learning a lot from this video. I enjoyed following your thought process, its not only teaching us about js its also teaching us how to think. I think most of us are in tutorial hell because when we are given some task we dont know how to think to solve the task. Please do more of these and the refactoring videos.

As a beginner, this way of solving a problem is very insightful. I understood most of the logic even though I don't know TypeScript yet which made it slightly confusing at times. I'd love to see more videos like this. Thank you.

Love this live coding content! Also love that you explicitly made a point to talk a lot about re-factoring and writing clean code. Not nearly enough of that on KZread videos!

Thanks for these code challenges. I love feeling stupid not being able to do them and then learning about these foundational underlying concepts, keep them coming!

It was a great challenge and I found it very interesting to do it and review your solution and explanation. Please more of these 😊

Thank you for walking through the problem and the solution instead of providing scripted solution

please more content like this... easier ones harder ones... as long as they are junior interview challenges. Thanks!

Thanks for the walkthrough. I have been wanting to go back to react and it helped me revise a lot of things! :)

this is like bob ross painting a barn overlooking a meadow. Nice. pls continue creating these types of videos. bob ross of junior level take home quizzes.thakns.

Awesome content! One thing I would have done in a different way: in the getButtonClass you can either return option.state.toLowerCase() or use an object like {'SELECTED': 'selected', 'WRONG': 'wrong'} and then use option.state as the key like objectName[option.state] || '' (empty string if the key does not exist)

Great video bro learned a lot, I did a slightly different implementation, but the video really helped me in the overall idea

@Web Dev Cody superb content...please keep on uploading more such Coding Challenge Videos on React..they are asked a lot during interviews.

I just completed this task before watching your solution. Great challenge!

Awesome content. Thank you!!

Thank you so much for sharing these kind of contents

More of this please. Thanks

i got a challenge similar to you did few days ago (langchain story mode) btw great video.

This video made me subscribe. More please! 😅

Bruh lmao. There is no way in hell that a junior will know how to do this. I guess nowadays Junior means "has been making things with React for 5 years and finally landing his first interview".

@ivangechev4243

8 ай бұрын

Actually that's really easy task lol...It's the typescript which is actually making the code harder to understand

@t0m4sk8

8 ай бұрын

the fact that he did all in line was a little confusing, but overall wasn't that hard

@roach_iam

8 ай бұрын

This is a very easy challenge. Junior react interview challenges usually make you use some kind of API and error handling.

@IStMl

8 ай бұрын

maybe the industry standards went up since you were a Junior cause thats not the hardest challenge a junior could get

@NubeBuster

8 ай бұрын

If you cannot solve this, you don't know react

I wish there was this type of content but for Python/backend and data engineering

I really enjoyed this and as others mentioned many times these live challenges are very valuable to see the full process of thinking and refactoring. Can you do a challenge please when instead of jumping straight into code spending some time with planning? Like what we need to implement, what kind of components, features, maybe packages, libraries. I really like React and TypeScript but am a total noob of planning a project. I'm trying to do a project and I've done a fair bit of it and after a while it just gets messy with all the components and code.

@WebDevCody

8 ай бұрын

The problem is I don’t plan my code. I let code evolve organically.

@viktorberczeli3009

8 ай бұрын

@@WebDevCody But you do plan bigger projects I guess?

@WebDevCody

8 ай бұрын

@@viktorberczeli3009 i usually plan complex features the project might need, but I never plan at the code level, only system level

Can you please share your vscode settings 😊 Edit: Please bring more videos like this, never even stop this series.

You could memoize that first sorted array to keep that first pattern, on a side note something that's wrong is that you're not using the previous values of the state, you'll run into sync issues

Could the button have been changed to a Checkbox? It functions like a checkbox.

Great content. Just have a little though over the UX part, in the game experience, it is not suggested to remove element that cause the element shifting. So my suggestion is instead of remove the paired option, we might want to give it a correct status, and when the button has correct status, its visibility will be hidden. so we maintain the same layout instead of shifting all the elements after pairing.

What colorscheme is that in your vscode? Looks nice

It's super interesting to see you live solving problems like that ! If you want to do more "complex" stuff that'd amazing too

Next challenge; create a custom translation library using redux / context

Great vid! Though I do question your preference to inline code when it is more than a few lines. Know you'll have to refactor so why not do it straight away.

How are these coding interviews normally set nowadays? The last one I did was a few years ago and I was able to take it home and put the end result in a github repo for them to access. I couldn't imagine doing something like this live with people watching over me!

made so much complex , its a easy task

I guess it's possible here to use only one state "options" and then find selected option like that `const selected = options.find(option => option.state === 'selected');`

This question is really simple in plain HTML + Javascript. In react I have no clue :D

there are not many countries, so it won't hurt, eat up the memory.... if you store both as keys and also as values... or just an "array" of some custom object type that has "pairs" and has some override for "equal" function where berlin is equal to berlin and also germany, then another function return it's pair that would return berlin for germany and germany for berlin... so you could still do some cool lambda expression on it... or my first solution, you'd store both way country->capital and capital->country in same dictionary ... also could store other data, like status... like for example: key: Germany value: (pair: Berlin, status: selected) , could be same the other way key: Berlin value: (pair: Germany, status: selected) in the same dictionary... it would be super easy to check when you click on Berlin if Germany is selected already, or if Berlin was selected, because it handles same way, you do not have to handle country and capital differently, think of this as X,Y coordinate of a symmetric object (symmetric in a way if x,y is part of the picture then y,x too, so basically symmetric to the y=x line)

would that be a live coding or you can do it without someone watching you?

Can you post the full question somewhere?

what theme do you use?

More like this type of problems, Thanks.

hello cody, i hope you read this because id be super grateful and thankful for the answer. so, ive tried the challenge and i did it in my own way, but i kinda make my away around from some of the instruction. for example on point 1, the instruction only tell to put 1 prop. but i put 2 instead. my question is, is this acceptable or should i strictly stick to the instruction? thankyou, really good video!

@Dekharen

8 ай бұрын

As a general idea, you should try to stick as close as possible to the instructions. The easiest way to solve this in a real scenario is simply to ask ; Making sure you understand PROPERLY what's asked of you and what is important and what isn't. In this case, I'd say the wording is clear enough on what props your component should get so you should try to rewrite it; but in some cases, that's really not the focus of the exercise. Here, the idea behind having only one prop is also to check if you're able to make a component that properly meets the requirements of a spec, so if in a real situation you were asked to do a component taking [x] data, you'd be able to provide the component as is, without demanding the rest of the team to modify what data they're supposed to put in. A classic case would be refactoring a component that already exists, without making changes to the parent itself to keep the changes minimal. :)

@user-lq1cs

8 ай бұрын

i appreciate the answer, brother. thankyou! @@Dekharen

Hey chief, how do you get the underlined functions etc with the indentation - indent rainbow doesn't seem to do that by default?

@WebDevCody

7 ай бұрын

I think there is a vscode option to highlight function blocks

@dw2281

7 ай бұрын

@@WebDevCody aha! Yup, for anyone else: you're looking for 'Editor> Guides: Bracket Pairs and Bracket Pairs Horizontal

Great video. Just want to add when doing an coding challenge for an interview, make sure you write it like how you would at your job. I would extract the button, Types, constants to a separate file for reusability, write unit tests and add documentations

Left me dazed and confused haha

what happens if you click a button again after it turns blue?

When multiple buttons are colored blue when you click on them, wouldn't give them a key solve that?

@WebDevCody

8 ай бұрын

I don’t see how, you’d want to track the state of the button to know if it’s selected or not, not a key

Should I spend a few sessions a week solving these type of challenges? Or to get better at React just work on projects?

@ultrv_lmf

8 ай бұрын

Def should

@WebDevCody

8 ай бұрын

it doesn't hurt to try and solve these challenges, it'll just make you better at problem solving

@veedjohnson

8 ай бұрын

How can we get more of these problems? ​@@WebDevCody

There is a problem. What happens if you have country that has the same capital name, such as {Singapore:'Singapore'}? In that case clicking on one button will change background color of both buttons to blue. I got that problem when I tried to solve this problem on my own and I believe that could be the case in your solution as well :D.

@majksu

6 ай бұрын

Is using ids instead of strings when comparing good enough?

@darkpassenger9155

6 ай бұрын

@@majksuyes

Please do more of this

Can you give me the challenge description? I have solved it too before watching the video and I wanted to put the description on the repo readme

great stufff

This is easy... If you have a logical mind after watching single full course on a particular SPA framework (in this case React), this should be a piece of cake for you.

Bro where can we get u vs code theme colors and plugins? Thanks man ❤

@WebDevCody

6 ай бұрын

Bearded theme stained blue, and bearded icons

its not the simples task for a junior, i got stuck on removing the buttons if corrected options are clicked

What theme is that?

Does anyone know of a site or resources with examples tests like this? not like leetcode etc!

this is very easy in javascript, the solution presented is complex looking,

What theme are you using?

@WebDevCody

8 ай бұрын

bearded theme stained blue

I think you could do this Object.entries(data).flat() instead of spreading arrays

an enum of the possible states would be nice

I had this exact same interview question. I had to finish it within 30 minutes. It was so hard :(

@luisxfn8185

2 ай бұрын

how did I go? I tried to solve it before watching the video and its taking a while without using chatgp for straight answers 30 minutes seems impossible for me tbh

whats ur vs code theme looks awsome

@conallen3166

6 ай бұрын

can you share your theme? thanks

and how many junior react devs are able to complete task like this on their own?

@eshw23

8 ай бұрын

hopefully most 😀

@wykydytron

8 ай бұрын

Nope, most juniors would fail it. Reason is simple most juniors learn what's used the most so little bit of creativity needed here will defeat many of them. If that's good thing I dont know but it seems like bonus points kind of task for junior to do.

Actually this isn’t the worst challenge project… I would accept this challenge for a junior position I can do this and I’ve done React for little over a year

I hope you know this, but .sort(() => Math.random() - 0.5) is a HORRIBLE choice for shuffling an array... You really shouldn't use that in an interview. There's a 20% - 30% chance (depending on index) for each element to just stay at it's original spot. Because (assuming it's using Insert Sort, which most browsers use for small lists) when the "Math.random() - 0.5" is negative, the element moves up a spot, but if it's then positive the next time, the element will be moved down a spot, which puts it back to where it started. That means it's also very unlikely for an element at the start of the list to end up at the end of the list, because "Math.random() - 0.5" would need to be positive n times in a row for the element to move up a spot each time. Given [1,2,3,4,5,6], these are the chances for each number to end up at index [0]: 1 = 29.19%, 2 = 29.53%, 3 = 20.06%, 4 = 11.91%, 5 = 5.99%, 6 = 3.32%. So yeah, as you can see, that can't be called "random". A good method for randomizing that array would be .map(value => ({ value, sort: Math.random() })) .sort((a, b) => a.sort - b.sort) .map(({ value }) => value)

@WebDevCody

7 ай бұрын

Good idea!

Which vscode theme is this?

@WebDevCody

6 ай бұрын

bearded theme stained blue

Should've used Object.entries instead of keys/values and then merging them together.

@WebDevCody

8 ай бұрын

good suggestion, but you'd also need to flatten the nested arrays

@digioi

8 ай бұрын

@@WebDevCody I think @ivangechev4243 meant flatten would merge the list into an array ... `Object.entries(data).flat()`

26:10 you could use a switch statement either!

@MocBocUS

6 ай бұрын

just return option.state.toLowerCase() :D

I am against picking the requirements one by one and I would prefer looking the whole requirements and come up with single design

Awesome tutorial! can you share what vs theme that is?🙏

@WebDevCody

6 ай бұрын

bearded theme stained blue

@conallen3166

6 ай бұрын

Thanks a mill @@WebDevCody

If the junior dev gets all the answers correctly, they should be hired as an intermediate or even a senior dev, this is not easy.

I wonder why not make the buttons their own components? To keep the state more clean overall.

Anyone know what vsc theme this is?

@WebDevCody

6 ай бұрын

bearded theme stained blue

Did he mention the pay?

Couldn't we just use a useEffect that would sort the array only the first time the component mounts?

@WebDevCody

8 ай бұрын

Yes

@janzatopek

7 ай бұрын

Hi, as a more advanced React dev - in this small project you could do that, but if you are making some complex or hard-render component, the lifecycle with useEffect would be: initialize useStates, hooks etc, render the return statement (component), fire useEffect that would randomize (sort) the array and then it would render the return statement again. The more correct way, if you really want to use useEffect would be useLayoutEffect. But here you still have two steps - first is initialization of useState and then setting it. Cody did it the most correct way where he put it in initial function setter of useState. It has the most potential to not fk up something.

TypeScript made this more complicated than it should have been.

The only this this taught me is how antiquated React really is

Maybe you’re not introducing concepts like flattening control structures (by not using if else and else when you return as you go anyway) or using useState’s functional state update (with previousState passed into it) for setOptions, due to wanting to keep it simple for beginners - but I feel like it might also teach some beginners bad patterns from the getgo..?

@WebDevCody

6 ай бұрын

Yeah that’s probably a good idea

What is your vs code theme name

@WebDevCody

7 ай бұрын

bearded theme stained blue

how mutch time did he have

pls do a setup reveal video/tour

2:55 why not use `const [countries, capitals] = Object.entries(data); ?

@WebDevCody

7 ай бұрын

That would work as well

@floskater99

7 ай бұрын

Because it doesn't work. .entries() groups the keys with their values. That's not what we need here. const data = {germany: "berlin", england: "london"}; const [countries, capitals] = Object.entries(data); console.log(countries); Prints [Germany, Berlin]. But I wanted [Germany, England].

Looking at this, I don't get the selling point over using straight jQuery. It needs to be more declarative and have less branching. What you can do is use computed values... Have an array with the selected buttons and then you can easily test if it's wrong. like `const isWrong = isFilled && !isPair(values, selected[0], selected[1]);` But given the time constraints of the interview, you can't iterate enough to see cleaner solutions

Wait actually I'm able to solve that with my knowledge without googling, unfortunately I still haven't got a dev job 😅

No way i will need to go through this :( maybe this is why im not getting any interview 😢

@IStMl

8 ай бұрын

work on more projects to improve yourself, because that challenge was not very hard

@WebDevCody

8 ай бұрын

I think it could be challenging for a junior

@BahnMiFPS

8 ай бұрын

@@WebDevCody i mean the fact that you just speedrun through the challenge while i stop the video at every question for literally 10 minutes is crazy tho lol

Is this seriously a junior role interview? cos eiii

I feel like coding web dev is like go learn HTML CSS then JS now forget everything and use react

I am a bit scared. Do they really ask such questions to Junior dev?

@WebDevCody

2 ай бұрын

I guess some places do 🤷

Kids, don't be like Cody. Don't shorthand and inline everything. Make a function or two. Keep your code readable. Minifiers come after you code.

@WebDevCody

6 ай бұрын

Did you know there is a way to collapse functions in the ide?

Can you post the intro text in the comments please?

Sorry, but the junior challenges I know, were more like building a CRUD app like a "To Do List" or a "Tic tac toe" game. This is way more I have ever seen. Could also depend on the country, I don't know.

Seeing this makes me realise how much better Solid is than React. It's a shame people are going to keep using React for a long time still. Theres a reason why all the top framework people are copying Solids ideas, Svelte just the latest.

@MrHamsterbacke756

6 ай бұрын

What would be easier in Solid?

it seems you are making this look way harder than it actually is by making this into an inline mess. Because otherwise it should absolutely be within a junior's reach.

@WebDevCody

6 ай бұрын

inline vs external functions wouldn't have made a difference. extracting a function to not be inline involves just moving parameters around

damn react seems so hackish when your used to vue

Took me like 2 hours, guess Im rusty

I'm never gonna get a job...

@WebDevCody

8 ай бұрын

Keep practicing

edit: the following is not correct. see comment further down ------------------------- There is absolutely no reason to substract that 0.5 from the math.random to shuffle the list. Will do the exact same without.

@WebDevCody

8 ай бұрын

I’d need to double check that. I specifically remember needing to do that once in the past

@seriouce4832

8 ай бұрын

@@WebDevCody I just tried it and actually we were both wrong, it is not working correctly in any case. You are right in that sense that without -0.5 nothing will happen at all. The problem is that the solution you are giving is not a random distribution. For example in a list of 10 items, the first element will stay the first element with a chance of ~20% (the chance to be 1st should be 10% for every button if there are 10 buttons). I test this with a simulation / test: let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] let counter = {} for (number of array) { counter[number] = 0 } function createRandomArray() { let innerArray = [...array] return innerArray.sort((a, b) => Math.random() - 0.5) } for (let i = 0; i for (let i = 0; i let array = createRandomArray(); counter[array[0]] += 1 }} console.log(counter)

C'mon guys, this is not Junior interview challenge. I am experienced dev and I think this is exaggeration.

I don't want to be mean and i don't know if it's on purpose, but this code looks pretty bad to me imho. The architecture is bad, hence the readability is bad. The only ds used is an array which as bad lookup complexity so the code is inneficient. Also it is clear that the problem was not thought out beforehand... Maybe i put the bar too high but that would de a fail for me :/

@WebDevCody

6 ай бұрын

what architecture would you have done?

You cut out clips of you looking things up

@WebDevCody

6 ай бұрын

For these challenge problems I try not to look anything up. But yes all my videos are edited to cut out boring parts

If you can't solve this you're not ready to become a junior developer, this is easy as fuck lol

@WebDevCody

8 ай бұрын

A lil aggressive there, but yeah this problem isn’t too bad

@dojnishi

7 ай бұрын

Ohhh mr Brilliant is in the town. Be careful, because the shine of your balls will blind all of the greatness in you, and who is gonna be the best programmer?