REST Countries API Challenge - PART 2

hello everyone welcome back to the second part of the rest countries api challenge and today i'm going to try and finish everything so i'm going to create my uh dark mode toggle and i'm going to delete my search input as well as my individual countries page and i think i'm also going to add a button to remove a country so before we get started there are a few things that i'd like to mention between now and the last video i actually didn't commit my changes to github so when i wanted to record this video i didn't have my folder so i had to redo everything and i'm going to go over the code in a few minutes just to show you the changes that may or may not have been there and then this is my api that i have open because we're going to need this information of course and then this is the website and the reason why i have this website open is because for our country page for a country component we're going to need this to get the country information so let me just open these two right there so this is my uh the folder that you download from fronted mentor and this is my workspace so before i get started there are few things that i like to do so that i don't have to keep switching windows so i'm just going to copy my design folder copy this and paste it there like that and then i'm going to grab my git ignore i'm going to grab everything i'm going to come in here and i'm going to paste it below below this and then i'm going to change this to line 29 and then i'm going to change this to line 35 and 36 just so that it doesn't confuse anyone who's looking through your file folders and then i'm going to grab my readme and my style guide still get marked on files i'm going to copy them and i'm just going to paste them inside there like that okay so once you do that we can just close this down and then we can place this to the side and let me see i already started my development server using npm start so it's already running so you can do that before we begin and let me just go over my code to show you what may or may not have changed remember to save that so in my public folder i only have the index.html i changed my actual let me increase the font size i changed my theme color to the the dark gray theme color that you have this right here so you can do that or not it doesn't really matter and then i change my description and i linked font awesome there's my linked font awesome is because of this icon right there uh really only this icon practically and you can use react icons if you want if you know how to use react icons but i'm going to use font awesome because it's much easier you can just link the cdn and then you can use the the icons directly and then i think that will be for the index html so i'm going to jump into my source folder into my components folder i have my contours component as always as you can see we imported use date and use effect we have our url to fetch our data and this is my my state values and this is my use effect in the last video i may have placed this above like this you can also place it inside the use effect but it doesn't really matter it's all a matter of preference and then this is my country's class that i'm returning a section of which contains everything inside this the flags and all the details and then i'm rendering them in an article with the dave this is the image and the h4s as you can see i think this is more or less the same as we did in the last video okay so we can continue to look through that and i think that will be it for this i'm going to place a time stamp in the description in case you don't want to skip all of this and then in my filter function not my filter function but my filter component i have a form so the form is the casing for everything inside here i have my input here with the type of search and then i have another div for the class of select and then i have my select with my options each one of them and this renders this as well as the input that you have right there so you can close this we can look through our header and our header component just returns an h1 and our icon from font awesome which it has a class of fas and fa-moon like that and then in our app.js we just import our components and we render them and in our indexes of course this contains all our styling now i think the most major difference that we'll have is actually our class names but i don't think that really matters if you're going to style it by yourself if you want to use the styles that i have here you can just grab them you can see where i've placed them and you can grab them but to be honest it doesn't really matter because you can style them on your own okay so i think that will be it and let me just confirm in my index css let me go to the top i have my my font of course and i have my my variables set up at the top the primary colors now the reason why i did this is because for the dark mode toggle we just want to change the color in one place we don't want to have to keep on uh scrolling down and checking where we have our color and changing it manually we don't want to do that so i'm just going to set up another class that we are going to set up in a moment we're going to set up another class and then move these colors down for the light theme and everything else so i think in the last video we ended by installing react router dom which i actually did as you can see i have react shutter dom version 5.2 and to get started i'm going to go into my app.js like that and i'm going to go here and i'm going to say import uh we're going to import a few things we're going to put browser router as the router like that as the router and then we're going to import the route like that and this comes from react router dom and then in order for this to work we need to uh place our entire component inside the router tags like that so i'm going to just go there inside the router tags and the reason why this works i i only change it in one place and it changes at the end is because of an extension called auto rename tag you can search for it and install it and then i'm going to set up my routes okay so i'm going to remove this for now and i'm going to say for the first route i want to display my country's component right oops i want to display my country's component and the path for this will be the slash which will be the home page and because i don't want any errors i'm going to add an exact prop so that only when the forward slash is the route that is navigated to that's when the country's component will be displayed and then another thing i want to move this down because i don't want the filter to be available when we're looking at our individual countries component right right and i'm just going to leave my head at the top because i want the header to appear on every page so i'm going to save that and this should still work so we are okay and then let me just move this to the side a bit let me place it like that okay so what do i need to do next text i want to create my country my country component so country.js country js don't get confused this is countries and this is country individual country and i'm going to say rafce and then i'm going to return my fragment there with just an h1 saying country data like that so we can see if it actually works and then inside my countries js we're going to import something called a link and i'm going to place it at the bottom so i'm going to say link and you can see it gives me the option to auto import and the link is a component that comes from react router dom so i'm just going to say auto import it and if you go back to the top you'll find that it has imported it as a named uh export from react router dom like that so i'm going to link this and this tool will be going to a route that we're going to create actually let me create this root first that you understand why we're doing this so i'm going to go back into my app.js and i'm going to create another route like that and this route will be a bit unique because the path for this will go to i wanted to go to slash countries and then forward slash and then the name of the country like that so remember this is the double column that we have right there and then we are going to render a children's prop a unique children's prop and inside this children's prop then we want to now render the component that we want which is going to be our country component like that and then i'm going to save this now this path okay country is not defined so we need to import this so import that country like that now remember this path please please please remember this part you can have the slash countries or you can choose to remove it but i just want to have it so slash countries and then uh colon and then the name so this is the the part that we're going to place in in our countries right there so i'm going to place it inside curly braces and then i'm going to have template literals so that i can have the variable and the reason why i want to have the variable is because this is dynamic it changes with each individual country it changes with each individual country so i want to grab it as a variable so i'm going to say this the path for this is slash the path for this is slash countries and then forward slash and i'm going to say place my variable like that and i want to grab the name like that okay uh remember please remember this if you have the fourth such countries in your updates then also have the first less countries in your country's js if you didn't have this if you removed it please also remove it from here others it won't work so i'm going to save that and then for the text for the link i'm just going to say learn more with that which it should appear right there i don't know whether you can see it but probably you can see it on your screen and if i just hover over it you can see that on the bottom left of the browser then the root appears and if i try to navigate to that page then you see we have country data which are rendering from our country js we're just rendering this and then i'm also going to place a link here to return to the home page but i'm going to do that in a moment and then if i try to do that for any other country it also it goes to the the more country space for that country okay so let me just add a class name to this because i want to style it some more and i'm going to go here and i'm going to give this a class name of btn like that and then i want to create a button with a class of btn as well so the same standing at this and the reason i'm creating this button is because this is the button that we're going to have to remove the country so i'm just going to say move country let me change this capital m like that and then we're going to have an on click event on this button i'm going to set up my inline function like that and i'm going to say remove country remove the country by the numeric code i don't know whether you remember this numeric code but it's something that destructured from our data okay and then for the text okay the test says remove counter so we need to create this function otherwise our application breaks i'm going to go to the top below my use effect i'm going to say const remove country and we want to target we want to target our numeric code inside our parameters the reason why i want to target a numerical because it's unique for every country so i'm going to create another variable called new country like that and i'm going to set that to countries.filter and for every individual country oops for every individual country then we want to return our oops sorry what am i doing let me place this full swing it's confusing me so for every indeed your country want the country.numeric code which is not equal to the the uh the numeric code for the country that we have clicked on and then we're just going to set our countries to new country like that and then once we set that to new country then we can save that and let's see if that works numeric code is not defined and the reason for that is because this has a c so numeric code like that and if you say remove country then you can see that it works so our function works so uh let me just place both of these buttons inside the div so that i can style them further and inside this so i'm going to grab this up to here and i'm going to place this inside of there with a class of buttons like that so that i can display them as flex and justify content to space between so that they can be end to end so let me just do that in my index css and i'm going to replace it as a global variables so i'm going to say for the buttons i want to display flex display flex align item center and justify content to space between like that as you can see and then i'm going to go inside my buttons class my buttons and i want my btn actually let me make the btn a global style because probably we're going to use it a few more times and i'm going to say background color set that to uh what was it what was my variable name what was this set that to this let me grab that but we'll color set it to that and i'm going to say um i said this is not what i wanted to do this is not what i wanted i wanted to grab this dark bg color so i'm going to set that to a variable called that busy color like that and then i'm going to set a padding of 5 pixels all round set the cursor to pointer set the text degradation to nurse that it removes the underline that we have here set the color to white save that let's see and then once i do that i'm going to add a border of two pixels so lead and the same dark bg color like that which will remove our border let me add a border radius of four pixels around like that and let me target the hover state for this so i'm going to say for the hover i want the background color to be white let's see that and then let me change the text color to our dark bg color like that let's see how that looks and that looks fine that looks fine okay i think that will be let me just add a transition on the background color of 0.2 seconds like that uh-huh and you can see our remove country works and our landmark button works so we can begin to uh go into our country.js our country component so let me just close this like that and then i'm going to import link i'm going to import link from i can't type link from react router dom like that the reason i'm importing this link is because i don't have a back button on the on the country component so i'm going to just place it at the top i'm going to say place a link like that and the tool for this the two pro this will go into our our home page and i'm going to say i want an an icon i found awesome icons i'm going to give it a class of i dot f a s and f a dash arrow dash left like that which will place a left arrow and then for the text for the link i'm just going to say back home like that and it should appear as we can see and then let me also give this a class name of btn which we just styled like that and i'm going to also give it another class of btn that's light so that it doesn't blend with the background color i'm going to style it a bit more so let me save that let me open my index css let me grab my btn light dot btn dash light and change the background color background color to uh to this color so article color okay to article color like that and it's just a bit lighter and it's more visible let me also change the border border of two pixels solid and my article color once again so that the border goes away like that okay so let's actually deal with our country.js and the first thing that i'm going to do is import use state import use state and use effect from react router dome not from reactor but from react like that and then um i'm going to set up my state value subconst country and set country equals to use state and we're going to have an empty array because we're going to fill it in when we fetch our data so i'm going to set up my use effect set up my callback function and then set up an empty dependency array so that it only runs once on the initial rundown i'm going to have my function inside which will face the data so i'm going to say const fetch country data equals to asynchronous asynchronous function like that and we're going to be targeting uh let me just check what i call this function in my countries.js so that i don't have two functions with the same name so this is which countries okay like that and i'm going to have a cost response equals to await fetch now the url that i was telling you about is the one that i'm going to grab now so this this url like this i'm going to copy that and then i'm going to paste it inside template return literals like that and i'm going to add a dollar sign like that and i'm going to say hmm um curious curious i'm just going to leave it for now because this means it's deprecated but i don't think it matters the reason why is because we're going to import another uh react hook from react router dom which will i think it should handle this so i'm just going to say this we are waiting the fetch from this so i'm going to say const country equals to await response dot json like that and then i'm going to set my country data to our country that we fetch like that now if you save this and run this you might notice that you might get an error you and i'm specifying that you might let me see if we actually do like that because an especially unexpected use of name so the reason why is because this name is actually the parameter that we have in our address bar so for this is afghanistan so that is the name of the country so we need to grab this name and then we need to to check for the country that matches the name and then display the data so we're going to import another hook called use params like that and this comes from a react router dom not from react use params comes from react router dom so i'm going to set up my name variable like that and i'm going to set it to use params params like that and before you use params i think you have to do props.match.params but i think this is much easier and that fixes that as you can see so let's save that and let's hope that it displays the country data like that and then just especially just to show that we actually fetched that let me remember to call my function suffix country data like that we can log the country not live we can log our country data to see what we get so let me look at that and place this at the bottom increase this size oops this size and go to our console and you can see that we only get an array of one item which is the name of the country if i were to go back and check for another country so let's go to alarm alliance like that and you get another array of one country so let me just remove this because it's populating the console too much it's on our country and just remove this console log like that you should reload this and it should go away and excellent so let me check again let me check again for a random country like that and you can see that we only return one array like that instead of 250 arrays so that's good that's working that's working which means that now we can begin to destruct our data and display it appropriately okay so we can go into our country.js and start working on our return so i'm going to return a section let's see i'm going to return a section with a class of country like that and then i'm going to map over my country data so this data that we were getting from this i'm going to map over my country.country.map and for every individual country i'm going to return a few things i'm going to structure them and of course we have to destructure our numeric code for unique value and then we want to return our flag and let me just place this full screen so that i can open this up and we can see what we get just place this to the side like that so once we get our flag then we are going to get our name of the country like so squeeze this in we're going to return the name of the country we're going to return the native name let me confirm what this is called native name it's called native dem as you can see right there so native name and then population population like that and then region and sub region i think it's lower case let me just confirm if sub region is lowercase so let's find some region and it's lower case okay so we are fine and then we need our capital our capital and then we need our top level domain was it let's see top top level domain is camel case okay top level domain and we need our currencies and then our languages and then we need our border countries so let me find the border countries the whoops what i do please go faster okay so bother countries it has okay it's called borders so we just want to destruct our border and all this will be coming from our country our individual country which is we have named the c right there okay okay so we can close this down and then once we do that let me place this back to the side like so okay so once we do that we can begin to now structure our data it looks and i'm going to set up my return so i'm going to return um an article like that an article with a key of numeric code like that and then i want to return what was it i want to return a div with the class of flag like that which will contain our image and our source will be the flag like that and in case it fails to load then i just want to display the name of the country so name like that and then set up another div and this div will be the class of details so let me give it a class name of of country details like that and then for country details i want to return an h2 saying the name of the country like that and actually this is this should be an h2 and then i'm going to return an h5 how many of them there are one two three four five six seven eight so eight of them so i'm just going to say it's five times eight like that and this first one return our native name but remember remember that it has some text in front of it so the text then okay so we're going to return because that native name like that and then we place our variable inside so native name is that correct okay let me place this full screen so it can be faster and then for the second one let me just and just write them down population that and then you can see region like that then you can say sub region and then capital and then top level domain like that and then the currencies and finally the languages the languages and then i need to place this inside as pan so that we can style it to have a slimmer text than this so i'm just going to grab that place it inside a span not spain and place that down inside the spawn and it's called population like that another span and say region another span and say sub region another span and say capital and then we're going to place another span and say top level domain like that and then another span and set this to currencies and then finally we can say the final span and send this to languages like that so [Music] now what i want to do next is actually set up my borders because that's the only one that we have not used here and it's borders with an s that and so in order to do that i'm going to place this in its own div let's see let's see there's a deal with the class of flag this is a div actually let me take a look at this once again not this one but this one okay take a look at that and you can see that uh this and this are like two grids right so in order to do this then i need to place everything between my name and my capital inside the div so between this and this oops this and this i'm going to place this inside the div like that right at this end and then place this inside the div as well like that so that i can display grid on them right and then below now below this below this div oops is it okay below this div then i want to set up my borders right so i'm going to say let me return dave let me turn on h3 saying border countries like that and then just set that to borders like that so i'm going to save that let's see if that works and does it work objects are not objects are not okay so there's an object inside here so what does this say okay so objection value there's a reaction so in order to fix this it says on the native name so the native name let me check our native name as it or native really really native name native name native name hmm with iso 639 okay on the languages okay on the languages so what this means is as you can see we have three languages uh as in we have uh three objects inside our languages array so i just want to grab this first one and that's easy to do we can just go to our languages our languages and we want to grab the first item in the array so we want to grab the first item in our array and then we want to grab the name property from there so we can do that by saying languages then placing square brackets 0 which will access the first item and then say name like that so let's save that let's see react child code name symbol so there's still another one and let's see let's see uh symbol there's a symbol this is for the currencies and once again for the currencies you can just do the same thing so currencies will access the first one and then just say we want to return the name of the currency like that let's see and that works look at that look at that we have that okay okay so everything's working okay nice nice nice nice nice nice nice nice okay so let's see we can begin to style our country component so um okay now just so that it doesn't confuse me i'm going to create another style sheet in my source and i'm going to call it country.css like that and then i'm going to import it into my country component so at the top i'm going to import what's it called it's called we need to go out and then we call it country.css like that and then let's begin to style this so let me just check this i need the mobile version first like that okay so both countries okay okay it's looking nice [Music] so let me begin to style this and it has a class of country okay so i'm going to target my country like that the reason why i'm placing another style cities because the classes that i have in my index css are too similar to this and i don't want them to confuse me so in my country i'm just going to say let me have a padding all round of 50 pixels like so i want to i want this to move down a bit so you know what i'm going to place it inside this like that and i'm going to target my btn light so that btn does light i want the margin bottom to be 30 pixels so that it moves away from the flag oops and i need to display flex because it's an inline element like that and i don't want it to go all the way to the end so in order to fix that you just say display inline block like so okay and now we begin to style this and everything inside here so i'm going to do that and we're going to target uh what's it called my articles class and it it's inside a flag class actually don't need to even stand the flag because this is okay as it is so we need our details our country details okay so i'm going to grab my country so for the country and i'm going to grab my article and the country details like that and therefore the country details you remember i placed this i placed two divs inside this like that if you look at at the design then there is a space between each of them so i'm just going to target the divs i'm going to say let me place a margin of 20 pixels on the top and bottom and 0 on the left and right so they separate out as you can see it's looking very nice very very nice let me add this to 30 30 pixels and then i can begin to target each one of these values so that i can make them just a bit lighter as you can see so i'm going to say inside this actually inside everything inside here i want to target my what's this what's this this is an h2 the class with the name so that i get the h2 like that and i want the font weight to be font weight to be 800 oops that's too thick i think let's have it at 600 and then i'm going to target my h5s which is everything inside here so for my h5s i want the front weight to be 600 as well and then for my span inside my h5s so i'm going to grab this and target my sponge inside my h5 i'm going to give each one of them a font weight of 300 like that and let me just increase the font size because and also add margin on each one of the h5s so for the h files i'm just going to say let me have a margin of 10 pixels on the top and bottom and 0 on the left and right so they space out a bit looking nice looking nice and then what else can we change we can increase the font size a bit so let me increase the font size to 18 pixels put this at the top like that looking very very nice okay let's do 16 here let's see how it looks hmm creating i think 18 looks fine which means that i need to increase the font size for this so i'm going to save font size for the h2 increase it to 24 pixels actually it's already 24 pixels what am i doing increase this to 30 pixels like that okay okay what happens if i remove this let me have a letter spacing of one pixel on the h2 and i'm just going to copy the letter spacing down place it at the h5 as well that looks terrible that looks terrible let me just remove it like so okay and then we can now steal our border countries because as you can see in our uh you know uh what is what's called in our design you can see that they have some kind of styling on each one of them so let me do that let me do that and we can do that by saying in our border countries there's a class of not a class but an element of h3 on our border countries so i'm just going to it's below this so there's no problem got that target that is the h3 and i'm going to say let me set a margin of 0 on the top and bottom and 10 pixels left and right let me change my background color to what was it called it was called you know index css it's called dark bg color like that actually that's the background color it won't it don't work so the article color so article color like that forgot to place this inside the variable like that but doesn't that work is this working what red okay so it's an it's not inside this dave it's not inside the country details what am i doing yeah it's not inside the country details okay so i need to remove this okay that is not what i expected okay so let me check this so that means that we need to let me check my borders borders okay so it's an array so we need to map over the array and then display it uh as individual items so that you can style them okay okay so that's why that's not working so let me go back to my borders going to grab actually going to just remove this return the h3 and i'm going to say i'm going to grab my borders so borders.map and for every border i just want to return return what return and another list like that which will have the key of border because we don't really need any key because the borders will always be unique and then we want to return list items saying the border let's see let's see that this should have a return this should have a return like that like that which returns this okay so we can work with that we can work with that remove this background color actually just remove remove this set this to front weight of 600 like so and then let me see where is this where is my design where is my design for the mobile like that okay so that's how it looks that's how it looks so let's tell our let's tell our another list right there and then we can stand our list items so i'm going to go for my country and then i'm going to go into the article element for the ul and i'm just going to say display flex which should display this as flex right right but it doesn't why don't you why why why why why aren't you working why aren't you working the reason why it's not working is because each of these elements is a ul so we need to display for x of the allies let's see that really wow okay okay okay okay okay okay i think i need to add a class on this so that i can target it let me think let me think oh let me try and do this let me return a d with a class of borders like that and then i can target the div it's inside the article and it has a class of borders display flex like that okay display flex and then i'm going to target this target the us and set a margin of zero on the top and bottom and ten pixels on the left and right like that and then we can add a background color of it's it's called one article color like that and then let's have a padding of two or not two but five pixels at the top and bottom and 15 pixels on the left and right five is too big three pixels okay i forgot to mention something in case you're wondering why this works yet we didn't import uh any style cities because they are all linked they are online so once you if they're online so once you have this here you can just use the variables in any other style sheet that you have in case you're wondering why this works okay so i'm going to add a border radius of three pixels around that let me make this 20 pixels like that let me place a margin on the top imagine on the top or actually 10 pixels around as much better and then it has a box shadow right right here it has a box set is that the box side or the border let's add a box shadow box shadow of zero five pixels 20 pixel spread and lgba not a gba really but we have that color right here now let's do this okay and you can place it right there and we say hsl a and place the alpha value to 0.9 so you can see where it spreads like that reduce it to 0.5 okay a very subtle box shadow and that is it for the countries page let's see if any other country works and as you can see it's looking very very nice but i don't want this overflow so i'm going to place a flex wrap of wrap on the borders flex wrap of wrap which will cause them to automatically go to the next line once they have filled the entire page like that and that looks much better much more accommodating much more user friendly okay so what do we need to do now we need to scale it up we need to scale it up and i'm going to start scaling it out by about 760 pixels so i'm going to say media mean width of 768 pixels then i want actually not do this then i want um where was i let me open this out that theme like that then i want this to display flex will that work will that work i'm actually going to go to about 992 pixels so that it's a much much bigger screen 992 pixels and i'm going to go into which class do i want i want my country class what did they display it as nothing okay so i'm going to go into my country class and i'm going to say display flex align items to the center and justify contents to the center let's see that we did not want to do that we did not want to do that okay i'm seeing a problem with this so we need to just actually remove it from here so that it doesn't bring issues which means we also need to restyle it in our country css which i'm going to do in a moment so if this is displayed as flex this is displayed as flags but it goes like this so what am i displaying wrongly this is a session class of country so i need the article i need the article to displace flex so the article like that okay okay and if that if this is okay then it means that um it means that i can actually place this back and it should work okay yeah it should work okay but i don't want this here i want this to be at the bottom so so let's see how do we do that how do we do that we can say let me display grid and say grid template columns repeat three one functional nope nope nope there's something i'm doing what am i doing wrong what am i doing now let me just work with display flex for now display flex for now okay let me see let me see i'm displaying flex on the article class but i actually want what do i want i want to display flex on these two items on the flag and my country details and i don't want this which means i need to place this inside another element so i'm going to grab this all the way to the top right there and i'm going to give this a d with a class of um country that's inner play paste that inside there and then i'm going to target my article class and then target my country that's inner class display flex uh okay still not what i wanted how does this look it looks like that okay okay the idea should come along soon it should come along soon so let's just continue to start this let's just continue to style our country details so i'm going to grab this go into my country that's details class going to display flex on that so they should place side by side like that i should have done that let me say display grid and say with depth at columns to repeat two and one fractional each like that and then let me say for 992 pixels i actually want this to move to the center a bit more so i line up the center just recording center so place them to the center like that i said i don't have this to the center so let me see i said now i can just display grid of this subgroup template columns repeat two and one function on each like that okay but then i don't want them to go all the way to the end um this styling this styling is a bit bit oh actually this looks fine does it really no you know what let me just limit let me just limit it i'll feel much better so let me say for the country for the country class i want a max width of 900 pixels here let me say margin auto so that it centers it doesn't work so let me move this to media mean with mean width of 1200 pixels and then i can paste that inside there and change this to 1100 which is a much bigger width like that and let me place a grid gap on this let me see a gap of 20 pixels so that it separates from the flag separates out from the flag okay okay okay what else do we need to do what else do we need to do it's looking fine it's looking fine but i don't want this to be on the same line as this i want it to be at the top isn't that correct yes it's correct so what we need to do is let me just look at this structure because i feel like i structured this wrongly okay let's see let's see from encounter details class i want this to be up there but i don't want that just give you a moment guys to figure this out i'm just going to pause the video and then i'll be back all right guys so you know what uh [Music] studying this is a bit difficult and i've just decided i'm just going to leave it at that because i seem to be tired and i can't really think straight on how to do this but i've added a few media queries for 1400 pixels above just increasing the max width for this so that it doesn't go all the way to the end as well as for this as well as for this and i've just displayed grid on both of them i've displayed them as grid as you can see you can just copy these tiles and let me just smooth yeah this is much better let me remove this and i think that's where you left me at and yeah i think i think that would be it for this actually i can't really think straight all that much so you can i think you can style this at your own time okay so what we need to do next is actually limit some space between this arrow and the text so that is in i said where is it it's this right here just add some space add that space right there okay so let me see what we need to do next is our our toggle right so i'm going to go into my header component close this down close these down i'm going to go into my header js like that and then i'm going to go above oops buffy and i'm going to grab this i'm going to grab my this icon and i'm going to say moon equals to document.query selector and we're selecting the one that has a class of fa-moon like that and i'm going to say moon.add event listener i click event like that because we want to add a click event on on this icon so that when you click it then it changes the background color so i'm going to say document when you say i want the document.body.classlist dot toggle and we want to got the light theme let me see live theme like that which we haven't created yet so we are going to create it in a moment actually let's just create it right away i can go into my index css so i'm going to go into my index css like that and i'm going to go to my waist where did they display the body right here that bg color so i'm going to give the body a class of light theme like that and i'm going to say i want the background color to change to uh what's the light theme light mode text light mode background is this so let me background okay let me just do that light mode background like that and then i want the color to light mode text like that so let's save that and let's make sure we've said that as well so let's see let's see in our console let's start full screen let's see let's see let's see let's see add a bit listen up now cannot read okay okay cannot read property ad event listener of now f8 this moon light thing toggle hmm let's see because what what you what this usually means is that the our script is running before our element is displayed on the dom that's usually what that means in the header component boundary no no no let's see let's see let's see what can we do what can we do what can we do how are these components rendering they're rendering the header first in the filtering the countries let me try let me try something different let me try and place this okay let me try and place it below this and it doesn't work of course and the reason why it doesn't work is maybe because of these let's see oops i did something wrong so let's see no no it doesn't work what am i doing wrong really what am i doing wrong i seem to be very tired everything is going wrong with what so when i reloaded that's when the error goes okay okay okay so i think what i'm going to do rather what i should have done was i don't want to click on this oops and then one click on this set up my inline function and say change theme as the function and then i should have placed all this inside a function called change theme like that and voila this should work reload this so that the error goes away like that let's see if that works what does it require double click it requires a double click why i'm too tired to start thinking right now to that so let me just deal with these let me deal with these cards as well as the header so i'm going to go back into this and i'm going to say uh what what i'm going to go to my header so header.light theme and i'm going to say the background color actually it's just the same it should actually should actually be the same as um should it be this one light mode background huh curious so i'm just going to grab these two grab that going to go into this and that shouldn't change because i don't have my header so i'm going to grab my header and that equals to document dot query selector and i want the header the class of header like that and i'm going to say that.classlist.toggle and we want to toggle the light theme class as well wait what what it's doing the opposite okay there you go there you go there you go there you go so we need to deal with our inputs next and then our elements these elements i said this doesn't have a background color of white does it let's see let's see in our design is this white or like dark gray not going to worry about that so our light mode input this is the color for our input for the light mode which is found where did i start my input in my form so input this this okay so i'm going to say for the form and for the input oops for the form for the input with the class of light that's theme and then as well for the form for the select with the class of light that's theme like that i want the background color to change to this one right there and then i can grab my input i can grab my input like this it has um an id of input not input but of such like that and then i can drop by select which has a class of select and then i can just copy this down and change this to input and then change this to select like that and that should work let's reload it and that doesn't work it works for this but it doesn't work for this why don't you work for that the reason why is because we should be selecting everything let's reload that and then that should work i don't know why it requires a double click i'm curious about that i'm not sure why it requires a double click if you if you figure out why because a double page please leave a comment so that i can also find out and i'm also going to do some research to find out and then now let me change the colors for these elements and inside my countries.js let me remember what elements were there there are articles with the class of details is it here for the details class for the details let me just confirm it details okay for this right here so i'm just going to grab this copy it down and save for the light theme as well i want the background color to change to what should it change to it should change to um article color light mode text light mode background huh i'm just going to change to light mode background for now where's is my legboard background where was i change this to light mode background and oops you know that really i didn't grab it in my so let's do that i'm going to say for my details i want actually this won't work for query selector because there are 250 of them so i did query selector all of them and they're all they all have a class of details like that and then inside this i'm going to say details dot for each that i can map over all of them and then for each detail then i'm going to say detail dot class list dot toggle and we're going to be toggling the light theme class like that and it should work i hope reload that and that works and of course now we need to change our text okay okay let me add a transition on this so for my indexes i'm just going to say right after say transition the background color by 0.4 seconds like that so it smooths in like that and i'm not going to mess with these buttons because i think they look fine as they are so i just need to change the text okay okay so where did they place the text for this the text here and i want to change this text color to what was it what is this that color to light more text okay to light mode text like that let's see how that looks save that and reload it and let's see how that looks and it looks nice looks nice okay okay let's see our country's page and it looks marvelous it looks marvelous except for this maybe so let's change that we can go into our country css which is right there and then where i placed my ul for the background color i'm going to grab this and i'm going to say for the ul add a light that's theme on it and i'm going to set the background color to what should i say to do i should set this to a background color of the not the article but of the light mode background so i'm just going to grab this and i'm going to say var like my background like that and let's see oops it won't work because i need to grab the ul's okay okay let's see let's see let's see let's see i'm going to grab the cost ul equals to document dot queries selector all once again and there are ul elements and i'm going to say just going to grab this actually going to let me place this to be an s for reason that you will see shortly so i can change this to uls like that and then i can change this to ul change this to ul and that should work yours has been cleared oops this should read the details like that reload that let's reload that we load it change this closely so no what um what am i doing what did i change what did i change let me comment this out to see if it all works what did i change okay so this should say you else this should say ul and this should say ul and let's see that reload it really really selected classical what what what what what what what what okay let's let's just try this let me try this let me try this one more time okay ul change this to ul and remember to import it not import it but declare it i'm going to say this is you else changes the end and say ul and let's see let's see okay okay the reason why it's it's giving me this error is because the input is not actually available in our country's component okay okay if i remove this and remove this then you would notice that it should happen it still doesn't have a select okay okay so there are things that we need to um to to what's it called to out as you can see now now we can see that it works right there okay okay so how do we do that so in order to fix that i think i'm going to have to refactor a bit of this so i'm going to go into my country's js because that's why we have everything and i'm going to go to the top i'm going to go to the top and i'm going to say um what wait wait wait wait wait a moment wait a moment hmm i'm okay let me just let me just try to do this one more time if it doesn't work then i'm just going to leave it at that and i'm going to try it another day actually i just realized something that this isn't actually available in my country's component so what i wanted to do won't really work so let me see what doesn't change this doesn't change this don't change these don't change home learn more and these don't change okay okay it's not really the worst thing in the world to happen but you know so what i can do is just remove these two and remove these so we can have cleaner code and for the final thing that i'll do is actually deal with this search input so i'm going to go close this close this close these and go into my filter.js which has my input and i'm going to grab my input so i'm going to say const search equals to uh document that get element by d and it has an id of search like that and i'm going to say search dot add event listener or listening for the input event and we want to target the synthetic event e and we're going to say e you know what are we going to say we're going to say the values of const const value equals e dot target dot value and let's see if that works by logging into the console the value like that so let's inspect it and let's see in the console let's see okay so that works did they mess this up did i mess this up can i what oh come on let's move that okay so i didn't i did not mess that up i did i want to add a grace you know i want to add a grease background color so that this can be more prominent because you can't really see the borders right there so let me do that by going to index css and targeting my live theme and i'm going to say for the background color then let me place an f15 like that so that these are more prominent because now you can see that they have some borders but let me make it a bit darker just around there yeah so that it can be a bit dark and you can actually see the cards the individual cards for the countries okay for the search input once we do this let me uncomment that uh another thing you can do actually is you can just say uh value like that and then you can say e dot target like that and it still works okay so what we need to do is because we are going to search we're going to be searching these countries by their names so we need to look over every country name that we have so i'm going to go back to my country's js and i'm going to add a class on the names right there so i'm gonna say class name of country that's name so once i add this class name of country name then i can grab all the names that we have in our array and then you can loop over them so i'm going to save that and i'm going to go back to my filter and i'm going to say uh what unless it costs country name equals to document dot query selector all and we want the country that's name like that and then we're going to say uh country country name dot for each so we're looking over each content we want to get the name and then we can say something like did i use this anywhere else here okay i did not so that's that's good that's good so i'm going to say if the name dot inner text right which will grab the name of of the country that we have right there and we want to be able to search in loop because no one really cares about typing in uppercase so we need to transform this to lowercase so i'm going to say that to lowercase like that and then we're going to use a method called includes so whether it includes the the value that we get from the input so they declares the value and then we also want to transform this to lower case like that then we need to do a few things let me see let me see we need to get the we need to get the name dot parent element dot this dot style style.display equals to block what this means is that if the name matches uh any of the names that are in our array the name that we get from the from our input then we want to display those names as block and if they are not available just going to grab this so i'm going to say else then we just want to display them as none like that so let's save that let's see um something's wrong something is wrong so let me see is that country that started s none really zed zimbabwe okay so the reason why this doesn't display is because we need to go up higher so we need to say that parent element twice the current element and then we need to say that parent element on the bottom as well like that so let's see if that works and if i reload this it it will give me an error i'm sure of it like that okay so i'm going to fix that in a moment let's just refresh that and then we can uncomment this once again and let's see if it works really it's really really really all right guys so what i've done is that i missed one bracket here okay i missed the bracket so make sure you add that bracket and then in order to uh uh [Music] for the app not to crash then you need to place your all of this out of this phone here after here you need to paste it inside this function where this script will only run when everything else has loaded so this is a much better way so that even once you reload you realize that it doesn't crash anymore it doesn't cross anymore now something else i've realized is that my input search actually works but it takes a while to filter it maybe yours might be faster but i think it's just that my laptop is now it's just really tired you know it's just really tired so i think that will be it for this video practically i finished everything we have finished what's it called we finished the rest countries api challenge and i hope you enjoyed this video i was surprised that this is actually a very in demand video so if you enjoyed the video please leave a like and subscribe and i will see you in the next video

Channel: tsbsankara

Views: 2,785

Rating: 4.6981134 out of 5

Keywords: HTML, HTML5, CSS, css, css grid, css flexbox, javascript, es6, es7, react, reactjs, frontend, front end, web, web developer, web development, netlify, vscode, REST, REST API, rest api, frontendmentor, frontendmentor challenge, REST API Challenge, rest api challenge

Id: c9Er4oqgPMM

Length: 76min 18sec (4578 seconds)

Published: Wed Dec 23 2020