defer attribute : downloads the script file asynchronous but will run it after all our dom html and css are loaded. async attribute : is also downloaded asynchronous but will immediately run after it is downloaded, even though our html css file are not loaded , which can cause errors!! So, many developers or most of the time we use defer attribute like inside head tag❤ Sir, I have filled the for, it’s been months but still i haven’t gotten the mail for an interview
For the circles intersection problem we can also use Euclid's distance formula which is Square root of((x1-x2)²+(y1-y2)²) And check if the distance is less than sum of radius, if yes (intersection) else (no intersection) Also for the last part of interview if the circle lies inside another circle than its a case of total overlap so in order to check that we can simply use if distance is less than RADIUS1 than the second circle is surely lies inside first circle so in that case "total overlap'
literraly brother you just nailed it. I could not think even how to do it. btw your googling skill is also good as you can understand it by seeing the examples I can not do it.
Really this interview was very good. It was inspirational. I liked the calmness and positive attitude of Avinash. From this interview I learned a lot of things.
This was the best interview i have ever seen , sir please do this kind interviews .Like if ur taking interview for fresher u can also add some extra questions like this it will be helpful for us.
@@Tech-NOOB let res1; //res1 = undefined res1 = res = undefined = truthy value Hence the promise is resolved. Mere khayal se res1 = res means the parameter which is res i.e resolve in full form is having an undefined value from the let variable res1. Eve though res1 is undefined but it still exists hence resolve from the call back function (res,rej) becomes true and hence the event listener will successfully resolve the promise since the promise is resolved via res1 = undefined = res (i.e resolve). He should have given res1 = 1 or any value instead because assigning any variable value is undefined is a bad practice. I hope you find this answer helpful, if I'm making a mistake then anyone can ask me and let me know.
my logic for intersection is that we can get a distance between two circles by using this formula `let distance = Math.sqrt((arr["X"]-x)**2+(arr["Y"]-y)**2)`. This is a basic distance formula i.e. root_under((x2-x1)^2 + (y2-y1)^2). This will give us the distance between the centers of two circles and if the sum of the radius of circle1 and circle2 is greater than or equal to the distance between their center circles are intersecting. I think this will work but please consider some margin of errors.
Thanx for the nice mind broggling questions. It took me 2 to 3 h to code the machine coding question. But I am very happy that I have coded it successfully without any help.😊
Thank you for these amazing videos... I have tried both output based question of promise and the machine coding circles problem and I got it and solved somewhat in easy way before watching the solution. It feels good😊... I'm a fresher preparing for frontend interview. May be idk how I'll perform in pressure.
I am also starting Frontend Interview Preparation, with an amazing group where we discuss important questions in Zoom meetings regularly. if anyone who is really seriously wants to join let me know.(MERN with JavaScript)
For static value as the interviewer write height and width is defined previous and he know the value then he substarct only half of that circle.style.left = e.clientX-50 // it half of the total width because it take 100. Circle.style.top = e.clientY -50 as half of total height . And just append child in the document. Document.body.appenchild(circle) For dynamic value like when I don't know the what the width height of the circle so the so now we write. First we make the defined the position color and width and height(In random value this Manas we don't know); Now we append the circle in the document. Document.body.appendchild(circle) Circle.style.top= e.clientY - circle.offsetHieght/2 Circle.style.left = e.clientX - circle.offsetWidth/2; That shit if you don't value then append the circle to body to know that height and width and get value using the method of elements.offsetHeigt, elements.offsetWidth. I hope you clear this full code of full optimised and dynamic value action that take center and create a circle where you click. document.addEventListener("click", function(e){ const circle = document.createElement("div"); circle.className = 'circle' circle.style.position = "absolute"; circle.style.width = "100px"; circle.style.height= "100px"; circle.style.backgroundColor = "red"; circle.style.borderRadius = "50%"; document.body.appendChild(circle) circle.style.top = e.clientY - circle.offsetHeight/2 +"px" circle.style.left = e.clientX -circle.offsetWidth/2 +"px"
at 48:00, so async function is just a sugar coated way of making promises hence it will be pushed on to miscrotask queue which will be executed asynchronously by event loop without blocking the main thread. Code outside of async function will work on main thread asynchronosly and inside of async function it will be synchronous since await keyword will block the execution of lines of code inside function hence if at line 5 there's an await then after promise resolves execution inside async function will continue from line 6. Any improvement to this is appreciated
i hope you will create more such raw interviews where both actually involved and think like programmer, even after 2.5 years of experience i got to know many things
Instead of taking it as hypotenuse, you have to find shortest distance to between circles, compare it with the sum of both circles radii, if shortest distance is less than equal to sum of radii its intersecting, else not
@@procodrr const distance = Math.sqrt(deltaX*deltaX + deltaY*deltaY) where deltaX and deltaY are mode of substraction of x,y co-oridnates. Also hypo is made of this formula.
the span tag still follows the box model. the reason you described is not well enough to decline it. the problem is you don't have enough screen width to cover up the content of span then it will auto wrap to new line. if you have enough space it will be like box model. so you can say by maintaing aspect ratios of the element every element in the html is like box model.
I don't know why he wasted so much time in finding the simple logic, of finding distance between two coordinates and its diff with sum of radius, apart from this, he has good knowledge of html, css, and js and he played well with all these. Kudos!!!
I think in the intersection of circle question... If we find the Manhattan distance between the two circle center and if its is less then equal to sum of both radius... Then we can get the answer. Formula: sqrt((x1-x2)^2 + (y1-y2)^2)
@@shubhamjha2036 I studied ECE from tier 3 college when I was in third year I wanted to implement something which I learn so out of curiosity I started learning web development using youtube I started with code with harry, and did one course on web design on coursera based on that and Programming which I studied for placement I cracked multiple jobs in MNCs and started my journey as developer since then I am continuously working and learning from resources available on internet.
38:15 Sir I have successfully created a promise with pending state without using promise keyword Code --> async function createPromise() { return "promise is resolved"; } console.log(createPromise().then((data) => console.log("data",data))); How works :- Async function always return a promise either we will return something or not and if we console the function then the return value be a promise with fulfilled state and we know that we can call then() method to a promise either it is fulfilled or not and here the concept come that every then() method return a promise with pending state. So that way I have successfully solved the question.
Yes, that is 100% correct. That promise will be pending for a moment and it will resolve immediately. So yes it is technically correct but we can't control that promise's state. Thanks for providing this solution.
Amazing interview. After seeing this i have some question. I have never done any interview before so enlighten me a little, - Is it normal for a interviewer to help the applicant in an interview?
![[ Live ] React JS Interview 🤯 | Frontend UI Questions 🤒](http://i.ytimg.com/vi/U9sDK8zTJ8Y/mqdefault.jpg)
I have never seen a better JavaScript interview than that.
same
try looking for another one's
defer attribute : downloads the script file asynchronous but will run it after all our dom html and css are loaded.
async attribute : is also downloaded asynchronous but will immediately run after it is downloaded, even though our html css file are not loaded , which can cause errors!!
So, many developers or most of the time we use defer attribute like inside head tag❤
Sir, I have filled the for, it’s been months but still i haven’t gotten the mail for an interview
Couldn't be more better. I have learned a lot from this interview. Please upload more interviews like this in future!
Good Candidate, interactive + pushing him self towards solving problems taking baby steps to reach closer to expected output which is good.
For the circles intersection problem we can also use Euclid's distance formula which is
Square root of((x1-x2)²+(y1-y2)²)
And check if the distance is less than sum of radius, if yes (intersection) else (no intersection)
Also for the last part of interview if the circle lies inside another circle than its a case of total overlap so in order to check that we can simply use if distance is less than RADIUS1 than the second circle is surely lies inside first circle so in that case "total overlap'
literraly brother you just nailed it. I could not think even how to do it. btw your googling skill is also good as you can understand it by seeing the examples I can not do it.
always learn something new - yes we can use await outside async function defining by type='module' in a script file
Really this interview was very good. It was inspirational. I liked the calmness and positive attitude of Avinash. From this interview I learned a lot of things.
This was the most interesting interview on your channel, sir.
This was the best interview i have ever seen , sir please do this kind interviews .Like if ur taking interview for fresher u can also add some extra questions like this it will be helpful for us.
Perfect interview process man, i learned a lott, lots of love man,
yes
29:40 , another way to resolve promise only when the button is clicked..
let res1;
const pr=new Promise((res,rej)=>{
res1=res;
})
document.querySelector('button').addEventListener('click',(e)=>{
res1('resolved successfully');
console.log(pr);
})
What is happening inside the promised call back function How the res1=res working ?
@@Tech-NOOB
let res1; //res1 = undefined
res1 = res = undefined = truthy value
Hence the promise is resolved.
Mere khayal se res1 = res means the parameter which is res i.e resolve in full form is having an undefined value from the let variable res1. Eve though res1 is undefined but it still exists hence resolve from the call back function (res,rej) becomes true and hence the event listener will successfully resolve the promise since the promise is resolved via res1 = undefined = res (i.e resolve).
He should have given res1 = 1 or any value instead because assigning any variable value is undefined is a bad practice.
I hope you find this answer helpful, if I'm making a mistake then anyone can ask me and let me know.
but the question here is the promise needs to be resolved after clicking the button in your code it is resolved then and there in the declaration.
@@fitnessforlifetamil3936 no, i am just assigning the reference of res intro res1, i am resolving the function later in the event listener
Machine code was a good question. I tried it and it was easy for me. Great confidence boost.! For an engineer, math should be easy
I found only two interviews interesting.......one is ankit Tripathi one......and now another this one
ruclips.net/video/MPY-SU1VzRI/видео.html
You will like this one as well.
@@procodrr I saw this but screen was smaller so not able to got much
can you please share that ankit tripathi interview video link
Can you give ankit tripathi video link
@@jayshah4456
Ankit Tripathi Interview: ruclips.net/video/ZEhjgpTdkqo/видео.html
my logic for intersection is that we can get a distance between two circles by using this formula `let distance = Math.sqrt((arr["X"]-x)**2+(arr["Y"]-y)**2)`. This is a basic distance formula i.e. root_under((x2-x1)^2 + (y2-y1)^2). This will give us the distance between the centers of two circles and if the sum of the radius of circle1 and circle2 is greater than or equal to the distance between their center circles are intersecting. I think this will work but please consider some margin of errors.
Such a confident and presentable guy... This video really taught me how to confidently give answers in interview. Thank you so much..❤❤
Thanx for the nice mind broggling questions. It took me 2 to 3 h to code the machine coding question. But I am very happy that I have coded it successfully without any help.😊
I have solved similar question in leetcode regarding 2d matrix
Here it is the simpler React version: Enjoy 😀
import React, { useState } from 'react';
const CircleIntersecting = () => {
const [circles, setCircles] = useState([]);
const handleScreenClick = (event) => {
const x = event.clientX;
const y = event.clientY;
const radius = Math.floor(Math.random() * (200 - 50)) + 50;
if (circles.length === 2) {
setCircles([]);
return;
}
const newCircle = { x, y, radius };
setCircles([...circles, newCircle]);
if (circles.length === 1) {
const firstCircle = circles[0];
const dist = Math.hypot(firstCircle.x - x, firstCircle.y - y);
if (dist < firstCircle.radius + radius) {
if (dist + radius
I first time introduced like replaceable and non-replaceable inline element...thanks a lot and I think you are a genius person..I am from bangladesh
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Sir we need more such types of videos, this video is goldmine for many of us.
thnakyou very very much :)
Must watch interview.. we are expecting these kind of interviews
I heared the question, I was going in shocked but bro you nailed it... And I have learn something it is valuable video....
one of the top notch problem and bro nailed it.
Thank you for these amazing videos... I have tried both output based question of promise and the machine coding circles problem and I got it and solved somewhat in easy way before watching the solution. It feels good😊... I'm a fresher preparing for frontend interview.
May be idk how I'll perform in pressure.
Finally, got something different! Just finding this information - Thanks for this informative content. Learnt something new !! ❤
Both of you did a wonderful job inspiring coders
learned lots of new thing and very informative .Best interview i have seen ever.
Glad you enjoyed it 😊
I have learned a lot after watching this interview.Thanks for uploading this video.
Its fabulous never seen such interview. 🎉
A higly valued video for a web developer. I have come to know about many new things in it.
bro you nailed it 🔥
With the help of your video and your RUclips channel, I cracked the interview.
Congratulations Anand 🎉
I'm glad I was able to help you clear your interview. Keep learning and growing 😊
I am also starting Frontend Interview Preparation, with an amazing group where we discuss important questions in Zoom meetings regularly. if anyone who is really seriously wants to join let me know.(MERN with JavaScript)
HI, interested in interview preparation
This guy is pro
Now i know so much❤
Randomly found and love this kind of videos 💥🔥 OP
For static value as the interviewer write height and width is defined previous and he know the value then he substarct only half of that circle.style.left = e.clientX-50 // it half of the total width because it take 100.
Circle.style.top = e.clientY -50 as half of total height .
And just append child in the document.
Document.body.appenchild(circle)
For dynamic value like when I don't know the what the width height of the circle so the so now we write.
First we make the defined the position color and width and height(In random value this Manas we don't know);
Now we append the circle in the document.
Document.body.appendchild(circle)
Circle.style.top= e.clientY - circle.offsetHieght/2
Circle.style.left = e.clientX - circle.offsetWidth/2;
That shit if you don't value then append the circle to body to know that height and width and get value using the method of elements.offsetHeigt, elements.offsetWidth.
I hope you clear this full code of full optimised and dynamic value action that take center and create a circle where you click.
document.addEventListener("click", function(e){
const circle = document.createElement("div");
circle.className = 'circle'
circle.style.position = "absolute";
circle.style.width = "100px";
circle.style.height= "100px";
circle.style.backgroundColor = "red";
circle.style.borderRadius = "50%";
document.body.appendChild(circle)
circle.style.top = e.clientY - circle.offsetHeight/2 +"px"
circle.style.left = e.clientX -circle.offsetWidth/2 +"px"
we need more mock interviews like this
Perfect interview process man, i learned a lott, lots of love man,
thank you so much for such informative videos , ! such a great way of learning , lot of love , and respect ,
at 48:00, so async function is just a sugar coated way of making promises hence it will be pushed on to miscrotask queue which will be executed asynchronously by event loop without blocking the main thread. Code outside of async function will work on main thread asynchronosly and inside of async function it will be synchronous since await keyword will block the execution of lines of code inside function hence if at line 5 there's an await then after promise resolves execution inside async function will continue from line 6.
Any improvement to this is appreciated
anurag singh has very deep knowledge even he has no background in IT started as a farmer now he is pro level js guy.
this guy knew his stuff , great watch and good to learn.
I gave almost 15-20 interviews but the interviewer never asked these questions.
Sir this is what i was looking for. Ese hi laya kro videos
Thanks, lekin sabhi log aise nahi hote hain.
@@procodrr mera b le lo sir ek interview 😉🥰
awesome interview, great questions and discussions.
i hope you will create more such raw interviews where both actually involved and think like programmer, even after 2.5 years of experience i got to know many things
Instead of taking it as hypotenuse, you have to find shortest distance to between circles, compare it with the sum of both circles radii, if shortest distance is less than equal to sum of radii its intersecting, else not
And how will you find the shortest distance?
@@procodrr const distance = Math.sqrt(deltaX*deltaX + deltaY*deltaY)
where deltaX and deltaY are mode of substraction of x,y co-oridnates. Also hypo is made of this formula.
1:53:43 agar diameter uthatey na radius ki jagah to question buht jaldi solve hojata
it was an super excellent interview, I coded at the same time as you. it is a pleasure to learn and remember knowledge this way!😊
17:45 javascript
the span tag still follows the box model. the reason you described is not well enough to decline it. the problem is you don't have enough screen width to cover up the content of span then it will auto wrap to new line. if you have enough space it will be like box model. so you can say by maintaing aspect ratios of the element every element in the html is like box model.
one of the best interview i have ever seen, Very helpful
1:00 Bro sigma web development by code with harry is 🔥
Really Thank you for such informative sessions
Just seeing a few 10 minutes of the interview forced me to hit the subscribe button😊
I don't know why he wasted so much time in finding the simple logic, of finding distance between two coordinates and its diff with sum of radius, apart from this, he has good knowledge of html, css, and js and he played well with all these. Kudos!!!
Good to see Ankush Bahuguna getting into tech.
Need more questions and answers on js and react.js, with real-time coding questions as in interview, great video! 👍anurag🙏
I think in the intersection of circle question...
If we find the Manhattan distance between the two circle center and if its is less then equal to sum of both radius... Then we can get the answer.
Formula: sqrt((x1-x2)^2 + (y1-y2)^2)
Great great initiative bhaiya
great video this video make me confident that i know answer to some questions it was a great way to learn and brush up my skills
Professionals web hosting par one video
2.5 year exp employee vs code look so clean
thanku sir aap ki vajaha se moje bhoht kuch nya siknhe ko mila
POV : When the candidate knows more than the interviewer
Happens 😀
By the way he learnt these things from my videos.
Why some of interviewers doesnt ask interview like this, but they ask what you do in your previous work? Any thoughts?
watch chai aur code backend series . and this video was amazing , I really liked it
1:23:10 😂
i am ready for interview 🥳🥳
i am also ready for interview for frontend developer
Bro deserve the position of CTO ❤❤
Is this correct solution for promise in react ?
JS:
const pendingPromise = (param) => {
return new Promise((res) => {
if (param) {
res("Button clicked , Promise resolved");
}
});
};
const resolveOnclick = () => {
pendingPromise(true)?.then((res) => {
console.log(pendingPromise(true), res);
});
};
JSX :
Resolve Promise
Defer will instruct the browser to fetch the script content without blocking page render
Bro is just down to earth..😍😊
Very helpful 👌
One of the best teachers on RUclips❤❤❤
from this interview I have learnt module scope
This can be no way a 2.5 years experience interview 😳
Means it is good or bad, why? I'd like to know. Please
It can be as I have also 2.7 years of experience and I was able to give almost most of the answers for the questions he asked.
@@IshanRohatgiyt how do you learnt web dev ????? And what was your college ?????
@@shubhamjha2036 I studied ECE from tier 3 college when I was in third year I wanted to implement something which I learn so out of curiosity I started learning web development using youtube I started with code with harry, and did one course on web design on coursera based on that and Programming which I studied for placement I cracked multiple jobs in MNCs and started my journey as developer since then I am continuously working and learning from resources available on internet.
One of the best ❤
no one ask such things. I think mostly the interviewer jump into Javascript tricky questions
38:15 Sir I have successfully created a promise with pending state without using promise keyword
Code -->
async function createPromise() {
return "promise is resolved";
}
console.log(createPromise().then((data) => console.log("data",data)));
How works :-
Async function always return a promise either we will return something or not and if we console the function then the return value be a promise with fulfilled state and we know that we can call then() method to a promise either it is fulfilled or not and here the concept come that every then() method return a promise with pending state. So that way I have successfully solved the question.
Yes, that is 100% correct. That promise will be pending for a moment and it will resolve immediately. So yes it is technically correct but we can't control that promise's state.
Thanks for providing this solution.
@@procodrr yes sir
not going to hate anyone but i think the level should be increasing for one from his / her past rather than refer to other
If we return setTimeout(.... , 10k) inside of that async func.
Won't it will be in pending state for 10 second?
I don't know how much is this real but i enjoy this video😊😅
sir mere ko bhi interview ka mauka de do fresher hu baki jagah toh fresher ke liye 5 saal ka experience chahiye
Very knowledgable video
It was wonderful learning
2 hour interview?????!!!!!!!
Yes, only 2 hour interview
When Interview schedule on sunday😅
This is awesome bro ❤
me : beginner in javascript watching this interview.
le javascript : kya re bikmangya, halwa he kya
what is the question at 40:20 ? if all we have to do is show the pending state, we can simply log the promise.
Amazing interview.
After seeing this i have some question. I have never done any interview before so enlighten me a little,
- Is it normal for a interviewer to help the applicant in an interview?
32:42
const btn=document.querySelector("button");
let getdata=()=>{
return new Promise((res,rej)=>{
btn.addEventListener("click",()=>{
res("button is clicked");
})
})
}
btn.addEventListener("click",()=>{getdata().then((res)=>{
console.log(res);
})})
//Is it correct
Best interview
Great interview
Outstanding 😍
SIr node js bi padha do plzzzzzz, aap bohot accha padhate ho, hindi me
For that import question i thought its hoisted at top
Audio quality is not so good. Kindly improve the quality of audio so audience can stay till end of the video.
Plz chk
Sigma Batch Killed All Courses
Kindly give me an opportunity to sit for an interview. Pls take mine for Reactjs. I had filled the form but none cameback.