This React challenge is fair game for a junior web dev interview 

I started watching the first 2 minutes and really wanted to finish it, but I am going to build it then watch how you did it. I really like how you talk and your style of tutorials, keep it up!

Keep these kinds of videos coming, they are extremely informative and enjoyable!

This was great. Hope you do more like this or a more practical "Types of web dev problems you'll most likely come across or be expected to solve/implement" series.

3:10 if you want to have something fast on the center of the body just do: body { display: flex justify-content: center align-items: center height: 100vh }

I like these type of videos. It helps to see the entire process. When I first started coding, I was under the impression you must write perfect code from the start when reality, it's all about getting something, literally anything to work first and build upon it. Then, you can refactor and improve the code later. Good job, keep it up!

It is very challenging and helpful to master your logics and fundamentals, keep them coming ! doing a great job .

Fresh project is amazing to watch and follow till the end

love that you started by rolling your own solution for generating random numbers. if it works its a solution! made me stick around for the whole tutorial :)

Instead of defining the characters used in hex in an array you could have used: function getRandomNumberString(base = 16, length = 6) { const max = Math.pow(base, length) const decimal = Math.floor(Math.random() * max) const hexString = decimal.toString(base).padStart(length, '0') return hexString }

You're really cool dude. Awesome,how to explain more detail about code and refactoring your code. 🎉

OMG im so happy at first I thought I was not going to be able to do it, but i did it in 25 minutes amazing video and now cant wait to watch the rest of it to see how you did it. This was super fun please do more especiallly so we can practice.

Really like your videos. Keep it up!

I like using rgb() instead of hex for this as well. Would be a very elegant solution with just 3 random values between 0 and 255. Something like this: const r = randomNum(0, 255) const g = randomNum(0, 255) const b = randomNum(0, 255) const color = `rgb(${r},${g},${b})`

I was asked to make a similar kind of game few weeks ago . Its indeed very common.

Nice. Enjoyed this challenge alot.

Another great video, it's great to see the thought process and not just you reimplenting one you did earlier like some do. I do have a question though, how would you make the wrong/correct answer text disappear so that after so many seconds so you can move to next colour without it already been there.

I was able to do this within 15 minutes and I'm so proud of myself. This is month 3 of learning react and its so much fun

Great video, WDJ! Your videos provide great how-to’s and tips in real life coding scenarios. Thank you! What type of intellisense extensions do you use? Have you posted a video on this?

Cool challenge! There's some bad habbits I see in your code. 1. Using useEffect to initialize the state. Just add it as the default value for the state. (only use useEffect if the init state is async). -> useState(() => your init return ) 2. Using arrow functions turns the function also anonymous, so the function name will not come up while debugging. So using the old "function ()" actually will speed up debugging when the project scales.

1) You can use a string of chars instead of an array...js can iterate over it with charAt 2) no need for state of validation...onClick check if value is right then render proper message. 3) setWrongColor(value===currColor)...avoid verbose Boolean statements. 4)migrating pickcolor...mind the scoping...this is semantic but mind the scope...make it an import or keep in component if it only serves it. 5) note the button wrapper exceeds the width of the color div on occasion...css should factor max content

I hesitated to do this before watching because I thought I wouldn't be able to even as working as a grad dev lmao. But I managed to do it and only looked up the hex value generation so a bit of honest copium there as I had no clue otherwise. But other than that, a nice challenge. Also centering a div in vanilla css is surprisingly difficult and made me realise using css libraries is a crutch that I gotta work on/get rid of. Nice vid mayn

love this kind of video

Hexadecimal colors a red flag for Jr developers? Yikes. I'd say maybe a red flag for Jr designers not devs.

Before I watch, my initial thought would be: create three buttons. Assign these buttons 3 random hex values to inner text. Put these values into an array. Use math random to choose one of the 3 in the array. Chosen color changes the background style of the colorBox div. Then, if etarget button's inner text === the colorBox div, return success or fail message. Set a timeout to return state to null and then call original function to redo the random selections. An addition I would make would be to have a correct vs wrong score counter that goes up to 10, and returns a % correct choices, to give the user feedback on how well they did overall.

Thanks for this, just did this in an hour and felt really good, even though my answer isn't as elegant as you. I used answerIndexState to randomize the button that display the state, and a colorState object that has the answer and 3 random answer. Like this : function generateColorState() { return { answer: generateRandomColor(), randomOne: generateRandomColor(), randomTwo: generateRandomColor(), randomThree: generateRandomColor(), }; } function generateRandomNumber() { return Math.floor(Math.random() * 3); } // App.jsx const [colorState, setColorState] = useState(generateColorState()); const [answerIndex, setAnswerIndex] = useState(generateRandomNumber()); {answerIndex === 0 ? colorState.answer : colorState.randomOne} {answerIndex === 1 ? colorState.answer : colorState.randomTwo} {answerIndex === 2 ? colorState.answer : colorState.randomThree} not as elegant as your solution. but at least i managed to figure this out without stackoverflow :)

These challenges are gold 💯

parseInt only takes string arguments. Good video I loved it

Do you use some extension to get error message in-line with the code? Or is just typescript? Thanks! Great video

