Front End Mock Technical Interview | JavaScript, CSS, React, and Algorithms

welcome back to another podcast episode where we help aspiring developers get jobs and junior developers grow this episode is going to be a little bit different we did a front-end mock interview in fact i invited a good friend of mine dan who actually interviewed me for my second developer position he volunteered his time to a brave soul in our community his name is noah he's aiming for a developer position right now and he volunteered to be on camera do a front end interview on camera i hope you like it i think this turned out really great now this is going to be released on video and audio i'm just going to be honest if you're on audio it's not going to be as good of an experience but you are welcome to listen in i will actually include a link to the video in the description for the audio so you're welcome to listen in just want to give you a heads up but let me know what you think about this new type of interview and if you want to see more interviews like this i'm happy to do more enjoy cool awesome um hey noah good to meet you uh thanks so much for doing the smock interview with us i'm dan i'm a front-end developer currently working at coinbase prior to that i was working at albert where i worked for over five years i was the front-end lead there and i'm kind of treating this as a front-end interview for a more let's say junior to mid-level position uh front-end specifically uh using react um and yeah thanks again for doing this um so just to give you a bit of background on how this is going to go um first we're going to have a few conversational questions just so i get a little bit about your background um we're going to go into some more conversational questions about html and css and then we're going to start putting some of your skills to the test with some actual coding that we're going to be doing um first we're going to be writing some more just straight javascript um in a shared text editor and then after that we're going to be putting together a little project and react um so for for the coding portion and really for for this entire experience it's definitely not um intended that you get everything right it's not intended that you finish everything it's really just to get a sense of just how you approach problems problem solving um you know so i encourage you to talk out loud as you're coming up with solutions um and yeah super excited to be doing this with you um thanks for having me yeah absolutely so yeah why don't you introduce yourself and just tell us a little bit about yourself and your background sure my name is noah i have been coding for the last two years teaching myself to code on the side and i'd say about eight months ago i graduated from general assembly's uh full-time software engineering um and uh yeah pretty much since graduation i've been working on multiple projects uh hackathons i've done sprint work with uh with the team and i have a buddy of mine that i work with every day coding going through prep work for interviews i have done some interviews in the past i'm currently doing some interviews now uh so i'm looking forward to uh you know adding this uh this to to my belt and uh have more practice with uh interviewing so thanks for having me once again glad to see you no worries yep thanks thank you for doing this um so yeah i'm curious what what kind of got you into programming well it was uh during the time i was working with my previous employer i was working as a salesman for his uh women's clothing company and uh like many other clothing companies he needed a website but he didn't have the uh i guess the the means uh to make one happen so i took it upon myself because i did uh really care about uh the his business and i wanted to help him so i started learning on coding on the side to see if it's something i can help him with and eventually i just ended up falling in love with it at first sight and pretty much after i lost my job i you know i was hit with a fork in the road um i either you know found something else uh something that won't really be a career for me um or i could chase my dreams and even though i wasn't uh you know as good as i i know i have to be um you know i pursued it i pursued it and i'm still you know fighting after two years uh in this so uh you know hopefully i can do a little bit uh you know i can do a little bit of good in this interview so we'll see still working at it cool no that's awesome and yeah i feel like a lot of folks like myself and included learn because the job that you're doing isn't necessarily development but it's like you know sideways it's like kind of adjacent to it and then you slowly start picking it up uh so yeah i can definitely relate to that that's awesome um and have you have you kind of gone like uh have you decided what route you kind of want to take like front end backhand native uh yeah like what what well i started off uh with the train uh tea tree our team treehouse goodness gracious team treehouse i started off with that and i did their uh front-end web development track so i started off with that and the the possibilities uh was just um endless at that point and after going through the boot camp i realized you know that there's a whole back end to it too so full stack and uh and now i guess uh you know i'm very interested in both uh both sides so uh while i i i do a lot of uh work front end i also do focus a lot of my time and energy uh understanding and learning the fundamentals for back end also they're very translatable um after you do it for a while uh i realize they're very translatable like if you do back end you know you can transfer that over to the front end and vice versa it really helps yeah for sure yeah especially in my opinion um as the front end becomes more uh i guess like programmery like with you know all these like friend frameworks and um it's almost like the front end is it's just becoming more and more complex so yeah like a lot of these a lot of the things that you traditionally just do on the back end are now moving to the front end and i'm yeah totally agree that it it definitely translates um cool yeah just out of curiosity so you know you're on a learning track uh what's something that you've learned recently that that you think is really cool that you wouldn't mind sharing i'll say integrating apis uh using apis and just you know i've done api work uh during the cohort but you just learn so much at a cohort all at once that you can't really digest what you're taking in and so i've been uh just you know really focusing on api uh implementation and then also frameworks too like i got to work with uh d3 for visualization and uh just learning that was was oh man that was uh that was something else um so going through that and you know dealing with the moments where i felt stuck uh but pushing on through uh that that was uh that was crucial for my for my learning and it still is uh like i mean i still get stuck all the time but you know feeling that over and over again you just get used to it so i i'm just practicing as much as i can cool um so yeah integrating apis are you going uh it is the current or the recent stuff that you've done more um how can i put this are you building out like rest end points are you going like graphql is there like one technology that you're you're kind of following yes i i am doing uh restful routing um and you know endpoints for for basically getting the information i want and then creating programs to you know do what i wanted to do logically um so recently i you know i created an app that would uh go through an api of like actors and uh if the actors database of uh films that they had made matched up with another actors list then we would match those results of titles and get all the collaborations those two actors did so being able to you know go into the api digging for those end points and then you know coming up with the logic to make this uh you know transition into the front end was was really exciting and i was able to navigate through that in a collaborative collaborative team so it was a very good learning experience and there was a lot of challenges uh within the team too uh just based on like time pressure and communication so just navigating through those moments to within a team was very crucial i feel like uh it kind of helped me realize what reality would be like if i were to work in the team that's awesome yeah and also thumbs up for uh picking up d3 that's a huge framework super like you can do so much with it uh it's very like instead of like uh you know like here's how you do this one thing it just gives you a bunch of tools and you can kind of do anything however you want so yeah it's pretty massive um but documentation on that for uh react is also way outdated like if you try to really d3 up with react yeah you get a lot of old stuff and it's yeah it's crazy so it's it's very tough yeah now navigating bad documentation i feel like it's such a part of this job sadly it's never never a good place to be but something that just has to be done cool um so yeah so next up i'm gonna go to some just more basic html css questions a little bit more technical um if there's anything that you don't know that's totally fine um and yeah definitely just treat this more as a you know it's really a conversation um so uh first question that i've got for you is uh so like say that you're putting together a very basic uh super basic web page literally just like serving static html um what would be some things that you'd think to do like in in the very beginning i mean uh what would be the context would it be for like e-commerce or uh you know would it be a landing page for a company that wants to introduce what's the context yeah so i guess i and definitely please ask as many clarifying questions as as you need but i guess i just more mean like on the actual um as far as the content on the page go like we can say that it's just like a simple like about me page um but like what are some some tags or some things that you definitely want to put on that page in order to to make it work i see well uh when i plan for uh landing pages uh such as the one you describe i normally just prepare some basic uh layout uh just a template a boilerplate template for an html uh file a structure and i will just start thinking about the things that i would need just actually before i code i would actually wire frame um and see what kind of uh areas or sections or you know information i would like to put on that um on that landing page so i i start there and and then i would you know start creating divs and containers to see how the layout will look like um and just kind of build it from the top to bottom um as as i you know as i would if i were to scroll down the page i'll just sort of you know see uh what i want to see next and i'll probably work on that thing to see it there if that makes sense cool yeah i know that totally makes sense um and then in terms of the so you mentioned having some sort of like starter template um is there any content that you know would be going into that template so that you're not like you know repeating all the tedious stuff that that goes into every web page right so like things like uh you know a hero uh you know hero image or nav bar header footer type stuff i know those things are are gonna be used um i like using you know uh hamburger menus so i have some hamburger pennies uh set up um but yeah uh typically i would you know have those kind of um already in my head in my mind that those are gonna be there but um you know outside of that like the content of the body i would i would definitely be thinking about how i want to you know style it and then how i would want it to organize uh and then just take it from there yeah cool um i feel like because of the things that you just said i feel like this next question you might have a good answer for but could you uh explain to me what comes to mind when you think of semantic html uh semantic html uh to me uh comes to mind for descriptive tags uh tags that will uh you know at first glance uh kind of tell me what it's trying to do so like the class names for example um you know if it's a if the landing page is about me and there's a section where it's like literally about me uh then i would kind of try to you know tag it around there and then you know try to have the the required attributes for say like uh accessibility um there's a lot of uh things that i'm i'm not 100 with with accessibility but it's definitely something i i like to think about as i work on a project cool yeah no and accessibility is another one of those things that has such a there's so much to learn uh like one could really like become an expert in accessibility alone and in fact a lot of folks do um but yeah could you kind of explain like let's say that i don't know what accessibility is could you kind of like explain to me like what it is and why it matters right so um so for example uh when it comes to design and your client your potential client is or a visitor of the page is somebody who's uh maybe a little bit colorblind and uh certain types of colors uh you know would not work for uh for someone uh they will have a hard time seeing the contrast of colors so that's something to be mindful about um and you know when it comes to color things and whatnot also like the sizing of uh of you know of the components um you know are they going to be on the phone are they going to be on a on a big desktop um and i would say like there's also you know i guess screen readers where the html tags uh according to what they have in their attribute uh properties uh would really help in the in the case that uh one of your visitors uh you know happens to be blind and has to go off the audio so having semantics and descriptive uh tags in the html would be very very crucial to uh you know reaching out to those audiences cool yeah that's a great answer uh and thank you for explaining that very succinctly um cool unrelated to those things uh do you know like what some of the http request methods are and could you give me like an example of of the difference between a couple of them sure absolutely so uh http requests would be uh you know something like get methods post methods delete uh inputs and it would be for when depending on what you want to do like if you want to get access and read an information off a database or an api you can get a get use the get method uh for ht http request and then get that information and use that um and then another example would be if you were to uh use the delete method and uh just completely remove it from the database uh that would be you know the method you would use there um so yeah and then the other two would be like when you're creating one that doesn't exist and uh the put method would be when you want to edit something that's already existing and you just want to update it with new information awesome answer yeah that's definitely what they are and definitely how you would use them um cool um yeah so another another change of topic um and this one's super open-ended there's no right or wrong answer uh i'm just curious what are your thoughts on mobile first design and development uh when i think about uh you know in retrospect two years ago when i first you know learned about html and what it is and all that stuff and then um i realized at that time they didn't have smartphones um so they kind of did their whole desktop and then they designed it according they would actually have a whole separate uh link that would lead to the mobile design page and you'd have two different urls but now with technology especially with css and media queries we can kind of adjust that all in one go um but the way that i found um you know just through experience and trying to do this and scaling uh things to be responsive uh mobile first is definitely the way that i um usually start out my projects i try to think of like the most minimal informations that i can use and need and just have basic basic layout for at least uh you know to see it on my phone and from there i would set minimum widths to show uh other other settings and sort of build it from there because in that way uh you know whenever there's another resolution that you need to set the screen to it's uh it's a lot easier to work uh that way than the other way around where you try to work backwards because then you're gonna have to fix a lot of things um you know you have to maybe write double the amount of code um yeah so i'll do it mobile first and then scale it out cool yeah i know that's uh that's a really thoughtful reason to pick mobile first because you do kind of get to basically end up designing for everyone um it it's funny that that you mentioned like the separate thing for mo because i feel like nowadays at least in my experience that's that's like the more like old school way of doing mobile friendly um but yeah if you if you actually just design your stuff mobile first and then uh you know as the screen size increases modified to like fit the extra viewport with available um yeah you end up with really nice fluid designs i will say uh that that when you are thinking about mobile first though that it does take a lot more time on the planning phase just because you have a lot of uh things to consider for for mobile and desktop but you know the planning has been um you know worth it uh for for the times that i you know tried implementing mobile first yeah cool yeah i mean yeah there's trade-offs to be sure um and actually talking about things like mobile first and you know responsive design and potentially like media queries uh we're gonna wrap up this section with a couple questions about css um i'm curious can you explain to me what specificity is in css specificity would be uh do you mean like uh selecting you know ids versus classes or um i'm not sure i'm not sure what i if i understand specificity yeah yeah no you're totally on the ball uh so yeah the general idea like what's what's the difference between a id selector and a class selector and how might uh like what might i need to take into account when using them right uh so for just you know html tags you can do like body paragraph divs and they'll be you know kind of your general selectors uh but then you get you know to use class uh to select things so those would take uh precedence over just regular selectors but over classes you also get ids and ids will be you know you know more dominant for there so if you were to select a id it would take precedence over there and then i think that the the one that's the ultimate one is um in-line styling if you literally just have it in the inline then that one will be the one that will take a priority i believe yeah for sure um so say that i had say that i have an element on the page that has a class and an id and let's say that the class is uh dan and the id is noah and somebody gave it the id selector of noah and said like color red but i actually want to make that blue how could i how could i write a selector that has a higher specificity than that that id selector well i think you can do it in multiple ways i think uh the one i'm not sure if you're looking for this specific one but there's like an important tag that you can put on something so if you uh put a you know put the value as hey like the color is not uh red or blue i forget which one you wanted but you know whatever color you wanted you can put an important tag on it and uh that one will you know be the the one that it will it will use totally yeah and you're right there's a bunch of different ways to do it but uh adding an important will definitely uh the the current uh color that's set um cool yeah last question about css do you do you know like what the box model is and could you explain that to me a little bit uh i think the box model is that every element yeah i'm not 100 sure on this so uh but i i think from my understanding my limited understanding is uh you know i i see a a box every element is a box right and a box will have a border it will have margins and it will have paddings and content and so that would be the box model that you can work off of and uh if you know the margin if you know the border size and its properties you can rearrange them to look exactly the way that you wanted to you can also align them uh to each side or top bottom you can make them center there's a lot of different things you can do with them but essentially all tags are basically just boxes uh literally rectangles um and then you can you know mess around with these properties cool yeah i think that nailed it yeah the box model is it's it's the idea that yeah like you said tags have the content then padding then border then margin and yeah that's how we size things and place them on the page um yay awesome cool yeah so uh great job so far um that that wraps up the first portion of the interview next up we're gonna go into the vanilla js um part of the interview we're just gonna write some functions uh we're not even gonna run these functions uh so it's not about you know making sure that they work 100 of the time it's really just about taking some uh problems that we have and seeing seeing if we can't solve them so you've got a link that i sent over if you could just share your screen real quick um we can go in there and yeah start knocking some of this stuff out all right so i just want to check that uh let's see here i just want to make sure that you can't see this correct yep that looks okay great perfect cool yeah so we can ignore the fir the right hand side in fact if you wouldn't mind just taking the like dragging the window to just be smaller yeah so we can just ignore that for now um but yeah so here's some um prompts basically this file is a bunch of prompts and empty functions um the idea is that you're going to fill out the the body of the empty function and then underneath every function there's a little example of like how we might use it and there's a little comment saying what we would expect so if you have any questions about any of the prompts or really anything at all i'm definitely here to help you out but yeah why don't we get started with the first one and let's write a function that takes uh two numbers and returns the sum of those numbers right okay so we have a function here and uh i guess i'll use this function down here um as the as the example it's taking two arguments so i i know that i have one number and two number and uh this function i'm going to assume that it wants to add the um the two numbers uh fed into the function and return um the the sum is that correct yep you got it okay great so i would have then in this case i would just say number one and number two um as the parameters and uh that would just return number one plus number two would that be okay um or did you want uh this to be in a different uh format well i guess it's intersecting a number five right yep so yeah no that's perfect um and i figured like you know we'd start off uh nice and easy um and yeah there's no i have literally no expectation for like how to implement them it's it's really whatever you think is is good so yeah that's cool uh let's move on and try to do this with a function that takes any number of arguments and returns the sum of all of them so for instance here two plus three plus four plus five uh should return 14. uh-huh so would this be like an array or uh no it would just be just numbers any any amount of numbers yeah so if you can implement it with any amount of arguments that's great if if we want to convert it to an array that's totally fine as well well i'm just i'm just wondering like how i would make it so that the parameter knows how many that to expect is there a way that we we know how many to expect um so there are actually a couple of ways uh and i'm just gonna dive in here um real quick so there's there's the old school way and then there's the new way um in the old school way i'm just going to pop this open uh the the arguments keyword in a function is actually like an array of the arguments there you go that's like a keyword in javascript functions that is is an array representation of the arguments that were given to the function um interesting so are you are you to say that then this would return me uh in this in this format i believe so but don't don't hold me to that because i haven't actually used this method in a while because there's a fancier newer method of doing this and now you can actually these days you can say uh in the function argument dot dot um args or whatever you want to call this is the the name isn't important um oh and that would just turn it into numbers or that it'll spread the array yep that'll that'll spread the arguments into an array so cool yeah i'll just i'll delete that and um so now args is an array of the numbers that were passed in right so in here i would then um you know iterate over the array of the elements of the numbers and uh just um you know have like a uh have like a variable to hold that that sum as it accumulates and then return that sum so i can instantiate here like let's uh sum equals zero um and then i can start a for loop here to iterate through that argument so i would say uh for let i equal zero and uh i is less than the length of that uh args i guess it would be you know args dot length right yeah so since we already spread the args you don't have to spread them again it's so you don't need the leading dot dot dot you can just say rs yep oh okay cool gotcha thank you for that uh and then i would just iterate through the whole array um and i would say you know arts that each index uh hill sum could be plus or above plus equal to that then um after the loop ends i would return the sum and i think this this would give you the correct answer cool yeah that totally checks out nice uh i didn't know about this uh spread operator for arts in here like this that's that's pretty neat yeah no definitely and uh so you can also use that to let's say that you have um in this some i know why we would do this but we could like a comma b comma dot dot args if you scroll up just a little bit um and then what this would actually do with the arguments below is uh a would be two because that's the first argument b would be three because that's the second argument and then rx would be an array of four and five because those are like the rest of the arguments um but yeah that lets you do some pretty interesting things yeah interesting very cool cool so here we go a would be you know a would be two and b would be three yep and then the the odds would just spread the rest yep so ours would be four four five four five contained that's really cool that's really cool yeah cool let's yeah let's see if we can uh do this next one so this one we want a function that takes two strings and it returns um true if the second string is in the first string in a case and sensitive way and i would say if we want to if we if we don't want to solve for the case in sensitive way we can just solve for like the case sensitive in which case string includes and in the example would return false um but yeah if you can think of a way to do this in in a case in sensitive way that would be great right so then we have uh two uh two parameters here sorry i'm just going to turn on my light sorry yeah absolutely all right so here i would i guess taken be taking in two strings so string one and string two um and i want to check if uh if the second string is in the first uh string is that correct yep and so then uh there's a there's a method here for strings um string prototypes i think it's called uh includes actually it actually i think it is called includes so if we say like stream one includes and then pass in the second uh string as the argument um string two i think this would give us uh true or false and i think you mentioned something about um you know if there's a way to uh not care about the case sensitivity so in this case what we could do is we could just say string1 to lowercase and make everything that's inside there just lowercase and then we can say then well the stream one includes string two to lowercase uh and then that would pretty much make everything all the same case uh and then we can you know return return the result of that yep that so everything you said just checks out there there is a bug in this function as it currently uh is written in that um yeah so okay so i guess my question is would would calling string um string one two lowercase modify modify the the first string or no yeah i'm yeah i'm not sure about that uh i would have to uh just check the mdn um yeah i'm not sure yeah i'm not sure if uh i guess i can just tell you so um yeah two lowercase returns a new string so returns a new string yeah so it doesn't it doesn't actually affect the value so okay so then i can have like another you know let temp or something like temporary string uh contain that and then um oh okay so then so then we don't see here the uh since temporary string will be the new format yup um i would have to check you know does temporary string include string to the to lower case and i think then this might do the trick yeah for sure that would totally work cool so we've got let's see we've got here in the interest of time let's do one more but i'm curious out of the next three so i i feel like um [Music] let's see here so you got get names which the intention is to return an array of the value of the objects that have that name uh in them uh we've got get largest number index which the idea is um to return the index of the largest value in the array and then we have uh this this last one is the heart in my opinion the hardest question out of all of them which is to return a function that lets us call if you can see the example here we want to be able to say like a weight delay and then a number of milliseconds and then implement that in some way shape or form so out of those three do you have a preference for one that you'd want to tackle so dealing with promises uh then we've got some object manipulation and more uh array manipulations yeah i think with the async function i i understand what it's doing there it's basically uh setting a timeout right i think it's set timeout and then after we want to do something with it maybe console logging it um and then we just want to await that return um right um but i'm not i it's kind of vague i'm not sure you know if say if the time is you know of the essence right now i i i would rather do something um a little more i guess simple uh than the last one oh absolutely yeah that totally works yeah so any of the other two i think will be okay um yeah perfect let's do let's do get names um yep so the idea here is if we look at line 49 how it's being called the idea is that get names takes an array of objects and it returns an array of the values for the name property of those objects if they have one so as you can see here uh the objects being passed have a a equals one so in the in the return we don't expect anything we really expect you know the strings jane mark and sophia um so yeah the idea is given an array of objects returning an array of the names of any objects that have that name property does that make sense gotcha yes it does i think it does so the the argument would be an array of objects right yep so an array of objects and uh we can just say i guess array be an array and um yes what we're looking for is within the array of objects we want to see if the uh if the key it equals to name and if so then we return that value of whatever that is right so we're going to need to loop over the array and check inside that loop if the object contains a property named name and if so we can uh we can enter that uh information and push it to like a results array a resulting array that will contain all the names and then at the end of the loop we can just return the results and i believe that that would do it that checks out with you okay cool yeah so i guess what we can do here is we can start with the uh you know iteration of the array we can say you know four uh let i zero on i is less than a rate length and here uh we would now be iterating so like if we say array i that will be the object at each section right um and at this point since we are inside an object i think object has also prototype method called uh has own property i believe that's what it is um i think it has own property but uh that would be a way to check if um it has anything that's uh you know that's name so let me just look this up because uh i don't remember it had its own property right so uh this would be uh give us true or false right true or false and we would check it through the property right so uh if this property has property called name then this would uh give us true right um so we can say then if uh if that's true if that's true uh equaling to uh uh name well yeah that's that's what i'm doing that's what i'm doing with this that's yeah anyway uh you're missing a closing parenthesis there for sure so then here uh that means we have a match and now we want the value of that so we would say array array dot name and we will push that into like uh you know results and we can um you know instantiate it here and um we can do that for every you know for every object and if it has it we'll just go ahead and push that name um and then after the loop ends we can uh return the results okay i think that should do it totally um yeah honestly pretty impressed that the has owned property just came to mind because that's a super helpful method but but i feel like one that i don't see that often um and it's definitely cleaner in my opinion than checking for like dot name just as you know i personally like using that returns true own that object actually has the thing and it's not in the prototype chain um so it's just a little bit safer um in in my opinion but awesome this has been honestly great so far um and yeah so why don't we yeah if you just want to give this a save and then we can jump into source uh slash app and then now we can start talking about the next portion of the interview which is going to be building out a bit of a um so it's going to be a react uh project the idea is that we're going to be playing a pokedex like thing and i'm just going to go over the the requirements there on the right so we're going to be implementing a pokedex and i think at least i look to get some visual idea of what i'm going to be working on so why don't we click uh the designs and design specs on the right-hand side so it's in the oh sorry it's the link in the yep so can't stress this enough it's not about making it look perfect this is literally just an idea for like how to or like how it'll end up looking if we get to this if we get through the styling portion um that said definitely more interested in building out the functionality so so the general idea here is that we're going to have some sort of select at the top that lets you pick a pokemon and then based on the value that is selected we're going to be loading a sprite of the pokemon uh it's name and a little description um and then at the bottom we're gonna have some we're gonna have a couple buttons next and previous where if you click you know so if you're on bulbasaur which is pokemon number one i believe uh going to next would just load up the second pokemon um the idea is that you know previous would take you back um here's the general styling that we want for this but like i said definitely prefer to focus on functionality so if we go back to the code sandbox um yeah so that's generally what we're gonna be building and then yeah so here's the the requirements is one having a drop down that has a list of the og 150 pokemon by the way i've already written down some um helper api methods so a lot of that's taken care of um for us um but we can still dive in there and look at you know what those methods are and how they work but yes we want a drop down of the the original 150. we're going to display a card that displays an image the name and a brief description of the currently active pokemon and then we want previous and next buttons that when you click them it'll you know go to the next pokemon or the previous pokemon depending on what button you picked um so yeah the feature list is flexible if you have an idea for something you'd like to add feel free to suggest it this is like i don't actually care that you know how to implement a pokemon or a pokedex it's really just about seeing how you approach problem solving and react um so yeah if you have an idea for anything let me know and great this has you know the designs don't have to be exact uh but there they are and we actually already made the select um because styling those can be kind of a pain um so that's in components slash select um yeah there it is this would be too much to like expect somebody in like wide yeah styling celebration yeah right but yeah so why don't we uh first let's go into the api and kind of just walk through those things together and by the way in terms of actually implementing this um you can just you know remove the prompt from the return and then just replace it with whatever so on line 16 where it says return prompt um you can just return whatever it is that you want to you know call the thing that you're ultimately building so if you do like return null or whatever it'll just you know start from scratch um but actually so on this page you can see that on line one we have import get pokemon list and get pokemon description and on line 5 and 13 we have this function that's kind of showing you what the return value is from both of those things so get pokemon list um returns a list of the original 150 pokemon and then get pokemon description for a given pokemon should return in the description so um there is a console in the prompt and you should be able to open that console and see what those yeah there you go so the first one is yup get pokemon list so that returns a list of the yep so it's it's name and a url i guess um and that's what that looks like and then get pokemon description i believe we're hard coding it for bulbasaur right now but if you want to scroll down and take a look at what that response looks like uh yep it's it's that and then if we want to go into the actual api folder so we can see those functions nice so yup get pokemon list um that's that one's pretty straightforward and i don't think that um really anything has to be done there uh get pokemon description right now it's saying uh pokemon species slash one which is bulbasaur so we have to be able to get the current number somehow um don't worry about the regex that's just normalizing some wonky formatting that's coming back from the api and then finally get pokemon sprite url again is returning bulbasaur but that just returns the uh url that points to the image of the pokemon so i guess can i ask you a question about this utils here um like this is the bubble store one and i guess that's uh you know gonna be the first entry of that array that we're getting from the api uh the list so if this is like 149 then we'll get you know mewtwo or whoever the last one is so yeah two that is actually so on line 22 if you see the url is uh pokey pokey know at the end it's slash pokemon species slash one so the slash one is actually what's selecting bulbasaur it's not okay so it's this url right here then um is it wait i don't know yeah so it's not it's actually a totally different url the intention here is that the get pokemon description should probably take some sort of argument for the number that for the number one that you want to get so for instance you know bulbasaur is one so we can just hard code pokemon species slash one but if you change that to i think the next one is ivysaur we would actually want to get slash pokemon species flash too and i do want to say that the get pokemon list does return them um in order so if you select the pokemon using if we look at good pokemon list for instance and so you've got ivysaur open right um that is the that's the second item in the array that is actually the pokemon with uh the number two true so on line 22 here if we were to change the one to a two we would actually get the description for ivysaur instead of bulbasaur okay if that makes sense nothing else in the thing changes right in the in the string only only the the number of the pokemon changes yep exactly so like i mean let's just say hypothetically speaking i you know throw in here a user input here uh then the user input can be any number one through 149 or like 150 i mean and we would get that right okay got it okay cool so yeah i mean if you're if you're good to go i'd say i'll just turn it over to you and you can start chipping away this if you need any help with anything at all like where to start or really any clarification around anything just let me know so i guess this select here um and then we have a card and the card will be an image of the of the bulbasaur uh would it be the the url on each on each right here would this be an image so there is one more utility function uh that would also need to be updated to be able to take any um any number oh this right here okay yep okay got it and so then we would have uh you know that image come out here uh and then we have the name of the pokemon and then another component or or another like div i guess for the description uh so this description would be uh from this right here okay got it now on our app level we have log data and log data will get me the list and pokemon description yeah log data is more more just so that we can see in the console what the what those functions return okay so if i were to if i were to down here return let's just say like the the where's the uh not the prompt but the select yep so that's in slash component slash [Music] select okay and here i can return and here we can return the the select so here we have a select and in the select component we're gonna need to get uh the props so we're gonna have to drill this prop down here um to get that so what we're gonna need couple states we're gonna need the state of uh and i'm sorry like about how much time do we have on this i just wanna yeah no that's a really good point so we kind of went over in the first section uh so technically we have and if i guess the better question is do do you have maybe like 20 to 25 minutes to to tackle this uh i i don't know that i can finish that uh oh we absolutely yeah like this okay so i intentionally made it so that this will take longer than the time we have if you were to finish it uh i know there's a mock interview but we just give you the job immediately uh the idea is that we have like more more than enough for you yeah um yeah can i put 25 minutes down then and we'll just work on this for the next 25 minutes see how far we get sure perfect cool cool so here i'm thinking about you know i want to render in this right here the select that we had before uh this thing right here and uh the idea is that i get all the um the array um contents of of that api so this list is what we want precisely so uh let's see let me just take this so here we could say pokemon list and uh this could you know take in that top as well so one thing that i want to mention is that the select is it's just a styled version of the regular html select [Music] so it has the same api so basically what you have to do in order to render inside of it is give it options yeah so this this is not doing anything other than um styling the the native browser select so i mean if you go to mdn uh if you if you search like mdn select you can see what the api looks like yeah drop the prototype and just do select select mdn perfect so i'm looking at this one right here yep so yeah so basically a select is um it's got the opening and closing tag and then it has options and every option yep every option oh i see i see i see so uh is in this do we have the uh access in the select component um well let me see here in the app so so select it needs to uh iterate through the the array of these objects and inside each object is a name that we can use to put into that select as option values absolutely so we can so we can look through that array but i'm just wondering um you know how you got list here and you just uh ran the function get pokemon list um yep am i too am i to use that down here yeah for sure so um if i say like uh for example let um you know const pokemon list equals uh get pokemon list for example would i have that array and pokemon list now uh so sadly wouldn't because uh get pokey let's return yep so um i could do that yeah so there there is a specific way to do this in um hold on one second in real which is so you're you're kind of getting use effect eight to some yeah yeah because you can't just await in a regular um you know in a regular component so yeah we're gonna need to as you said like you use use effect and probably some state to you know hold on to the initial value and then we have that uh data then we can use the use date probably to update the value nice okay so here we can say um fonts and this could be you know pokemon list it's like pokemon list as what we want this and this is going to be an array of objects and we want to await the get pokemon list yep so i'm not sure if this this works but what if i were to you know set pokemon lists um to await pokemon list would that would that be possible like this yeah so that's not going to work um but is the right way to go for sure okay and the way that you would do this is there you go there we go yeah so in here you could drop a use effect which takes a function and yep you only want exactly so you only want this to happen once so you can pass that empty dependency array um and you could kind of yeah you could do this a couple different ways if you need help thinking about which way to go like i said i was thinking like we can um because what i want to do is i want to make that api call but i want i want i guess a variable to hold it and then set that pokemon list to equal that the result of that function variable so if i was saying you know like api data and i wait the uh get full promised um then api has that information so exactly then said set like what i call a pokemon list to equal that high data yep this is kind of if you don't mind i can totally help you out with this next thing because this one's kind of more specific but um so you can't you you have to use a weight in an async function right uh all right yeah but use effect doesn't actually want you to make this an async like the outer function an async function because then it'll return promise so what you can actually do is just write a little function that wraps exactly what you've got inside the user effect so you can call it like uh like function like getdata or something and then call it after you define it or and that would have to be an async function okay and so you're saying moving this up here yep man and then calling death later yep okay and now i believe that um yeah your pokemon list is going to be the correct uh yeah it's going to be what you want so uh so with this select then um do i want to render that option down here um and just call it option yeah for sure so you've got the you've got the data right the the data input list so yeah so you want to basically iterate through that array and make an option for every item the array right so i guess i could use it for each so for map yeah map map will actually be the key and the actual element there are like the actual pokemon so yep so the first item is actually going to be the yeah the pokemon the second is going to be the the key or the index rather yeah right and uh this i can i think this might does this have to be also inside um parentheses i mean it does okay i thought so yeah and so one thing that i would do here is wrap wrap the entire pokemon list.map and everything and yup and curly braces so that it actually evaluates as javascript oh um would it be okay to also like write it outside this return and then just call it down here yeah absolutely okay so like for example if i do have like fonts pokemon names then uh it'll be pokemon list map right and this would be pokemon all right i guess i could say name my name and then down here i can just call that it would be pokemon things now we want to render all the options inside this map yep so this would be uh we would have let's see here in this pokemon list it's in the map uh so the pokemon name will actually be an object right could be an object so if i do like if i were to console.log the pokemon uh oh right so let's just say this yeah that that reads a little bit yeah yeah that would read a little better right i thought about that too so then we can just uh access you know pokemon.me and this i would expect right yeah there you go yeah right so now this um if we have the names then uh what we will also have uh is uh options here to the option i forget the exact same textbook so we like our option value let's copy this here option value and inside this value we can pass that uh pokemon name and we also want to display it right so we can display that okay here and you also have to use that id tag so i would say like key equals idx i think that should do it um cool but something's not yeah so the select uh it needs to wrap pokemon names so instead of making it a self-closing tag uh you're gonna have to yeah just make that an opening tag and then add a closing tag that okay and one more thing uh you're gonna have to return the option uh-huh great and now we have a list of all the pokemons yeah awesome um yeah awesome um and then i guess i don't know if that leaves us enough time to kind of take this further but i know you have uh the design here um so we would want this card here um i guess in the card if we have a components for that nope so yeah this one you know you're kind of on your own to implement it however you think is best indeed i mean yeah the interested yeah i was just gonna say yeah no do you yeah in the interest of time if you wanna drop it directly in the app.js by all means if you want to make it a custom component it it works as well cool so we can do you know part here um [Music] and here i would say uh so the card would have to have um wait where is that so this card is a div containing like three things here so let's see here here's the card so i guess i don't i i don't use style divs i i don't know how to use them but i guess from here we can um you know send the the state of the of the hmm what would be the best way to do this i if i can just think here for a moment so the idea is when we click bulbasaur here um we need to access the the sprite right so let's see how that looks like uh so this this will return this okay so now the sprites would have some i'm assuming if we change this number then is that right if we change this number we'll be able to get it yep so if that's a two it'll be ivysaur if that's a three it'll be venusaur and so on okay and so then if we have the id for the options and the options match up to the the main so for example if you have index zero here then we have bulbasaur so i'm pretty sure we can use that index number here as the key to pass to uh you know this get pokemon sprite url and we can say you know the index for example the idx as i called it yep and then we can return that uh as here like idx now we can just pass that key into this function to get that url so here so now the card is um you know gonna be in the app level so we can put the card now let me just do this real quick just that way i have hard all right so now if you save this and in the app level we put pokemon names and then the card here or no not outside the select card is not defined right i have to import it so i will import card from i think it's uh components cards flash card this is slash yeah slash card like that there you go so we have the card here um now this card needs to have that sprite so that's right let's see the app i can um i can get font sprite image or pokemon glitch i think essentially what we'll have to do is we'll have to call that function um here too uh yeah so for the image itself um the we want to do it on one selection right here i'm trying to yeah i think maybe that's the piece that would make the most sense to focus on for a second is given so okay so if i think about the api utilities they all kind of expect a number which is like the current um you know the currently selected pokemon uh number so bulbasaur being one ivysaur being two and so on um so like should we maybe like add a way to store the currently active pokemon so that we can then so we'll have this uh key here uh and is there like a on select i i haven't used select um like ever so so i can say on change then uh and then set the state to be that pokemon name yeah so how do we do this set so i'm actually curious what happens if we do this so what if we pass a function to the onchange what kind of function just an anonymous function that takes uh that takes an e or an event or whatever you want to call it and then just console logs that event so we can see what we're working with you know um so you can just do uh console log e and instead of const declaration and now we're getting uh i think it's because i i stopped doing something here yeah for sure yep yeah cool so let's clear the console maybe with a little uh strike through next to filter just so we got a clear console filters uh to the left of it this yep okay perfect and then let's try changing the select so in in the ui just uh okay cool cool so okay so we do get that and now if if you wouldn't mind on line 39 on the left just do e instead of console.logging e if you could just cancel log e dot target that value uh-huh yeah that's i i understand where you're going with this so then we have these and then if we change the select it will i assume give us the the value of the so now we have the name the value of the name yep so which is which is what we're setting as the options value right as the options value where do you see yes as the options value right so i guess what we can do is the value we can put it here is uh the index tube that way we can pass the value to the to the card yeah no you're totally right yep one thing though is that these are gonna be zero indexed and since bulbasaur is the zeroth index but first pokemon um yeah you're gonna have to just add one to this do you mean like so yep and now we're like super close to being able to actually start using those utility uh api calls to to get this data right right because then now the value when we click uh we can um you know instead of console logging it we can set it to a state of like pokemon index for example yep so we can go back to what uh it's a pokemon index and then it would be uh it would be a string it would be a string it would be a string yeah and so that that should actually be fine because all of the api calls don't actually they don't care yeah they don't care if it's a string or a number right so now we can say set pokemon index to be that value and we want to also run the function with this uh with this um when the card goes so yeah i i i'm sorry i'm not very quickly uh quickly doing this um oh no worries i think about this uh for a moment but i'm thinking so on change we can now click on like any of these and we should be able to console.log or i mean we should be getting the index in the state and we want to pass that state to the card so here we can say pokemon index equals uh pokemon index and now we'll have that access to pokemon index and card and so we can here get the pokemon index and um we want to get that um i guess we'll use a use effect again here um am i thinking in the right direction use effect here to run the get sprite url with yes um yeah this is maybe one of the confusing things about the api utilities that get spread url just returns a string so you don't actually even have to use a use effect um so we've got we got a couple minutes left right yeah so why don't we just throw an image tag between the the div let's see if we can't just render this thing yeah right right i see where you're going with that so let's see here okay so we have a div and we want to throw in an image um source here um and yeah uh card no uh what was that was that uh details thing is it even imported here no it's not yeah so we let me i'll go see what it what it is called i think it's uh under api right api yep so let's uh get pokemon sprite url get that pokemon sprite url yep um this is in uh components yeah it's card so then api utilities yep and if you just wrap uh get pokemon sprite you're all in curly braces because it's aimed export okay what's going on here let's see oh it just doesn't like that your image tag is still open oh okay this would be the source of that so it would be get pokemon sprite url uh and then pass the pokemon index number into it yeah can we try changing the the pokemon uh yeah i don't know why though that's totally fine no that's on me i probably just wrote the wrong url but love it it's great we're selecting our pokemon and rendering it obviously like well i mean first of all obviously we're in a time crunch uh yeah and like i said i can't stress enough how this is like i intentionally put together a bigger project than the time allows we've got state management we've got looping through an api response to like build this thing out we're rendering an image that's changing dynamically based on on the currently selected pokemon um yeah no like i'm super happy with how everything went um so yeah why don't we call it bring don back in here and yeah have like a grief hello how's it going i think it's going pretty well i think so too that was awesome i liked kind of just watching from behind the scenes um looks like uh your camera's a little frozen dan really um i'm gonna turn it off and turn it back on okay see if that solves it um are we back in this here no you're still frozen that's okay that's not a big deal um i guess that's kind of weird um but you know feel free to fiddle around with this but uh noah how did that feel uh that felt uh it felt good it felt like an actual interview um i think uh given the scope of what was happening with the react project um i it did catch me a little bit off guard because i wasn't sure of um you know i had to kind of think about the pieces like like very quickly and uh i think concept wise i was able to pick it up but just you know using this uh code sandbox was new to me too so just navigating through that and um how i normally test things out with console log i i just wasn't um i wasn't it wasn't really clicking for me here uh with the code sandbox it was a little bit uh you know uh like i guess a little awkward for me to use use it but um working with uh dan was you know extremely um helpful because he he didn't give away the answers um in a way where it was like he was doing the work he his his um his tips were very um helpful in the way that he delivered the tits yeah so i really appreciate that um that you didn't give away the answer you just kind of pointed something out that that would click in my head and be like oh i know what you're talking about and that was that was key for me so thanks for doing that awesome um because i know i know this stuff yeah no i mean honestly that was that was pretty clear um and i think honestly you bring up a really good point around using just tooling that that you're not used to i feel like that's something that is is super common especially now that interviews are happening more remotely there's i mean even code sandbox specifically so i've actually done interviews in code sandbox before and one of the things that trips me up is that um prettier is always like enabled by default so like anytime you save uh it like formats your code which is great i love prettier to death but even stuff like that can just kind of like trip you up a little bit so i think part of yeah part of the interview practice even is like getting used to working with like tooling that isn't necessarily your own um in the past i've even had to code in like um google docs which is like absolutely bonkers um but yeah i mean it it totally happens but i think you like handled it super gracefully um to be honest from my end couldn't even tell that you were like having some uh problems with the id that seemed pretty smooth well any uh final feedback for him yeah for sure so okay so i think the first uh the first two parts of the interview you absolutely crushed uh i was really uh away by like the knowledge on things that i feel like for a front-end position which you know i'm really looking at this from a front-end position like um you know your answers were like very knowledgeable in some cases to the point where i like almost wasn't expecting it like giving like detailed responses for like how all the http methods uh like what they are and what they do like that was absolutely awesome um i feel like just in general you were so easy to talk to and like you know you you kind of like uh led the conversation in ways where you would like answer a question but also give some like additional feedback or additional context um which was i always think that that's just great something that i personally like to do in interviews as well um because like it's not really about the question it's just about like the conversation and like the things that interest you and that sort of thing um so i took some notes down yeah like your your answers for like what semantic html is for what accessibility are like they were very like uh in depth and both in depth and then also like understandable uh so i almost feel like if i was like thinking of myself as like a layman or like maybe like um somebody who's less technical like you'd be a great person to have on the team to be able to explain concepts to folks that that really need to understand them at a more like base level um which that's a skill that i personally think is super invaluable because a lot of times developers can kind of explain things in an overly technical sense when really i'm trying to get like the high level of what something is um sometimes it seemed like you were unsure about something and then you absolutely crushed the answer such as css specificity like what you're like i don't know but then gave like it explained it exactly exactly how it is um i think in the javascript portion um so you pretty much nailed like all the problems one of the things that i noticed just in general which this is super teachable um but you you tend to lean on uh like for loops which i don't know these days i was kind of just expecting like uh high order functions uh like uh filtering and mapping and stuff but eventually that kind of came through in the uh react portion so that was cool um you know just like the minor i i feel like there's maybe like a bit of a lack of knowledge when it comes to async functions which again like super like learnable like that's definitely like on the more like advanced side of js um but i did i did notice that um you know there were maybe some some holes there that we would have to like if we were to bring you on board we'd have to like you know help you understand um how those things work in a more deeper level um but then yeah in terms of the react project uh i feel like i got a good sense that you know the act at lakehu working level um and again there's things that we'd probably want to uh you know we'd probably have you like pair with a more like senior developer so you can uh come to some of those solutions maybe a bit more quickly or in a bit more um i guess what am i trying to say i guess yeah just come to those solutions yeah right so like for instance like being able to like fetch data from an api uh await the response and then update some state in order to be able to use it uh because like react isn't gonna let you write a async use effect function directly you can't use a weight in a component so i have to know how react like juggles that sort of thing um also like not knowing select is like truly whatever because like i feel like these those are the sorts of things that you just kind of like do maybe like three or four times and then it's um but yeah like it was it was interesting seeing your process go uh going from the data fetching to a input and having to like update some state based on i to be totally honest i i wish you would have gotten to the solution a little bit more on your own but at the same time given how the rest of the interview went um if this if you know i had xyz company and we were hiring for a uh like junior to mid-level developer i would say i would kind of put you like in the middle like definitely more than junior uh probably a little bit under mid uh would definitely want somebody like you to be to work with a um more senior developer on your first like few features for sure just like you know uh drive home some of the things some of the areas that i kind of found that were a little bit more lacking but that said i would yeah if this was a real interview i'd say like let's move you on to the next level for sure wow i i wasn't expecting to hear that um actually so i'm surprised to hear you think that i'm at a level where you would consider me for the position um if i understood you correctly you would take a chance on me to work with me and train me is that is that did i understand you correctly yeah no 100 so the the general sense that i got is that you know the core concepts which is ultimately to me much more important than like the finer implementation details um so i think you have like a really solid foundation for getting paired up with somebody more senior and after like you know after a few months of like pairing together and working on features together you being able to like go off on your own which is really like that's that's what i expected from a mid to like a junior to mid-level developer yeah so i think you yeah you totally killed it normally like yeah thinking back to when i was hiring back in the day for somebody in this position i wish we would have been talking then because yeah we would have been like yeah cool let's bring him on teach him some stuff and then have them start you know hacking away our code base and that's a wrap i hope you enjoyed this i'm actually going to leave dan and noah's links their linkedin links in the description feel free to reach out to them and thank them for doing this if you like this video be sure to like it share with at least one more person in fact if we get 250 likes i'm going to ask dan if he'll do more of these i'll see you in the next podcast episode happy coding everyone [Music] just see everything

Channel: DonTheDeveloper

Views: 180,897

Keywords: front end technical interview, front end mock interview, web developer interview, technical interview, technical interview preparation, front end interview questions, front-end interview coding challenges, front end interview experience, web development 2021, front end development interview questions, front end interview questions 2021, front-end interview, mock interview, online interview practice, javascript interview, react interview, donthedeveloper podcast, donthedeveloper

Id: vomuCMmoNyE

Length: 93min 39sec (5619 seconds)

Published: Mon Apr 26 2021