I’ve been watching you for a month now, and I just wanted to say thank you for doing what you do. It helps a lot how you explain what you’re thinking while you’re problem solving.
Thank you for actually explaining the final product or what we need to do in the begenning. Some of your other code challenge videos I dont understand the problem or final result and end up not doing it. Great video.
>The fact that you can bring a real world problem into code is quite amazing. This skill is what every programmer should have. I mean that's literally the definition of a software engineer's job. -_-
I love the way you teach. I am an aspiring Front-End Developer and currently a first year Information Technology student. If it ever cross your mind to recreate you beginner to full-stack developer series that would be great! Keep up!
The input error can be solved by parsing the value to int on your set state function like so: setItemsInPersonCart(parseInt(e.currentTarget.value)); It gave such error since by default the input value is string.
Great video and a fun challenge. Unless I missed something the only thing I would add is to clear the interval when all the lines are empty. Look forward to your next challenge. Also, can't you just put min="1' attribute on the input. Thank you for these challenges!
You have to set the input state to an empty string whenever you don’t want any value in it… also setting the input type to number doesn’t always prevent input of characters, they can type really fast and it can bug out, it’s better to do a second check and then convert the e.target.value to a number. There’s a Math.sign() that takes a string or a number and will return 1 for positive numbers, -1 for negative numbers, 0 for 0, -0 for -0, NaN for “foo”, 1 for “5”, and -1 for “-4”. Then you can do your if statements and set your state 😅
I think there might be a bug in this code. When adding to the new line, when there are more than one line that has the same amount of items in it on, it seems like the logic of line === lineWithLeast? [...line, itemsInPersonCart]:line will end up updating all of them, please let me know if that is the case? thank you
Рік тому
I check this. There is no bug. Works fine. example. const ar=[1]; const arr=[1]; console.log(ar === arr); // Expected output: false console.log(ar === ar); // Expected output: true
Your videos are great for learning!! Problem solving is an essential skill and I love how you present these videos and explain your process. I learn a bunch of best practices and how I should break down problems in general. One thing is maybe include more descriptive titles and/or thumbnails? I would find it easier to find a problem I'd like to solve based off of descriptive titles or images instead of the generic ones. Just a suggestion. Keep up the great work!!
There's really no need for a foreach-loop when you could just use the traditional for-loop. This would give you the index directly of the line containing the least amount. Set lines[idx] = [...lines[idx], itemsInPersonCart] and then use this in the setState through setLines([...lines]). Simpler, faster and way easier to read. Otherwise, good challenge. I liked it and I raced you ;)
damn, my solutions is messy af, but it works well for the tasks asked (probably has some edge cases bugs, idk), I went with a single state, and an Array of Objects for the queues with a "clients" property.
react just doesn't seem to like value={undefined} Keeping the rest of your code the same, this fixes the error: value={itemsInPersonCart === undefined ? "" : itemsInPersonCart} (or you can use useState, rather than using undefined)
I like tackling these then comparing your methods vs mine to see where I can improve. It would be cool if you also gave an idea of how long you think it would take a beginner to tackle the problem, so I know just how inefficient my times are.
currentTarget is the actual dom element that the event listener is attached to. target is the thing that triggered the click event (which might not be the actual button clicked but instead maybe an icon inside the button)
I don't really see the point to use onChange to the input in that case, because you always have to hit "checkout" so you cam get it from form data once you set name of that input. Then you can easily check inside of submit function whenever it doesnt match your requirements (less than 0 in that case). It is a good job but i see so many times people are using useState like that and I think it is not proper way to do that mainly because you are unnecessary rerendering stuff because of that. :)
I didn't really understand the timing process. I would have created an interval for each line since that's how a line would process practically. this was a cool problem though
I don’t get in what real life problem I can use this approach… I mean it would be nice to have examples that actually deals with real dev problems not some general examples) cause as I understand your timer represents cashier work in this example
For the addPersonToLine function, I think instead of using map with the setLines method you can probably just use the spread operator like lines[lineWithLeast].push(itemsInPersonCart); setLines([...lines]);
Some more challenging ideas: - Each queue has its own interval using something like Math.random - Add or remove checkouts using buttons - Dynamically add or remove checkouts based if the line has more than 3 people waiting or total number of items exceeds 20 (in real world you would also have a limited number of checkouts and or staff) - Store checkouts stored in a key value pair object such as Maps
I’ve been watching you for a month now, and I just wanted to say thank you for doing what you do. It helps a lot how you explain what you’re thinking while you’re problem solving.
I appreciate that!
same
Thank you for actually explaining the final product or what we need to do in the begenning. Some of your other code challenge videos I dont understand the problem or final result and end up not doing it. Great video.
I’ll try to remember to do that in future videos, thanks for the feedbacl
The fact that you can bring a real world problem into code is quite amazing. This skill is what every programmer should have.
>The fact that you can bring a real world problem into code is quite amazing. This skill is what every programmer should have.
I mean that's literally the definition of a software engineer's job. -_-
@@aeoliun lmao
@@aeoliun why did you quote him tho? the comment is above you
please never stop making videos, they're all super insightful
really great content Cody. keep on rockin! It really helps understand react just by doign this small challenges.
I just wanted say thanks for this content, it would be really great if you keep on posting this challenges
I love the way you teach. I am an aspiring Front-End Developer and currently a first year Information Technology student. If it ever cross your mind to recreate you beginner to full-stack developer series that would be great!
Keep up!
The input error can be solved by parsing the value to int on your set state function like so: setItemsInPersonCart(parseInt(e.currentTarget.value));
It gave such error since by default the input value is string.
Love the way to verbalize your thought process and your humility. Keep it up Cody!
Great video and a fun challenge. Unless I missed something the only thing I would add is to clear the interval when all the lines are empty. Look forward to your next challenge. Also, can't you just put min="1' attribute on the input. Thank you for these challenges!
Fantastic work Cody, man that last part was gnarly, I would have mentally checked out.
Thank you for this challenge! Taking this stuff with tills into React is great practice
For someone learning React, this is extremely helpful.
I really like your videos, especially these challenges. Keep doing these videos more, it helps me and people so much
the best learning is by debuggin. the videos with live debagging are the most heplful ones. thanks very much.
You have to set the input state to an empty string whenever you don’t want any value in it… also setting the input type to number doesn’t always prevent input of characters, they can type really fast and it can bug out, it’s better to do a second check and then convert the e.target.value to a number. There’s a Math.sign() that takes a string or a number and will return 1 for positive numbers, -1 for negative numbers, 0 for 0, -0 for -0, NaN for “foo”, 1 for “5”, and -1 for “-4”.
Then you can do your if statements and set your state 😅
thanks for the info. My brain often goes blank when I do these live coding things
@@WebDevCody I feel you, I am pro when I do it alone, I am pepega when someone is watching me
These are great to do, I was able to do all of it except for the decrementing part, always good to fail and get a stronger grasp on these concepts
love your content. I really enjoy the verbal thought process
Great content as always! Thank you so much
This is an awesome exercise! Thanks for sharing your solution, keep up the great work!
Appreciate the live problem solving sessions!
I think there might be a bug in this code. When adding to the new line, when there are more than one line that has the same amount of items in it on, it seems like the logic of line === lineWithLeast? [...line, itemsInPersonCart]:line will end up updating all of them, please let me know if that is the case? thank you
I check this. There is no bug. Works fine.
example.
const ar=[1];
const arr=[1];
console.log(ar === arr);
// Expected output: false
console.log(ar === ar);
// Expected output: true
great video! which vscode theme are you using?
Your videos are great for learning!! Problem solving is an essential skill and I love how you present these videos and explain your process. I learn a bunch of best practices and how I should break down problems in general. One thing is maybe include more descriptive titles and/or thumbnails? I would find it easier to find a problem I'd like to solve based off of descriptive titles or images instead of the generic ones. Just a suggestion. Keep up the great work!!
To clarify, this only really applies to the interview challenges.
Yeah maybe a screenshot of what we will build
Very good problem and his solution, thank you so much for your content!
love from India ❤very useful videos...keep on postingsuch React Coding challenges
Thank you 🙏
More videos like this!! Love it 🎉😂❤
how do you rename on 9:57, what shortcut you've used?
found it myself: on Mac "fn + F2"
Probably f2
I love yout videos!
Quick question, what shortcut did you use at 9:52 to change all the variable names instead of the word itself??
F2
There's really no need for a foreach-loop when you could just use the traditional for-loop. This would give you the index directly of the line containing the least amount.
Set lines[idx] = [...lines[idx], itemsInPersonCart] and then use this in the setState through setLines([...lines]). Simpler, faster and way easier to read.
Otherwise, good challenge. I liked it and I raced you ;)
I would rate this solution 6/10
You dont need to control the input because its value is only needed when you submit the form
Love this!
damn this is great practice, i watched it without code following but ima watch it again and gonna bust out my visual studio code
could you tell, please, what VS Code color theme is it?
What is your keyboard setup?
Seems likeyou transition from keyboard to mouse instantly, what are you using for cursor control?
I use my trackpad
damn, my solutions is messy af, but it works well for the tasks asked (probably has some edge cases bugs, idk), I went with a single state, and an Array of Objects for the queues with a "clients" property.
Love it!!keep it up!
nice video. didn't understand why you have to setItemsinPersonCart(undefined) when "", could't you just pass it?
react just doesn't seem to like value={undefined}
Keeping the rest of your code the same, this fixes the error:
value={itemsInPersonCart === undefined ? "" : itemsInPersonCart}
(or you can use useState, rather than using undefined)
Does anyone know what theme he’s using?
I like tackling these then comparing your methods vs mine to see where I can improve. It would be cool if you also gave an idea of how long you think it would take a beginner to tackle the problem, so I know just how inefficient my times are.
9 hours
What’s the name of the extension that gives you the error messages next to your code?
Error lens
Thanks, learned a thing or two
hey Cody why you using *e.currentTarget* instead of *e.target* ?
currentTarget is the actual dom element that the event listener is attached to. target is the thing that triggered the click event (which might not be the actual button clicked but instead maybe an icon inside the button)
ur awesome to solve
hi, which vs code are you using?
bearded theme stained blue
I don't really see the point to use onChange to the input in that case, because you always have to hit "checkout" so you cam get it from form data once you set name of that input. Then you can easily check inside of submit function whenever it doesnt match your requirements (less than 0 in that case).
It is a good job but i see so many times people are using useState like that and I think it is not proper way to do that mainly because you are unnecessary rerendering stuff because of that. :)
I didn't really understand the timing process. I would have created an interval for each line since that's how a line would process practically. this was a cool problem though
yeah that would be interesting as well, each queue has their own interval because some cashiers are faster than others.
@@WebDevCody that sounds pretty interesting, I might give it a try :)
Good job babe!!!
Been working on this today, it seemed simple at first but setIntervals turned out to be pretty tricky to work with in React!
I don’t get in what real life problem I can use this approach… I mean it would be nice to have examples that actually deals with real dev problems not some general examples) cause as I understand your timer represents cashier work in this example
The point is to stress your problem solving abilities
why not just set min="1" on the input so you wont get negative or an undefined number? no need for JS here
My solution to this was awful lmao
It is 😄 set the state to 0.
For the addPersonToLine function, I think instead of using map with the setLines method you can probably just use the spread operator like
lines[lineWithLeast].push(itemsInPersonCart);
setLines([...lines]);
Some more challenging ideas:
- Each queue has its own interval using something like Math.random
- Add or remove checkouts using buttons
- Dynamically add or remove checkouts based if the line has more than 3 people waiting or total number of items exceeds 20 (in real world you would also have a limited number of checkouts and or staff)
- Store checkouts stored in a key value pair object such as Maps
good suggestions!
I just disabled the button like this ->