When he tried setting the height of the page , too real man....

Cool video to show of how to use react. I never used it. But I don't generally like how you'd introduce dependencies for whatever you need such as shuffling etc. Generating a color could be simplified to a simple math.random() call. Color is a hex 3 byte number. Which means it ranges from 0 to 2^24, meaning colour is in range of 0 to 16777216 (including 0, which is pure black). So you just generate random number in that range and parse to hex string. Easy as that.

Instead of creating enum, you could just store selected color and compare it to the generated one.

Hi, thanks for the videos. I had one more question where we need to build a soccer score board with API. they where looking for automatic refresh scenarios too. Can you solve it and upload a video please.

Great Challenge for junior

at 6:20 where you made an array with the “alphabet” of available characters, you could just put all of them into a string (convert ["a", "b"] into "ab") and use the js split operator to cast it into an array. it ends up with the same outcome but it looks cleaner because its no longer a really long array of characters.

For generating a random single character, would the pseudocode below be considered better than explicitly defining the list - Generating a number between 0-15 (including 0 and 15 ofc) Checking whether the number was greater than or equal to 10 if greater - const min = 55; // 10 less than capital A return String.charcodeat(min + generated) else if less - return generated.toString() Or would it generally be considered too convoluted?

I actually did this challenge, probably not the best code...but i did it. Thanks for the video, i like a new challenge.

You did just call a function with "Random()" in it, pure, :D My heart aches :P. A pure functions return value should be determined by only it's arguments (and should have no sideeffects, math.random() breaks both of those). I'd also encode the "NoResult" in the enum.

This is awesome

Good job babe!!!

nice vid!

Company hr: build a facebook app in 30mins

Hey, thank you for kinda exercice ! Guessing myself if the correct/wrong logic could be "refactored" in a useEffect ?! will try :) Oh and just, would you put something soft under your keyboard so that isn't any "echo" when you type something ?! It's not crucial but a bit disturbing

I’d say a red flag would be trying to reinvent how to generate a random hex color instead of searching for the best existing solution first.

the best junkie developer i ever seen in my entire life 🗿👌 thanks for video

which do you use visual studio theme?

I like this challenge. Simple, but different, and actually produces something of more substance than boring counters and toggles. Though if you wanted to use an effect to set the initial color, you should use `useLayoutEffect` instead in this situation, otherwise you might get a flash for the initial render before the color is set since the component will render twice. Personally I would avoid these effects entirely though by just setting the color as the initial value in `useState`, that would only render once. Another note is that you actually don't even need to randomize the array order, you could just sort it using default alphabetical order. That would still work since you never know which position the actual color is gonna get. Personally when setting optional state value types, I like to just set the type and leave the default empty (this is just a personal preference though). So `useState()` would be the same as `useState(undefined)`. I like your thought process for troubleshooting :) Simple typos can be dreadful. I have more than once set a default value to a variable for testing and then forgotten to remove that after writing to logic for that value, and gotten confused as to why it keeps getting the wrong value.

Would a demo like this be conducted live or would this be like a take home kinda project to finish during the day? Just starting to prep for interviews.

const genRanHex = (size: number) => [...Array(size)] .map(() => Math.floor(Math.random() * 16).toString(16)) .join(""); genRanHex(6); /* * Here is an explanation of each step: ^ 1.[...Array(size)] creates a new empty array with "size" number of elements. ^ 2. .map(...) applies a function to each element of the array created in step 1. The function inside map() is an arrow function which does the following: ! 1. Math.floor(Math.random() * 16) generates a random number between 0 and 15. ! 2. .toString(16) converts the random number to a hexadecimal string. ^ 3. .join("") joins all elements of the array created in step 2, into a single string. ? So the final output is a random hexadecimal string with the length of the input size. */

Didn't know CaptainSparklez was so good at coding

If I built this without looking and without stackoverflow, should I start applying to jr roles? Like is this a solid indicator that I am competent enough for a jr role?

how is he getting errors display inline like that

i would ask simikar question to mid-senior devs too and check how they manage the code and how long it takes them to finish it

19:00 Why not {result && a || b}

In an interview context, do you mean the interviewers would want you to live code this in front of them, or give you some time to solve by yourself? I'm at the point where I could make something at this level, but might falter if under short time constraint and scrutiny from the people interviewing. I could talk through my process either way but I'm curious. Great content, thank you!

"If a junior can't do this, it's a red flag" 6:23: "Let me manually type a random numbers array" :D

I was able to do this in about an hour. Would that be an acceptable timeframe?

Should probably handle the case where the random generated strings overlap with other answers. Chances are low but it would be bonus point especially when you’re junior.

I am confused about one thing here, in generate colors u call setColor and then setAnswers, problem for me is that it seems that it takes some time to get the color so when setAnswers is called color has not been set yet, so setAnswers is called with actual color being undefined, i solved it by using useEffect but how come it works with yours.

This is fine as long as it isn't expected to be done live. A bit on the extreme end imo, maybe someone with .5-1 yr of experience or something like that.

neat.

Whats the extention where it says something expected when typing code?

