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 TH-cam videos!
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.
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.
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!
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".
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.
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.
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)
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!
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');`
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
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
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.
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.
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].
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.
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)
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.
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)
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.
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. :)
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
@@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..?
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
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.
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?
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 :/
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
Thank you for walking through the problem and the solution instead of providing scripted solution
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 TH-cam videos!
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.
It was a great challenge and I found it very interesting to do it and review your solution and explanation. Please more of these 😊
please more content like this... easier ones harder ones... as long as they are junior interview challenges. Thanks!
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.
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!
I just completed this task before watching your solution.
Great challenge!
Thanks for the walkthrough. I have been wanting to go back to react and it helped me revise a lot of things! :)
i got a challenge similar to you did few days ago (langchain story mode) btw great video.
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".
Actually that's really easy task lol...It's the typescript which is actually making the code harder to understand
the fact that he did all in line was a little confusing, but overall wasn't that hard
This is a very easy challenge. Junior react interview challenges usually make you use some kind of API and error handling.
maybe the industry standards went up since you were a Junior cause thats not the hardest challenge a junior could get
If you cannot solve this, you don't know react
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.
The problem is I don’t plan my code. I let code evolve organically.
@@WebDevCody But you do plan bigger projects I guess?
@@bevik12 i usually plan complex features the project might need, but I never plan at the code level, only system level
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.
Great video bro learned a lot, I did a slightly different implementation, but the video really helped me in the overall idea
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)
@Web Dev Cody superb content...please keep on uploading more such Coding Challenge Videos on React..they are asked a lot during interviews.
Could the button have been changed to a Checkbox? It functions like a checkbox.
Should I spend a few sessions a week solving these type of challenges? Or to get better at React just work on projects?
Def should
it doesn't hurt to try and solve these challenges, it'll just make you better at problem solving
How can we get more of these problems? @@WebDevCody
Thank you so much for sharing these kind of contents
More of this please. Thanks
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!
Can you please share your vscode settings 😊
Edit: Please bring more videos like this, never even stop this series.
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');`
Awesome content. Thank 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
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
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.
Is using ids instead of strings when comparing good enough?
@@majksuyes
what happens if you click a button again after it turns blue?
Next challenge; create a custom translation library using redux / context
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
and how many junior react devs are able to complete task like this on their own?
hopefully most 😀
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.
2:55 why not use `const [countries, capitals] = Object.entries(data); ?
That would work as well
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].
is there a link for this where I can try it myself?
This video made me subscribe. More please! 😅
This question is really simple in plain HTML + Javascript. In react I have no clue :D
Couldn't we just use a useEffect that would sort the array only the first time the component mounts?
Yes
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.
I wish there was this type of content but for Python/backend and data engineering
Does anyone know of a site or resources with examples tests like this? not like leetcode etc!
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)
Can you post the full question somewhere?
made so much complex , its a easy task
what theme do you use?
its not the simples task for a junior, i got stuck on removing the buttons if corrected options are clicked
What colorscheme is that in your vscode? Looks nice
When multiple buttons are colored blue when you click on them, wouldn't give them a key solve that?
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
would that be a live coding or you can do it without someone watching you?
Bro where can we get u vs code theme colors and plugins? Thanks man ❤
Bearded theme stained blue, and bearded icons
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.
I wish I watched this before my interview quiz :(
Hey chief, how do you get the underlined functions etc with the indentation - indent rainbow doesn't seem to do that by default?
I think there is a vscode option to highlight function blocks
@@WebDevCody aha! Yup, for anyone else: you're looking for 'Editor> Guides: Bracket Pairs and Bracket Pairs Horizontal
It's super interesting to see you live solving problems like that ! If you want to do more "complex" stuff that'd amazing too
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)
Good idea!
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.
What theme is that?
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. :)
i appreciate the answer, brother. thankyou! @@Dekharen
Should've used Object.entries instead of keys/values and then merging them together.
good suggestion, but you'd also need to flatten the nested arrays
@@WebDevCody I think @ivangechev4243 meant flatten would merge the list into an array ... `Object.entries(data).flat()`
What is your vs code theme name
bearded theme stained blue
whats ur vs code theme looks awsome
can you share your theme? thanks
Anyone know what vsc theme this is?
bearded theme stained blue
26:10 you could use a switch statement either!
just return option.state.toLowerCase() :D
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
Awesome tutorial! can you share what vs theme that is?🙏
bearded theme stained blue
Thanks a mill @@WebDevCody
Which vscode theme is this?
bearded theme stained blue
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
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'm so glad you commented this. I was biting my nails.
I wonder why not make the buttons their own components? To keep the state more clean overall.
The only this this taught me is how antiquated React really is
TypeScript made this more complicated than it should have been.
Did he mention the pay?
No way i will need to go through this :( maybe this is why im not getting any interview 😢
work on more projects to improve yourself, because that challenge was not very hard
I think it could be challenging for a junior
@@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
i think you will pass with react 18 honestly
What theme are you using?
bearded theme stained blue
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..?
Yeah that’s probably a good idea
I had this exact same interview question. I had to finish it within 30 minutes. It was so hard :(
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
this is very easy in javascript, the solution presented is complex looking,
More like this type of problems, Thanks.
Left me dazed and confused haha
I think you could do this Object.entries(data).flat() instead of spreading arrays
I am against picking the requirements one by one and I would prefer looking the whole requirements and come up with single design
an enum of the possible states would be nice
how mutch time did he have
Is this seriously a junior role interview? cos eiii
great stufff
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?
I guess some places do 🤷
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.
Please do more of this
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.
What would be easier in Solid?
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.
Did you know there is a way to collapse functions in the ide?
Wait actually I'm able to solve that with my knowledge without googling, unfortunately I still haven't got a dev job 😅
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.
inline vs external functions wouldn't have made a difference. extracting a function to not be inline involves just moving parameters around
pls do a setup reveal video/tour
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.
I’d need to double check that. I specifically remember needing to do that once in the past
@@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)
If you can't solve this you're not ready to become a junior developer, this is easy as fuck lol
A lil aggressive there, but yeah this problem isn’t too bad
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?
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 :/
what architecture would you have done?
You cut out clips of you looking things up
For these challenge problems I try not to look anything up. But yes all my videos are edited to cut out boring parts