development fundamentals mainly HTML CSS JavaScript or in subes JavaScript Ely of HTML CSS JavaScript react G and GitHub tawi complete frontend boot camp dur 148 hours Hi how are you yeah I'm fine how are you yeah I'm good too so first introduce about like yourself and then we'll move TOs uh so myself ainash Kumar uh I have been working in infoage for more than 2.5 years now uh I've been working in the frontend team only uh throughout my journey I have used HTML CSS react uh JavaScript basically and the Contex API for the State Management uh yeah that's pretty much about me okay so so you have four years of experience in front end right uh 2.5 okay more than okay I thought I heard four years no okay two 2.5 years yes okay that's good so this interview we will categorize into three parts first part will be some Thal questions I will ask you something you have to explain it second round will be some output V questions I will send you some code Snippets JavaScript code Snippets you'll have to guess the output okay uh last round will be machine coding round where you will have to implement something I will ask you to make some something you will have to implement it okay yeah yeah okay so let's start so in HTML why do we use do type doc type to tell the browser that which version of HTML we are using yeah that's correct and what is the use of head typ what is the use of head tag head tag uh it basically includes all the meta tags which are basically useful for the SEO and also so yeah basically the title of the document the web page that we are creating and it also include it can also include the external links like our script files and CSS files okay that's good so I have one question for you like in HTML we link our Javascript file so what is the better place to link it head tag or like in the body tag just before the closing body tag uh the better place would be just before the body closing closing body tag uh because we don't know what is written inside that script uh if it is like accessing the Dom elements yeah and if we put it just before the body tag like uh in the head tag it uh the Dom element won't be available there so it better to put uh just before the closing body tag okay so if I ask you to not put in the body tag put it in the header tag like head tag and I like the code is accessing do Dom elements okay yeah yeah yeah we can do that with the attribute defer which will be like which tell the executor to uh hold the JavaScript file and execute after the Dom has been completed paring yeah so you're saying if we add different attribute in the like while linking in the script tag it will wait for the Dom to be loaded right and then it will execute yes so what is the difference if we add it below if we add it below then also when the uh HTML is passed and Dom is ready then it will execute if we add differ attribute then also it will wait for the HTML to be ready and then it will execute what is the main difference the difference is like uh it will download the script file if it is an external Source but it will pass only execute only after the Dom is completed passsing with the yeah that's correct so don't you think it is a better way so that it will be already downloaded by the time HTML is being passed uh kind of better way yes yeah yes there is also one attribute async attribute on the script tag we can give yes so yes how it is different for from defer okay uh Asing attribute is uh like the downloading won't happen like uh just what we are like discussing about the defer tag it will down download and then pass letter when the Dom is completed Asing tag will uh make the downloading letter too okay I guess so I'm not confident about it but I guess okay so in async tag what will happen if we add async tag it will like uh if we just Link in head head tag yes if we don't add anything it will start downloading immediately so if we don't add anything it will start downloading immediately and it will uh it will not pass the HTML if we don't add anything it will not go and pass the HTML till script file is downloaded and executed okay so it will wait for the JavaScript to be downloaded and executed and then it will continue and pass the HTML if we had differ keyword we already discussed it will will download it will start downloading but it will wait for the down to be uh ready to be passed yes but if we add a syn keyword what will happen it will start the downloading and it will start the passing also okay but it will not wait for the HTML to be completely passed okay it will wait only for the downloading of the Javascript file so as soon as Javascript file is downloaded and ready it will start the execution so in that time maybe half of the HTML is passed okay so it will pass HTML and download the javascri file yeah so as the Javascript file is ready is downloaded it will start the execution it will pause like when it will start the execution it can do only one thing so it will it will pass HTML uh it will pause HTML passing and start uh yes we can say that and uh in this way it is very unpredictable like half of the HTML documents will be uh accessible half of the HTML documents may not be accessible so it is very unpredictable thing so we should not use that okay if if if we know like it won't be accessing the Dom yeah if we don't know like if we if we know that it is not accessing Dom element it is some doing something else then it is the best and fastest way to do do things so this is why it is uh available yeah yeah okay uh now there is one question what is like can we create any custom element name elements like your name is a so can we create an HTML anything like with any name is it possible I haven't created it okay if I have to guess I don't think so so you think it will be give error or something yeah I guess so HTML and CSS never gives error it just like uh CSS just ignores if something is uh not valid but HTML you can create any tag name you can create ainash you can create anurag you can create any any tag name it doesn't matter so now the question is uh like what will be the display value of the like randomly created element yeah I saw it coming I saw the question coming uh the display type like inline or blog right yeah yeah exactly so will it be similar to span or div uh by default all the elements are in line right so it should be in line yeah it will be in line that's correct and what is difference between in line and block uh the difference is the first difference is we cannot give width and height to the inline elements we can give margin left and right but we cannot give margin top and bottom to inline elements yes for the block element we can give withd and he uh every block element will start in the UI with the next line whatever whever it is placed and it will take the width of its parent container by default if we are not giving any particular width to the block yeah and inline element will be taking the width of how much it required to render the content yes yeah that's true and what is like you told like we cannot we can give margin left and right but we cannot give top and bottom right yes yes what about padding uh padding we can give to in line elements okay so normally if we give padding left and right elements height increases and width increases like if we give left and right then width will increase yeah and content will move left and right right yes that that box will move left and right based on the padding width so what will happen in this case will it move left and right uh with the inline elements yes with the inline elements uh the content width will increase and yeah the content will shift so left and right it will shift right yes and top and bottom let's say we give only padding top 20 pixel will it shift down uh no the content will be there but the Box height will be increased yeah that's correct okay now what is display property of images images are in line in line okay so on images we can give height and width right yeah uh yeah images uh we can give it yes so how is it possible to give height and width on images uh I read somewhere like the content of the image tag or video tag maybe they there are some like the content is provided by the external source so they are treated differently in the browser yeah so they are not they doesn't behave like the inline elements uh 100% uh so we can give height and width wait yes that's correct so there are two categories of inline elements do you know those two categories uh no uh I read somewhere like something replaceable I don't remember right now yeah yes that's correct so two categories are like replaced inline elements and non-replaced inline elements okay so replaced are those which come through some Source like image video iframe yes so on all these we can give height and width and non repace means span tag anchor tag Vol tag talic tags on those things we cannot give it in okay so can you explain me what is Box model OKAY Box model is basically how the browser calculates the height and width of any element yes with including margin or border with the element height or width or without including margin and border with element height width basically it has two property the content box and Border box in by default the content box is enabled in which uh like the height and width would not contain the margin and border of any element but order box that will be included while calculating the height and width of that element yes that's correct so do you think like Box model means all the elements are like box rectangular box does it have some something to this like Box model why is it named so are you asking yeah so uh I guess so yeah all elements are like rectangular things right be rectangular yeah have you ever seen any element which does not have a rectangular shape rectangular or square shape uh L-shaped element only one element not two elements no no I haven't se uh in my 2.5 year of experience I did shaped element you have not seen seen right we can create we can yeah we can create just by modification something yes but if we just give background color and it will come like l shap no no I you have not seen like this okay so let's say we have one span tag okay and span tag is in such a way that we have put long paragraph which covers one line and half line one and half line and if you give it a background color it will be like that right yes although it we cannot say it is perfectly in line because there will be one Gap yeah but it is very weird shape it is not it does not follow box like Box model properly so all inine elements yes is except replaced in line elements inline elements don't follow Box model rule so they do their own things okay okay all right so now let's move to JavaScript okay so what are different data types in JavaScript data type primitive and non-primitive in primitive uh integer sorry number string Boolean uh non- perative data types array functions object like these okay so have you used classes in JavaScript uh yeah I have used it while making some small projects but in like I am working in the functional component basically in okay not in practice but yeah I have used it okay so you are afraid of classes uh you're not that comfortable as comfortable as functions right yeah okay so what is the type of like if we if we create some class let's say user class or some class any class and if we check type of that class with type of operator What will be typ yeah in JavaScript it will be object okay and if we check the type of a function yes it will be object two okay if we check type of some array array will be object two okay you can start sharing your screen and we will check what what it comes okay just open one vs code file and we'll check what is uh entire screen I guess yeah is it visible to you no not yet okay uh is it is saying me sister refences to I don't know okay let me just see if I can wait hello choose to it is saying you can choose to qu Chrome now or do later yeah you can uh yeah it is Mac I know it is all the drama yeah so you can you can restart Chrome you will leave the yeah I will I have to leave the Mee yeah okay it's okay you can rejoin okay uh I think it will let me share [Music] now yes okay so yeah this is is my screen visible yes yes I can see your screen you can you can zoom your vs code okay is it fine yes it is fine you can zoom one second let me check can you zoom one one step one more one more okay close terminal and close that file explorer also okay so you can check you can create one function and check its type uh is it saying me function yeah so type of a function is function but function is not a data type in JavaScript okay still type of function is function because function is behind the scenes is an object in JavaScript yeah you can check for array it like type of you can just type in the console itself okay type of one empty array it is object yes now you can create one class in Javascript file and check it typ Zoom this also the console also uh is it fine now yeah now it is okay eding function too yes class is behind the scenes is a function okay okay so okay let's uh come back to our JavaScript can you tell me what are promises uh okay promises are basically special object in JavaScript uh which represents the eventual completion of an asynchronous operation okay it has three states in starting with the pending and then letter resolved or reject based on the operation that we performed asynchronously yes that's correct so can you create a promise and resolve it when a button is clicked uh I have to create a promise and resolve it when a button is clicked uh button on our HTML element is clicked uh can you repeat one more time yeah so you have to create a promise which will be pending by default okay and I want you to create one button on the HTML like on the page and that button is clicked that promise will be resolved and if you are using await then after await it will run if you are using then then that then call back will run okay that promise is resolved so it should not resolve until that button is clicked it should not resolve until the button is clicked uh can I create the promise after the button is clicked no you have to create as soon as your file loads okay okay I got uh let me just just create a button first get some ID my but put the script tag below otherwise you'll have problem yeah and button is here okay uh button I have to attach a function let do that later uh I have to create a promise first I have to create the promise my [Music] promise okay it won't be resolved until that button is clicked okay if I don't resolve or reject it it will be always in pending state right yes and if I attach a document listener to that ID add event listener click why what is happening here something it takes a function right that okay I miss the syntax uh and then resolve this promise uh what should I do by after resolving the promise just console like okay just console. log uh you don't have to use like this you can try like but our my promise should be resolved so you got it so my promise be resolved yes promise. resolve this promise. resolve will create a new promise which will be resolved which will be resolved yes it does not resolve existing you can try Okay uh let me just save it my button is there right I have written it yeah okay uh let me just click it it's spending but it isn't you can expand it you can expand and check sometimes okay from where from where it is coming 16 it is coming from 16 and it is pending no no that should be resolved right that should be resolved because you have resolved it with a pending promise you have resolved a promise with another promise yes uh let me just reload once I guess remove this no this is not resolving I think this should be resolved but yeah this is not resolving uh so I have two questions now resolve this promise and find out why this is not resolving uh you can just pass a string you can check like in the console log you can pass just in the string whatever you have selected my promise okay like online number 16 just put that my promise in a string okay only my promise like no no just do control Z just do control Z yeah put put that selected thing in in strings okay this one yeah now you can check okay so you can click uh just yeah this is resolving a value this is fulfilled but a promise also resoled like that right which is in a pending State this should be this code uh this event listener code does not have to do anything with my promise uh yes because promise. resolve creates a new promise which will be resolved with the value which you pass inside the resolve function yes so I have to uh so this is basically solved but I have to find out how to resolve this promise uh This Promise let's just console This Promise what is the state of this this would be in pending State yeah uh after button kick this should be resolved I somehow wanted to set a trigger to resolve this promise yes uh and then attach to dot then okay actually that console log should not come on click like you should not run that console log inside on click method on click call back function okay the console should come from where you resolve like you add dot then whenever the promise will be resolved dot then automatically will be called yes uh it would eventually call a function that will resolve this promise uh can I pass any function any promise and then resolve from there only but let me think for one more minute you can uh like if you want you want you can ask for uh just one more minute okay uh [Music] one okay just give me the hint now the hint is another question okay if you answer that question you will get closer the question is how a promise is resolved how a promise is resolved when we create a promise yeah we how do we resolve it yeah simply call the first parameter of the Handler function with some value exactly okay uh [Music] uh so this will be resolved as soon as it is created right yeah yeah right now it will be resolved as soon as it is created okay what about if we put that here and here uh and then sorry sorry sorry the console should be inside console.log you need to write oh sorry uh my promise do then and it is resolved after the button is clicked this was so simple I guess it is correct I guess yeah it is correct you can check now yes yes yeah now add catch also okay like do catch on this okay and console this error also okay and uh create one new button like change the name of this existing button to resolve and create one new button and change its name to reject so there will be two buttons okay okay yes now you know the rest what you need to do yes uh I guess this is good yes should I run it yeah you can run it so this time reject the promise okay okay yes now I want you to create promise mhm but and and I also want you to have the functionality to resolve and reject okay but let me think if it is possible yeah I think it is possible I also don't know if it is possible I think it is possible so first create a promise without using new promise how will you create create a promise without any new proing function without yeah yes correct so you can comment out this code yeah I have to check it later interesting uh I have to create uh sorry can you repeat the question yeah so the question is you have to create a promise without using new promise thing oh okay Asing my function and sorry function okay and this will return a value and if I try to consume it like sorry result with my function this will return the promise inside the rest yes should I console it yeah you should console it okay so uh just can you okay it's okay so right now it is a promise with resolved so yeah so can you make it can you make it pending if we use it can I make it pending yeah okay can I make it pending I'm also thinking because yes I also don't know how we can make it okay uh what about if we don't return anything no likeing ASN operation is returning some value a promise object but it is resolved with this value I have to make itend first make it reject first like how will you reject it let's forget about pending how should I reject how will I reject it I can always throw an error yeah you can throw error throw new error and this will be rejected yes but error is the rejection page how should I make it pending yes so usually it will be pending if we use await keyword and await keyword we can only use if we have a promise yes you got it so comment out the code which you have written above like like uncomment I mean whichever uh my promise we have created above just uncomment that okay yeah now I gave you an idea how we can make it pending yes you can use that you can use that like use my promise okay yes I think this is the promise object this will await for that to be resolved or rejected and and resolve it with your name like resolve it with your name first uh make it pending it should be pending for some time okay but you will resolve it not with the value of this promise okay but with a string which is your name okay this would contain the result it would suspend the execution letter until and unless this promise is resolved and I have to resolve this will contain the resolve promise but I have to resolve with my name yeah this this would do yeah that's correct yeah we can check now this is new for me also okay okay uh it is in pending State yeah it is pending so it will be pending until we click yes so if you click on resolve I think we have yeah you can you can do you can do resolve but we have not put any console log on resolving like this res is a promise so is a so I have to no no no I have to wrap inside another function and then call that await function and then rest will be consoled you can use dot then here like okay because of why because of the reason it is a promise right yeah exactly because res is a promise you can use then you can use AO so don't use them stop it okay I want you to use await but don't create any function okay yeah you have to use a wait here itself just await await res uh no no not here here you can use both places it doesn't matter it will be okay so is there or should I check it on Console you can check what will happen now okay syntax error is there uh I think if you you have put in console log maybe because of that you can use a weit in front of that function you remove and yes we cannot use a we outside the Asing function right we can use okay that's new for me yes if you read that error which is coming okay it is only valid in aing and the top level modules yeah it is coming error because we have used the await yeah outside theing function right yes okay but I'm telling that we can use we if we make some changes in our code we can use on top of and the top level bodies of modules yes uh I don't know the meaning of that so that second part is telling how you can use outside that a we keyword okay this let try let see what you can do you can Google also if you want okay uh I Google I think it it may give answer directly it is only valid in Asing function everyone is asking to create using function right yes yes everyone is asking uh you know modules in in JavaScript uh modules yes six modules have you heard of that yeah uh modules we can like export and import which contains some kind like bunch of code yeah so how do you make a file module how do you make a file module by default it is not module yeah I can use use strict or of the at the top no it won't to make it won't make it module it will activate the St mode only how can I make it module so if you make it module that code will work okay uh I have to import it like a module in the how will you import it like module by defining the type is equals to module here no exactly okay okay oh it's not giving any error nice because it is correct remove this code this text you have written okay now resolve it and it will work see yes the module yeah okay now that we are discussing module let's see let me see if we can make any other questions with promise here okay come to JavaScript file yeah okay so we have made a promise which can be pending which can be resolved which can be rejected with using function yes but we need to have a promise so that we can a wait and make it pending yes yeah okay so the question is uh if we are using this await keyword mhm then the execution of that function is stopped right it will not continue yes it is a so if that execution is stopped will it not block the main thread of JavaScript uh if the execution is STO will it not block the main thread of the JavaScript no because it is pushed in the call back and the main threade is empty or free to execute another functions from the call stack so let's say if this my funk has 10 lines okay okay and online number five we are using a weight so first four lines of the first first four lines of the function will be executed then a weight keyword will come yes and execution will be stopped yes right yes then yeah you you said that that function will go to the call back Q or somewhere else yes and when promise is resolved Sol then how will it come back again how will it come back again through the event Loop which keeps on checking the call stack yeah so if that function comes again so will it start executing from line number one or from line number five okay uh it will start executing from line number five my answer is line number okay your answer is or you're sure yeah I'm sure okay yeah it it will execute yes from line from where it left so actually I read that suspension thing after rejecting got rejection in the last interview okay that's that's good inter in interviews you will get to learn a lot of things yes yes yes these kind of problems are always asked in interview the pr because normally in day-to-day life or in working in some company you don't get to write promise from scratch yes yeah but if you understand these things you will catch any problem very quickly yes yeah so this is the thing with async functions yeah they stop the execution whever they encounter a weight keyword yes and whenever that promise is fulfilled that function will start executing from that line where it left yes and again if there is another a keyword it will do the same thing again and again yeah okay that's good now this was not machine coding round we can say this is output based round but I did not send you any code Snippets now let's do some output is with module okay okay so I want you to create one one more JavaScript file okay write some code in that file console log something or some something uh yes and some only one message yes any one line now import this file in your JavaScript file in in your main file no okay no in the main in the Javascript file okay yes you need to import it here what I I would ask you to do is make a copy of this file and delete all the code from this file so that just for backup make a copy of a script JS file so that it is available for your backup I want this file to be cleaned just make a copy just do contr c and control V in the file expans like command C and V you like expand that file file manager file okay okay just uh select the script.js file command C and command B command C no not there in the file in the file explorer yeah command C and command V command C and command V okay make a copy okay yeah now come back leave this copy file this is for your backup okay okay okay close this and clean this script.js file okay write one first import that uh script one file okay so what like you uh we have written only console log but we have not exported anything from here so you need to export some variable create some variable and Export it yes so like online number two you can create one variable and Export it okay uh sorry some variable and this is a and I export sorry variable in the curly bracket yes now import it here import uh what was that uh variable variable okay from script one can console it here yeah you can console it here yeah one more one more question like before this import line on like write one more console log okay just starting just start just write start any stram okay now I want you to guess the output order of output what will come first and what will come later and remember there is one console log in script one file also uh yes so you need to take this into consideration also there will be three console logs what will be out order okay that's a one we always we use to import keep the import statements always on the top yes because we want to make things clear like JavaScript should input all the files before executing or nevertheless JavaScript would do that uh okay I'm guessing here import statement will be executed first and and then our console okay uh this is executed first so this console ainash sorry my name is AAS would come first okay this console log would be second and this would be third yeah you can check okay maybe some you can check what is there uh Local Host is not this index file is not script.js you need to write if you have written only script you need to add that extension in script the main file okay okay sorry add JS it does not work in vanila JavaScript react okay okay yeah yeah it yeah I reloaded it by my name start and then AAS I guessed it totally correct no yes yeah correct I guessed it correct uh we tend to or we use to keep the import statement at the top I guess so because neveress JavaScript would do that yeah so can you explain me like the import statement with have written on line number two but how it is executing that line number before the start also okay so there are two phases first JavaScript would assign the memory do some all assigning memory part and then the execution part yes so in the first place it tends to collect all those things keep those variable host and yes I as I already said I am guessing the import statement would be like first encountered or executed by the JavaScript yes that is correct that is that is good now I have one more question if we create a variable let's say V something in this file okay V anything using V okay I need some number okay so in which scope I want like the question is this war is going to which scope this V is going to which scope Global local block which scope this would be in the global scope okay Global scope means we can access it through the console also right yes you can try no means we can go to the console browser console okay okay you can you can try that anything very okay why your uh this takes so much time to reload I don't think it should take time but I think if you open it in Incognito okay slow 3 you have throttled sorry sorry refresh now refresh it yeah yeah it is this how it should be okay what was the variable just type just type the name you don't need to add console log uh no anything is not defined if it is global it should come here right it should come here uh why is not functional scope but there is no function so it should be Global so if it is global we can access from anywhere like other files also like if it is global then yeah we can access this from anywhere so you should be able to access from script one also you can try console log anything okay uh [Music] anything it is not uh Global I we have seen here right yeah so this is not a global what is happening here why it is not a global oh this where is where is the V yeah here where is generally the functional scope thing but there is no function here right there is no function here so it will be power from the call St or erased from the memory as as soon as it is created because no like if we create uh if we create a global variable yes it it stays always right or we can access it from the console anytime yes uh I don't know the answer of this okay so remove the import statement here okay and go to index. uh save this file okay uh remove type module okay and again there is one variable we are accessing you need to comment that line variable yeah okay now you can check uh you can check in the console like you can type in the console anything yeah yeah here it is present now it is global scope because module enables the strict mode and we cannot move this no you can use a strict mode you just try to use a strict mode here just okay on on the top just add use strict this is how yeah that is that is true so still you can use anything yes but in module we cannot first first let's let's test that strict mode is working or not right if you're not sure remove the wire and it will give error anything not different yeah if strict mode is not there it will not be there yeah so we I I am guessing this answer uh please correct me if I am wrong we tell the browser the index file that we're importing a module here yeah so just do control Zed so that type module comes again okay and do control Z here also so that whatever was in script.js file so that whatever earlier code was there it will come okay yes now so this belongs to a module not the normal Javascript file which would be imported and all the variables that are not within any function would go to the global scope yeah so then which scope it will go to it will not go to Global scope this will go to this file scope script.js file the module scope yes module scope there is something called module scope yeah so just put a debugger just before like just after line number six just come to the uh sources tab refresh something is no no first fix that error and then come okay let just uh anything is not defined yeah because I create a uh because in script.js we are using that this variable anything yeah okay okay sorry uh remove this line and put it there just before debugger okay yes now save it and come so in the Scopes tab you can see there is one module scope yeah yes I can see yes there is one Global scope yeah Lo the biggest scope is global scope yes and then there is one script scope which is technically Global scope okay so script and Global and like they are kind of similar things yes and then after global there is module scope module scope is bigger than a function scope and uh smaller than the global yeah and smaller than the global scope okay I didn't know about the module I'll definitely check it out yeah so I have one like video I've explained all these things already in my videos yes yeah I have seen some of the videos I I will check it out yeah check check these videos uh there is very good things I've talked about okay okay so now let's come back to vs code now now this is enough for this kind of output based questions we can say these are now I want you to now this is a machine coding round so what you have to do is whenever user clicks on the screen you need to create a circle with random radius okay got it and you can put a Max limit so that it does not go out of the screen okay like Max limit of maybe 100 200 pixel Okay so it should give between 1 to 100 or 10 to 100 let's say let let's say 10 to 100 pixel or we'll see like how much we can give we can always customize that so there should be a range so whenever user clicks it will generate one Circle okay it will have only border it will not be filled okay and if user clicks again it will generate another Circle okay and if user clicks again then both circles will be deleted and New Circle like at a time only two circles will be there right okay maximum two circles can be there at at one time okay and when two circles are there we need to check if those two circles are intersecting each other or not okay this you need to do you have 30 to 40 minutes of time okay uh just let me clarify that last part uh whenever the user clicks the third time yeah and if two circles are there they both will be gone and another Circle will come yes exactly and what about the intersecting part so first we we will click one Circle will come Yes again we will click some somewhere else right okay uh then uh another Circle will come okay now that Circle can be smaller like very small uh and away from the first Circle so it will not touch the other Circle right the first Circle but that Circle because we are generating random random with random radius that Circle can be big enough to intersect that Circle yes right so the question is you need to find out if that is intersecting or not okay and if it is intersecting that I normally what I should console it yeah you can console like intersecting and if you want you can also mention that how many pixels it is overlapping that is optional part if you just so it is intersecting that is more than enough okay how many pix and I have to create with the random radius you have like 45 minutes for this this is difficult one so yeah and if you are close you can take even more time okay okay uh just one last question uh I'm clicking anywhere in screen the circles should would appear anywhere in the screen not where the cursor is right no it will appear like the center will be the click Point okay that is you need to but it will be of theand radius yeah radius will be random but the position will be the position where uh it was clicked clicked okay okay uh you can clean all the files so that it will be easy for for you yeah put in the copy file if you want that code you can put it elsewhere okay uh script GE included I have to okay I have to attach a document not add listen to a click element I have to create an element make the Border Rees 50% have to create a circle okay uh I'm thinking about an approach of creating the circle uh just help me with that uh I am I will be creating a div with some random width and then giving the Border radius 50% to it yeah yes that would be good yeah that will be good like what what say it again 50% 50% border radius yeah that's that's good okay okay okay so first you can use CSS like you can you can write CSS you don't need to write all the CSS in JavaScript yeah you can create one class and add that class that's yeah I got it document listener that would be click uh event uh it would give me the X and Y coordinates of the click okay okay uh what is the x is e dot what was the parameter get client bonding Rea will be give the X and Y all the coordinates Cent is Cent you can check it's not a problem that you will remember everything you can go to the you can console log and go to go there and check you can Google also no problem okay you can ask me also always conso it uh X is there Y is there I have to create a d element attach a class to it and then by CSS I will attach a 50% border that will make a circle uh the radius means the half width should be a random number and the radius should B ma random between Z and one uh with some limit uh I don't know how to fix the mean and max value of the random I generally don't yeah you cannot fix you have to write some code to do it okay you have to do some calculation so this function will always give number between 0 to 1 okay okay so the random number would always give me zero and one between 0 and one and this will give me 0 and one okay let's come to this part later I will always assign a particular radius to it and make it uh 50 pixel or even more okay okay okay I should um create a element const uh our circle with document dot create and then okay let's first create the element with uh div maybe Circle do add set attribute Sor set attribute no no no no no set ATT I am setting any ID no ID we can use the ID or we can use the class class list add Circle this would be helpful in the CSS [Music] this would be uh what was that water radius to 50% and uh okay and I simply append this circle into the body and no I have to put that at the x and y [Music] coordinate okay you need to take time consideration right now like 9:17 time is there you have time up to Max time to 10 10 p.m. okay uh can I Google these types of things like how you can you can yes you can Google those what this would be fixed yeah and if we assign any top to it with client y + pixel and client X Plus pixel it will move to that I guess it would work what is that uh you can copy doesn't okay you can copy okay no no no no okay do style I have the element here so I simply do the circle style and I have just to write X and why here uh I'm creating uh width width and height okay uh uh I have to assign the width and height with the style property width would be uh I have to make it two times okay style do width will be radius style height be radius and I can sorry I going to pend bend a child Circle to it let's see if it is working no is not working X is there Y is there okay what is Child uhml Development no child Circle [Music] what I'm doing I should write this if if some error is coming you need to check the error message what message yes yes I I uh fa to execute on node only one element to document allowed body this is you should have always read the message yes uh okay I should give border color but I should find our Circle this is here I can give border color to it red REM the console sorry okay A little bit of progress here but it is not creating where I am clicking because I using position fix uh position fixed I am using yes CLI Y and then pixel then pixel top is that Y and left uh I missed it yes it is not putting it in Center because I have 2 minus 100 from that there as well you have subtracted too much I have subtracted too much yes okay and what is the value of y let's just put a here okay I already consoled it Y is 258 and okay Point yes okay first part is done but uh whenever the third click happens I have to check if there are more uh more than two elements on this screen more than two circle on this screen yes equal to two circle on the screen and I will total circles and document with our class Circle if total circles are two we would simply remove them all and I have to remove the child just how I uh one thing I wanted to ask can I remove all the elements at once or should I just use the 4 Loop you can like it doesn't matter you can remove any way which is convenient for you okay no no I'm asking can we remove all the Els once I also don't know okay I generally use to one uh yeah I also use the same thing so just let's remove one it is only two so you can remove one by one it doesn't matter yeah don't need don't even need to use Loop okay you can you can use it doesn't matter right yeah and then I should create the third so two Circle will be created and then this will be removed let's say one two three no they are not getting removed total Circle okay 1 2 3 4 H we cannot use because qu all give us a node of list not array and we cannot use for each we should we can use for you are going sorry there sorry 1 2 and three okay second part is done the only part is we have to console if the second circle is intersec intersecting with the first one and the one more part the random let's first check intersection okay you'll do do it random thing later okay uh I have to get each and every bounding client from the element the X uh the X left X right X the top y then bottom Y and no I can get the X and then add the 50 to it yes so I have maintain I have to maintain a array where I will be storing a starting or the coordinates of each and [Music] every Circle or only a single Circle okay uh just create a a circle coordinates aray and we'll push Circle coordinates with X and Y okay uh if we push object within it and then later if we then again come and create it and if both are intersecting I just have to console it after appending the child we can uh log if intercepting ccle and be function log intersecting Circle uh I have the X I have the y basically I have 2X and 2 y and if okay if the second Circle have the x coordinate anywhere between x + 50 or xus 50 it would be intersecting with the x-axis or if it is if has the y coordinate y + 50 or Yus 50 it would be intering with the first and it can be a reverse also okay okay uh okay X and Y I just type a first and second const first cirle would be Circle Z [Music] okay Circle be Circle coordinates [Music] 1 I would making some lot of variable x uh as X1 okay I cannot do that okay here okay I can do that this thing first Circle dox X2 would be second Circle dox y1 would be first Circle do y Y2 be second Circle do y okay uh I just to check the intersection okay X1 if X1 is lesser it means its x coordinate is left side of the second Circle can you explain me what you are trying to find out so that I can okay uh what I'm do trying to do is uh since I have the fixed radius of 100 pixel uh I'm storing the x and y coordinate of both the circles and I would be like checking if X1 is in the preference of X2 then our x coordinate is intersecting like if X1 minus X1 plus the radius is in between X2 range then it will be intersecting with x coordinate and same goes for the y coordinate uh no like how will you check that how will you check both coordinates differently because it is a circle okay it is not a square so okay like if it is it was a square you can check in that way yeah yeah I'm also right yeah so it is Circle M it would it would not touch in multiple times uh yeah okay so how should I find the intersecting get bound incline react would give me rectangle would give me X and Y also uh okay can I Google this thing yeah yeah how can I intersecting point you can Google okay okay there's lots of nuts yeah actually we don't need the section point we just need if it is intersecting or not okay we just need if it is intersecting or not we don't need the intersection Point those math that math is for getting those intersection coordinates where it is intersecting yes yes it is the exact question on Geeks for geeks okay don't check that okay uh stack Overflow would be good I can check yeah you can check okay math. hypoten that is okay I didn't know the method hypotonous or hypot I don't know what is yeah you're like very close to the answer yeah I can simply pass our all the coordinates x0 y0 and the radius and we can simply copy this function from here yeah but you need to explain now it will work okay how does it work what it is trying to find out let's check what is this uh uh static DET the square root of the sum of a square of its [Music] arguments okay and if this distance and this distance is less than the sum of the radi IUS then it is intersecting okay these two circles are there and if the distance between the x coordinate is this the distance between the y coordinate is this the hypotenuse is this draw it in such a way that both intersect let's see if okay I can okay yeah and if the sum of the radius what was that saying is the sum of the radius is greater than or equal to less than uh uh yeah means the radius the sum of the radius is greater than the hypoten yeah yeah that we can say that okay uh the distance between the x coordinate and the y coordinate and the okay the difference between x coordinate is this the difference between the y coordinate is zero okay then one case is here only when both are on the same y coordinate we can [Music] see uh that if the sum of the radius is greater then the X then it's is not intersecting okay is less than it is intersecting yeah one case I have like I can prove here and if the second case is the same y coordinate then we can prove and yeah uh it is simple no um let me reframe it uh how should I tell you like by drawing some virtual lines here yeah you can draw like you can just move your mouse I will think that you are drawing a line or if you have something to draw you can draw some tool no I don't have here okay it's I think in Microsoft teams does it yeah white card I don't know if you can just draw it doesn't matter okay okay suppose we have two circles here right with some radius actually we have the same radius but suppose we have the different radius of the two circles here uh we can clearly see these are the same level at the Y coordinates right it can be like right now it is not on the same we discussing the first case basic case where where both the circle will be on the same y coordinate same x coordinate right right on the same line you you mean to say same horizontal line right yeah same horizontal line yes so that is x coordinate on same X plan the the center is the different on the different x coordinate but the y coordinate is the same for the center right uh no y coordinate is also okay y y both are like both are like y coordinate means height vertical thing vertical vertical yeah so let's say like right now the second circle look looks below little bit yeah yeah you are saying let's assume that it is assume that they both are on the same horizontal line that means same same yeah Y is same you are right yeah and then if we add the difference what is what here it is doing it is taking the difference of both the x coordinate and then squaring and then hypotenuse that is rooting means taking the difference the distance between these two centers of the x coordinate right no it is not doing that it is doing something else uh it is uh like Square okay so it is taking only two arguments not four arguments right yes uh in our case y z and y1 will be same right so the difference would be zero right yeah we can say and x0 and X1 would be different because one is at the left and one is at the right yeah and if we take the difference we will find this distance right this distance between the centers yeah and if we Square it and then square root it that would be the same right that is the absolute difference the positive one yes and if we can clearly see if we sum the radius here this radius and this radius that would be uh lesser because there is some space available there right so obviously if the radius is lesser uh than the distance between the x coordinate this would not be intersecting as I can we can see here and same goes for the second part where both will be aligned vertically right yeah but it can like it can be it will not always be either vertically or horizontally aligned yes it can be anywhere yes uh suppose we have like this right so when we use this thing x0 minus X1 and Y 0us y1 this would uh give us y0 - y1 would give us this this distance between the Y coordinates of the centers of the those circles and difference between the x coordinates would give us the this distance this one yes and when we calculate is the right angle triangle right when we hypotenuse this would be the this distance right yes and then again we are come we came back to that same problem the sum of the radius and the distance between those two centers yes exactly so basically this thing math do hypotenuse yes and we are doing xus uh x0 - X1 and Y 0 - y1 yes it is calculating the distance between two coordinates okay yeah X1 comma y yeah we have read in the maths yeah distance formula you know yeah some somehow similar to this yes x1- X2 y1 - Y2 yes so you told it right like this is the first thing is first half of the like right angle triangle second one is like one is height one one is base yes and this hypotenuse will calculate the hypotenuse which will be the actual distance between the both both of the coordinates yes and if the distance is less than the sum of radius yes which means it is intersecting if distance is less I can yeah so yeah now the time is almost over you can try to implement it yeah you can try to implement so that if inter it intersects it will tell that it is intersecting yeah yeah yeah uh okay currently we are giving 50 no 50 you can hard uh I'm just making it prepare for the random thing if I can do that to uh okay and if Circle intersect if this intersect true this will return true uh and conso result console [Music] intercepting is result let first conso intersecting is true uh okay why is it not giving me false check okay uh return my hypoten this will return return false this will return false X2 Y2 X1 y1 X2 X1 y1 X2 Y2 R1 is 50 This Is 50 uh uh let's debug it okay is happening okay uh while we are removing the child we should also REM empty this yes yeah it was the length was increasing to yeah the N number of circles you creating yeah yeah so we should just shift it two times because we have only two elements uh start intersecting is false and if I just click it here intersecting is true I have 10 more minutes right yeah you can try the random yeah random thing okay uh I it how to get a random number between and random into mats what is this let's read it copy and use it okay uh math Max and me and we are uh just generating a random man random radius would be math. [Music] random and Y would be minus radius by two radius by two and Max and Min are uh sorry 20000 okay let's just see uh suppose we have 29. 2.4 it will give us 23 always okay so if we give at this this will always give B between these two numbers okay 200 and 100 uh 50 make it 50 make it 50 okay yeah and this would be 50 okay so this would be our radius which is radius radius radius radius is there what is this here radius is there we can store we can we should also store the radius should also store the radius radius two and if we are doing anything Circle no no no no no okay uh we just have to find the R1 first Circle what the variable was radius yes and we just write it R2 and second Circle do radius and we should provide this R1 R2 uh I should run it no I have some time left let's try run it first radius X and Y we are pushing it we have radius have the number number will be 0 to one suppose you have 0.5 okay how this is working I will after that radius by two is there Y is there width and height are the radius and we're do border yeah it's should work so is it it is not drawing anything uh it is not drawing or this is the circle 2 by two okay but we have seen here like 2 by 2 okay let's just console this there is 74 okay uh can I floor that also so that it does not come in points math. floor or math dot yeah this would work this is 135 y am not okay this would be in point so math FL this what will be in points okay if we divide by two right yes I guess so this would be in decimal yeah it it's okay it doesn't matter you can do you can uh you can floor only that part where you are dividing by two and and then subtract okay okay I got it or don't do it don't do it let it it will work don't do it okay otherwise so that we we will be accur accurate okay yes is not coming because of some other reason okay this is not coming of some other reason two it is coming uh but it is coming like a DOT where height and width height and width is radius it is radius okay but height and width is if you check in the Styles go back in the Dom yeah this is not the pixel I'm not attaching any pixel yes okay this is a so much fun project yeah it is coming yeah now try to try we will try remove other console logs and let's test Let's test it extensively so that yeah leave only the final console L yeah see it came through it came because we have okay uh we have floor this that's why no no no we are using the radius itself right [Music] and why it is width is there height is there radius plus pixel is [Music] there is there width is there height is 79 debug it no I cannot uh what is my radius 79 186 okay there is something the circular length is true I return this intersecting is true uh you can see can you see any uh I think I also exactly don't know if that is the problem but I think uh come back come come below so come below so right now we are generating the radius yes I think that is the problem we are generating one random r radius yes and V like when setting height and width yes it should not be only radius radius into two it should be radius into two okay yes we are assigning half yeah there there we are subtract yeah there we should keep radius we should not divide by two here we should multiply by two we can try that okay I don't think so but yeah let's try let's let's check okay this is true this is false this is false false false okay false true yeah is working it is working so there because of some coordinate problem because we are subtracting from the coordinate x and y coordinate yes so we should be exactly like if we miss it it will subtract less okay so if we uh and then subtract it then it would be Miss some floating Point number no not floating like half of that it will it will not do the proper calculation okay so yeah like uh that is the problem we can test it more like let's say Let's uh I noticed it in the first like okay starting I got it whether we are subtracting the coordinates number from the coordinates yeah that's what problem is yeah we are subtracting the number from the coordinate yes sorry this problem and yes now the last thing let's let's see and test yeah that is done let's test one more time it is very good play it is very good to test it right yes yes yes okay we have done a small project itself here yeah oh what let's say put if we put one circle inside like okay put it exact like don't move it yeah it is not intersecting but it is still saying intersecting yes because it is under like we are just checking the distance we are always assuming that other C Circle will be away from outside yes yes yes I so this case you need to fix it I I also never thought of this case will come we can draw it inside one circle inside so you can do it later but whatever uh the task was given you have already done and time is also over yeah yes you can stop sharing your screen and yes let's come to the final discussion part so it was kind of interesting yeah so how like how many points will you give you yourself for this interview uh I Sol the last part also some of the questions initially so seven would be good seven would be good no you deserve more points right 8 to nine maybe nine I will give you okay so if you get nine you will be definitely selected yes as 3 years experience four years experience also if let's say you had four years of experience yes if I was taking interview I will select you because your fundament Ms are clear you are able to code your thought process is clear yeah you're also able to use Google effectively oh yeah yeah I I generally use at my place if I get stuck anywhere yes so I would say this is the best interview I have taken so far okay one more interview I took that was also good that student like he also had 1.5 2.5 years of experience okay but I did not go into this depth uh for for that person but uh like this is very good interview I have taken so far one of the best and you did really well like I like it is very good what what you have to say yeah uh no no it was really good uh I keep on watching your videos uh yeah one or two questions were repeated yeah I will honestly say that not all of them like only one or two and I was expecting some more questions from CSS as I have seen your videos from the interview once but didn't get that I appreciate that well so that's why you were able to answer that why in line uh like yes yes I guess so uh but you always tell student to go and learn more why is it happening so yeah I go on the internet I learn there yeah I forgot the replaceable elements but yeah I knew the concept from your videos only yeah it it doesn't matter if you know the name what is it is called if you know the thing that it is there something like this two categories exist that is more than enough and it is very good like one thing that you can improve is it is very minor thing that's just naming variables you can give full name okay you you you prefer like short names so it it it is okay for interview because you have to be fast you have to do the work uh still it is not bad name right so for example coordinate instead of writing whole coordinate you c r that yes or interview it is good but if you working just give full name it doesn't matter you can give one ft long name that does not that is okay if that is describing the thing okay so I I I also wanted to ask one question yeah about your journey if you have two or three minutes can you tell me a short Journey which Journey from uh like I have seen your videos you started uh learning from yourself only like I did some learning into the company or in the college but you started your journey from yourself selftaught yes so I have already made one video but it is not published yet it will be going live in like 3 4 days so like I have I watched not watched I have made one video but it is just a story you you have you watched that video like my story video How I Learned and from farmer to software engineer yes yes yes yeah I saw so in that one I did not talk about web development Journey from where I learned which courses I followed which YouTube channels I followed how I learned all the things but that that video I have recorded it it will come but still I have learned from all the places where you have learned like Namaste JavaScript yes and uh at workplace like while working we learn not from some people but through the code while writing the code I learned a lot and a cold is steel yes and for CSS kin Powell and like self exploration just explore in the dev tools how things are working reading mdn that's all okay okay okay other question one last and what are you up to these days like what are you learning these days you are already like so much into JavaScript but what are you what do you think what should I be learning now uh there are lots of fror coming nextjs like those uh I already know nextjs okay and like I'm working in next so right now I'm learning node J like not actively I'm not able to give too much time like I already know noes I can make uh apis I can can write expresses I can make rest API I have made it but I don't know backend and node GS to such an extent as I know front end yes so I will teach back end only if I know to this extent so that's why many people are requesting me to make a video on nodejs and I am not making because I if I teach it it will be like any other course but I want to teach it in such a way that nobody has taught before so I want to master it the way I know frontend so but because of time constraint I'm not able to give time every day consistently still I will learn this year good to know yeah okay any other question no no that's enough for now okay let it's really nice interviewing you ainash nice talking to you yeah okay okay bye bye [Music]