Building an Animated Circles Game in React.js | Frontend Coding Challenge
Вставка
- Опубліковано 25 вер 2024
- In this video, we will build an animated circles game in React. We will implement a function where a circle would appear on the screen where a user clicks. We will look into features like undo, redo, and resetting the board. It is a fun UI challenge!
Question link: devtools.tech/...
Support Us: topmate.io/yom...
Try now using the links below
devtools.tech/...
devtools.tech/...
You can support our channel via:
rzp.io/l/suppo...
devtoolstech.g...
www.buymeacoff...
************************************************************
Devtools Tech is a UA-cam channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".
Interview questions: devtools.tech/...
Interview resources: devtools.tech/...
Hidden Gem: devtools.tech/...
Team Members:
Yomesh Gupta
Portfolio: yomeshgupta.com
LinkedIn: / yomeshgupta
Twitter: / yomeshgupta
#javascript #ai #web #frontend #interviewquestions #devtoolstech #code #programming #developement #devtoolstech #code
***********************************************************
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
Amazing session Yomesh 👍
Please in future, explain each and every step like you have done here.
Okay. Do suggest topics you want me to cover. Thanks!
It would be great, if you could teach us design patterns like, pub-sub, singleton. Many teachers just touch upon the basics, a detailed tutorial is missing. Please fill this gap Yomesh 🙏🏻. Someone at your experience can teach it nicely and that too with clear explanations.
Got it. Thanks for the suggestions. I will definitely look into these!
Great stuff!! One more addon, shouldn't the history reset once a new circle is added upon clicking on the board?
Ya, that is right. I didn't consider that. Thanks for suggestion! 🙌🏼
Thanks Yomesh, you are doing a great service to tech community.
Thank you so much for the kind words! ♥️
Great video.. Still want to add one point.
Instead of adding disabled classes u can directly take sudoelement for button disable
Why the sudo element?
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
Hey, could you please share a screen recording to team.devtools@gmail.com?
It would help us a lot in debugging. Thanks!
@@DevtoolsTech Ok I will do it
This is a very good question! Thank you!
Thank you! More coming soon. 🙌🏼
What's that random color picker on your screen?
It is a website called flatuicolors.com
@@DevtoolsTech Great resource
Ideally the left and top offset of the container should be subtracted to calculate x and y of the circle.
By container you mean the board?
Waiting for next problem. Hope it will arrive tomorrow.
Yes. Next video will be out tomorrow.
Amazing, thanks Yomesh
Thank you!
Great Stuff Yomesh Thanks a lot
Thank you! 🙌🏼
You can solve it by using two stacks, also can solve it by using an array of objects and pointer.
Array in in the video is used as a stack only. Since, JS doesn't support stacks natively or doesn't have STL, I didn't want to create a stack separately and used an array.
I just found two ways to solve it
Do share if they are different from mine!
Really amazing. Learnt alot
Great !!!!! ❤
Thank you! 🙌🏼