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
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 RU-vid videos!
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.
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.
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".
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!
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 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.
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.
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
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!
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.
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
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)
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)
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');`
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.
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.
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
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
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.
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!
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. :)
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
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].
@@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
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..?
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.
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 :/
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.
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.
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 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 < 1000; i++) { for (let i = 0; i < 1000; i++) { let array = createRandomArray(); counter[array[0]] += 1 }} console.log(counter)
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?