Why would you need to know hex color by heart ? Aside from a few standard colors just so you can test things real quick.

Nice video but this whole getRandomColor function could just be written like this: return `#${Math.floor(Math.random() * (16 ** 6)).toString(16).padStart(6, '0')}` Hex is base 16, there are 6 hex chars in the color definition, so 16 ^ 6 should give us all the possible colors there can be. Generate the random number, floor it, cast it to string, add the zeroes in the beginning to make sure the code is correct. Hard-coding this stuff is good as well, the viewer actually can understand how the algorithm works, but it is not an efficient way to write code. Also, as mentioned, the alphabet can be made like this: "01234567890abcdef".split()

For generating a hex, I think the way you did it might be how a Jr dev would do it. However, I think the most cleanest way is as follows: function getRandomHex() { const red = parseInt(Math.random() * 255); const green = parseInt(Math.random() * 255); const blue = parseInt(Math.random() * 255); return `#{red.toString(16)}{green.toString(16)}{blue.toString(16)}`; }

This is such an odd thing to make in react. This could easily be made in pure JS, HTML, and CSS. I just did it in fact and it was pretty easy. Obviously this is easier in React, but it seems excessive to use a framework.

I thought the red flag is not able to build this, no guessing the actual color

Cool

Commenting using adept experiments

Are you allowed to be FE developer if your right button is not aligned with a right side of a color block?

One thing that annoys me is "take home" tests. Losing time I could be using on applications or other companies. Need to pay me to do it or pass on me. I don't do them at all.

"if they couldn't do it it would be a red flag", struggles to center div 🤣

If you can center a div first try I think you should get the job.

Few years a go I did a clor flipper and the way I generated a random color was this let randomColor = Math.floor(Math.random()*16777215).toString(16); Then you just need to concat '#' infront and you are good to go. But as you said you, you never get the best solution at the moment. This is how it is. Good job and interesting task I would say! :)

By now I’m pretty strict when in comes to unnecessary useEffect usages. So in an interview with a senior I would have asked the interviewee to refactor it without useEffect.

That’s all you need to be able to do, for a junior Dev position?

LMFAOOOO, a JUNIOR web dev should be able to do this?! Holy shit bruh...i'm 10 yrs in and I'd need to Google or stack overflow this, if i had to live code it? it'd be over for me. Guess i AM a bad developer :-(

This is perfect, but now the applicant can just find this video and cheat. 😂

Do you have a patreon?

This is way to advanced for a junior dev position

I like this challenge for a junior developtment, I would appreciated more if the junior dev would be able to identify what elements could be wrapped into a new component because that would mean they are able to identify differents element and how to separate responsabilities and make components more testeasble and reusables.

You shouldn't use margins to position elements or act as padding. Rather use flexbox gap for the bottom buttons. Would have failed you for that ;)

To avoid multiple generateColors calls, I suggest to use the useEffect hook this way (sorry for my english :) ): const [color, setColor] = useState(undefined); const [result, setResult] = useState(undefined); useEffect(() => { if(result === Result.WRONG) return; generateColors(); }, [result]); const handleAnswerClicked = (answer) => { setResult(answer === color ? Result.CORRECT : Result.WRONG); }

Good work! ps: react is so unatractive to me...

3:10 red flag xD

FD not a colorvalue

I think your expectations for a junior are quite high if it's a red flag when the person is not able to make a game like that on the spot.

Actually this(for me) is cool and easy task. I jusy have done few recruitment project and one of them was to create full stack app, which I have done. Still rejected 😂

This is impractical when vs lets you know what color you are picking with extensions, Other than an interview test I don't see the point of this.

"Red flag for junior developers"... Man can't even center a div.

I built out this project on my own prior to finishing the video. I stopped at the part after I understood what the question was. I then compared your final result with mine and ended up fairly similar. I didn't use typescript. I ended up building a custom hook to generate the color and abstracted out all the setup for color randomization. Since I didn't start with typescript I ended up having to use another state variable for if it was a new color to fix it rendering the "wrong" state on load. Overall great video. Love your thought process and how you tackle certain things. One main difference I noticed is i used a 1 liner to generate the random hex instead of the array you created. `#${Math.floor(Math.random() * 16777215).toString(16)}`

Looks like a fun exercise, keep making video's like this 👍 but tbh HSL is better and easier to work with

You don't have to cramp hexa codes, please don't mislead new learners

OMG you got rejected at minute 3

You really need to brush up on your CSS, friend. So many times you could've used a (much) better solution (just setting min-height on the wrapper, using flexbox or grid, etc.) and I just see you struggle to align things by hard-coding it.

That’s so easy it’s ridiculous

If this guy is a 'senior webdeveloper' then we can all make it. What a fool, can't even center a div :D He wouldn't pass a interview in any of the big companies.

Cancel in-person coding interviews

Nice clickbait

lmao webdevs are a joke

To generate a hex color you can just simply convert a number to hex using .string(16) where 16 is the base. getHexColor() { const MIN = 0 const MAX = 16777215 const randInt = Math.floor(Math.random() * (MAX - MIN) + MIN) return `#${randInt.toString(16)}`.toUpperCase() }