Відео

Waiting for next problem. Hope it will arrive tomorrow.

Learned alot! tried to solve it myself but couldn't at 1st go. thanks to you learned so many important and new stuff. <3

Nice explanation. I did it by using transversing the tuple array. I have one question though. Why you added multiple in Array prototype ? Shouldn't it be tuple's property?

I think using divs for bar is not a good idea, best way to represent any visualisation is by SVG or canvas

Great Stuff Yomesh Thanks a lot

quality content, thanks

Thank you sir it cleared my doubt

Thanks Yomesh, you are doing a great service to tech community.

import React, { useEffect, useState } from "react"; const Shape = ({ box }) => { const [boxState, setBoxState] = useState( Array(box.length * box[0].length).fill(0) ); const [count, setCount] = useState(0); const oneBoxSum = box.flat().reduce((a, b) => a + b, 0); const Remove = (cout) => { if (cout < 1) return; const newBoxState = boxState; const index = newBoxState.indexOf(cout); if (index !== -1) { newBoxState[index] = 0; setBoxState(newBoxState); setCount(cout - 1); if (cout < oneBoxSum) setTimeout(() => Remove(cout + 1), 500); else setCount(0); } }; console.log(boxState); useEffect(() => { if (count + 1 > oneBoxSum) { setTimeout(() => Remove(1), 100); } }, [count, oneBoxSum]); return ( <div> <h1>Shape Game</h1> <div className={`grid grid-cols-${box[0].length} gap-2`} style={{ width: "fit-content" }} > {box.map((bo, boIndex) => bo.map((b, bIndex) => ( <div onClick={() => { if (b !== 0) { const index = boIndex * box[0].length + bIndex; if (boxState[index] > 0) return; const newBoxState = [...boxState]; newBoxState[index] = 1 + count; setCount(count + 1); setBoxState(newBoxState); } }} className={` transition ease-in-out delay-150 ${ boxState[boIndex * box[0].length + bIndex] > 0 && "bg-green-500" } ${ b !== 0 && "border-2" } dark:border-white aspect-square w-20 h-20 flex items-center justify-center`} key={`${boIndex}-${bIndex}`} ></div> )) )} </div> </div> ); }; export default Shape; i have done like without seeing your video found some new learnings

Ideally the left and top offset of the container should be subtracted to calculate x and y of the circle.

I have one point to raise, at the time of selecting set over objects, you said it's not reliable, i agree with you on that but set is also not reliable because there is no guarantee of getting the data in the same order of insertion. May be we can use array with the checks of existing indexes

Amazing session Yomesh 👍 Please in future, explain each and every step like you have done here.

Great stuff!! One more addon, shouldn't the history reset once a new circle is added upon clicking on the board?

i am glad i found your channel! you are teaching some real world things apart from the only regular hooks kudos man you earned a subscriber

You can solve it by using two stacks, also can solve it by using an array of objects and pointer.

Hey i think your website is not properly functioning as some styling effects are not rendering properly and the code editor is very glitchy as some of the buttons are not working and are placed incorrectly

Really amazing. Learnt alot

Great !!!!! ❤

This is a very good question! Thank you!

Question link: devtools.tech/questions/s/how-to-build-circles-game-in-react-js-frontend-coding-challenge---qid---Y8acly7B5CmIVAaT5knP Practice with us: topmate.io/yomeshgupta Best coding practices: ua-cam.com/video/9g1rYWJvvzY/v-deo.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- Atlassian: ua-cam.com/video/-wow5ApdZ0Y/v-deo.html Uber: ua-cam.com/video/DCoIeGt4g7M/v-deo.html&start_radio=1 LinkedIn: ua-cam.com/video/6euTBVDCD6o/v-deo.html Facebook: ua-cam.com/video/7DJCpgc6V94/v-deo.html Atlassian: ua-cam.com/video/3OxMsnP78zg/v-deo.html Klarna: ua-cam.com/video/Py_bXjSMyTc/v-deo.html MakeMyTrip: ua-cam.com/video/yHg0bvNqJEQ/v-deo.html Microsoft: ua-cam.com/video/Iv1gZN900uc/v-deo.html AWS: ua-cam.com/video/PFo1ZQBv4hA/v-deo.html Custom Loader: ua-cam.com/video/E01XdDQgzDM/v-deo.html

Really Nice. Would like to learn more. Subscribed and bell icon clicked.

