Solving Frontend Interview Question for Practice | JavaScript Coding Challenge

[@DevtoolsTech]

Question link: devtools.tech/questions/s/how-to-build-color-memory-game-in-react-js-frontend-coding-challenge---qid---1wFNDiwjxcKwrHL65SN5 Practice with us: devtools.tech/questions/s/how-to-build-color-memory-game-in-react-js-frontend-coding-challenge---qid---1wFNDiwjxcKwrHL65SN5 Updates: 1. We can improve the handle click logic by adding `isRevealed` to the condition. 2. We can add a `disabled` property to the button with the value isRevealed.

[@jaidhingra2811]

Yes, using some flag makes it easier to handle. We can make something like this: { id: 1, bg: '#ffff', isRevealed: false } for each box state. By this we can prevent handleClick from clicking the box again as you mentioned in above comment and easily manage other things in handleClick. I just stuck while shuffling part because I don't know any algo by which I can achieve this in O(N). So, on google search I found algo named 'Fisher-Yates shuffle' Thanks for this great question

[@yomeshgupta]

@@jaidhingra2811Lodash shuffe uses the same algorithm for shuffling!

[@meghabathla7167]

That is a good explanation, though the question link has no utilis file. While showing the utilis file it was partially seen becs' the browser was open on another side.

[@DevtoolsTech]

Question link has a utils file. Go to the question link then check the Files section in the left sidebar. I solve questions on the platform so that I have same setup as everyone else. Please check.

[@meghabathla7167]

@@DevtoolsTech thanks for sharing

[@Sv2059J]

Namaste sir 🙏🏻 Although my comment is not related to video but I want suggestion from you I am a fresher (BCA passed out 2024) looking for job. To get a react developer job by year end, if I make 4 big deployed projects. Out of those 4 1) How many should be in Vanilla react 2) How many with React + NextJS I am proficient in JavaScript and have some knowledge of react As a fresher how much can i expect purely based on techstack knowledge Dhanyawad 🙏🙏

[@DevtoolsTech]

Namaste 🙏🏻 You can one big project if you have the time using React + Next.js which should be actual meaningful web-app. Deploy it and try to have some users on it. Take inspiration from existing products to build a clean and delightful UI.

[@Sv2059J]

@@DevtoolsTech Dhanyavad for your kind reply sir 🙏🙏 I have one more doubt. Hope you will clear that too I am proficient in Javascript. Like completed all the important topics of CSS and JavaScript and made an Amazon clone in JavaScript during my sixth semester in BCA. Since I want a job by THE YEAR END (3 MONTHS LEFT), Two kinds of videos are on my KZbin learning list. 1) 25 machine-coding round-react projects 2) ReactJs topicwise theory videos HOW SHOULD I APPROACH REACTJS TO COMPLETE MY FRONTEND PREPARATION JOURNEY? I am more comfortable with the project videos, but that way I might miss some theory-related topics.

[@Sv2059J]

@@DevtoolsTech For the resume, I have 1 vanilla JavaScript-based Amazon clone. On Udemy, I have 2 projects of John Smilga. 1) Job-searching website (CRUD) 2) Github user search-based short website Are these projects appropriate for the freshers role and can be COMPLETED IN 2 MONTHS OR YOU WILL GIVE OTHER SUGGESTIONS?

[@DevtoolsTech]

For any level, I would say ask yourself the following questions 1. Is my project impressive? If someone else made it then would I be impressed by it? 2. When I see a product like Netflix, Amazon, Flipkart, and so on then I see my project, do I get a similar wow feeling from the whole UI and UX of my work? 3. Are my projects useful or just did for the sake of doing it? You will get an answer yourself from the above questions.

[@DevtoolsTech]

For freshers, 1. Prepare DSA 2. Solve machine coding round questions using vanilla js and a framework. 3. Prepare fundamentals with good examples. For example, closure and where you used it in your project? 4. Learn to explain your project and what learnings you had. Do these and refine your approach may be in a month!

[@snehalyelkar]

In the handleClick method of the Box component, is it a quirk that the DEFAULT_BG_COLOR can be one of the possible grid bgColors, and by explicitly returning it, we won't handle its match?

[@DevtoolsTech]

Yes, that is correct! Good catch! Two things to handle in that functiom We can add a check if isRevealed is true then explicit return as an early escape. We can update our getRandomColors method to handle blacklisted colors. You can also do some custom logic in the component if we don't want blacklisted colors change.

[@somnathsahoo5547]

Great problem sir❤

[@DevtoolsTech]

Thank you sir!

[@somnathsahoo5547]

Sir can you guide me?

[@somnathsahoo5547]

Please 🙏

[@DevtoolsTech]

Guide how?

[@prabhatkashyap8333]

when we practice should we practice in vanilla js or with some framework like react??

[@DevtoolsTech]

You should practice in both. Some questions in frameworks and some in vanilla.

[@prabhatkashyap8333]

@@DevtoolsTech and if we are preparing for senior frontend then, how much time should be given to 1 question to get it solved?

[@DevtoolsTech]

Totally depends upon the question's complexity level. Usually a machine coding round interview lasts 60 mins max. You should always try to finish a question 10 mins prior to the allocated time so that you can a buffer for questions, enhancements, or any unexpected issues.

[@prabhatkashyap8333]

@@DevtoolsTech ok cool thanks