Two query : const removeFill = ()=>{ if(allSelectedKeys.length){ const currentKeys = allSelectedKeys.shift(); setClickedCells(prev=> { const updatedKey = new Set(prev); updatedKey.delete(currentKeys); return updatedKey; }) setTimeout(removeFill,500) } } setTimeout(removeFill,100) why we are doing const updatedKey = new Set(prev);

Finally, i found a gem for frontend by your videos.Please keep posting.❤

Awesome 🎉

Imagine being asked this question in 45 minutes 😂. I mean people shouldn’t judge a candidate based on a single question . Many would freak out and won’t be able to build it in that period of time.

Great video. nicely explained and well-structured approach. One minor improvement or a slight miss is in the BarChart component, the useMemo should have data as inside the dependency array. a linter would anyhow point that out. but since the data could be anything and could change as well, the derived values should be dependent on it.

This video I watched randomly, but worth for wach learn many things. Thank you

First time i watched, i realized many things i dont know 😅😂 but i enjoyed and i will watch again and again, not only for logic also for improving eng😂

TIL that returning a primitive value from a constructor function returns the implicit this. Thanks for the explanation. Just a follow up, if we'd want to make sure that the constructor function is invoked using the "new" keyword, we could also use `if(!(this instanceof ConstructorFunction)){throw new Error("Call me with new keyword")}` right? I was wondering what's the difference between using `new.target` and `instanceof`?

Nice! was intimated at first by the question but the way you explained - beautiful. Good content 🔥

Im waiting for your response bro!

I recreated your Uber interview shapes question in Tamil and would like to post it online. Additionally, I want to solve the Atlassian problem and create a video about it. May I have your permission to do so? Brother!

Thanks Yomesh, I would like to mention that 5th point in functional requirement of this question is a bit confusing "During de-selection, user should be able to select a new box as in disable any box interaction." Can you please fix it.

Thanks man, one thing that came to my mind is while unloading, instead of using unloading state to control the click event, we can get the parent div element and make its pointer-events to none

Awesome tutorial where each bit is full of concepts 🎉

do companies ask you to write plain css or are we allowed to use tailwind? I know most of the time its up to the interviewer but what is the usual case scenario do they allow or now?

Are we supposed to use libraries like Framer Motion during interviews?

Every well explained ❤

Roadside coder also solve this type of question few months back

Question link: devtools.tech/questions/s/how-to-build-an-interactive-jira-velocity-bar-chart-atlassian-browser-coding-round-interview-question---qid---H24LHAOpjxtuol41iGn8 Practice with us: topmate.io/yomeshgupta Best coding practices: ua-cam.com/video/9g1rYWJvvzY/v-deo.htmlsi=3KR-lnNf7GCcE_RU Other top questions -- Uber: ua-cam.com/video/DCoIeGt4g7M/v-deo.html&start_radio=1 LinkedIn: ua-cam.com/video/6euTBVDCD6o/v-deo.html Facebook: ua-cam.com/video/7DJCpgc6V94/v-deo.html Atlassian: ua-cam.com/video/3OxMsnP78zg/v-deo.html Klarna: ua-cam.com/video/Py_bXjSMyTc/v-deo.html MakeMyTrip: ua-cam.com/video/yHg0bvNqJEQ/v-deo.html Microsoft: ua-cam.com/video/Iv1gZN900uc/v-deo.html AWS: ua-cam.com/video/PFo1ZQBv4hA/v-deo.html Custom Loader: ua-cam.com/video/E01XdDQgzDM/v-deo.html

First comment

Very interesting problem and you explained it really well, thanks ❤

Your explaination to every question is just lit...🔥💯

Thank you! I am learning the way how you are explaining tradeoffs why to DS to choose , explaining technicalities

function cal(num) { this.result = num; } cal.prototype.add = function (num) { this.result += num; return this; } cal.prototype.sub = function (num) { this.result -= num; return this; } cal.prototype.val = function () { console.log(this.result) return this; } Here's my solution returning this object after the operation is done in the function. Returning this makes us able to call the function which is defined for the instance of the cal.

16:40. you can use default vscode option to organize import and remove unused import. press F1 and type organize import then press Enter

Please make more videos like these. Despite being a developer with 3 years of experience, I have literally learned at least 3 to 4 new things in just 26 minutes of absolutely smooth explanation.