hi guys in this blog we're gonna start is telling our components but - first of all we're gonna get the emails and we're going to also describe our coronavirus cases so I have an API country Flex API in here you can get source or the link and we it has used ABI e that's for the country code that's why I have saved the country code in our project so I'm just going to copy it and I'm going to link in in our description for the link now in our project in our project in here just gonna in country gorgeous I'm just gonna paste it in here but as you know this is a dynamic because we don't have a hard-coded country code so that's why we have to get dynamically now in here it will be string interpolation because in here I'm going to use dollar sign and use the props and from props we have used States and we're gonna use what we're gonna use a country code yeah right one so I'm going to use the country code in here now again it gives some error that's because like it doesn't write because we have to give alt in here and in here you can give the country name as a alternate yeah just give it alter idea so I'm going to use props dot state start country now if you just save it and go to a project you can see that we got flag now next what now we have to give just changing to s2 and what we have to do next we have to give a new div in which we have the description and what we want what are the description that we want so in here what we want we want active cases that occurs okay now in here we're gonna use P tag and use a dollar sign and the curly braces such that I'm going to inject some values from the props now again I'm going to use a string interpolation and use like this active and use colon and just write dollar sign and use what Rob start states dot active yeah that's what is so I'm just going to copy it and just after that we are gonna just change it wherever it's needed well all places it's needed that's why now in here what we know we want recovered so just gonna give the covered and he here we're gonna give recovered and in in here we're gonna give deaths in here we're gonna give again that now in here we're gonna give confirmed well I have to write some hard-coded with it now I just came in here now that's it yeah that's what we want yeah we got all the things right now next thing we're gonna do we're gonna just styling our project now in our app dot J's here I have app so I'm just going to remove this whole bunch of classes that we don't need now in here I'm just gonna use I'm just gonna use this styling in here you can see that we have got width of 95% I have used display flags and all the elements will be in column and it will be all in center with respect to the 95% width and all the element will be aligned center means Juliet the center site now if we just save it you can see right now it's not look good worse now that's all in AB dot CSS is done and what we need in our country list we're gonna first of all we're gonna create one new file and its name will be country list dot CSS and in here in import we're gonna import this CSS by using country list dot CSS and in here I'm just going to use classname give the country list class name I have given its name I'm just going to copy it just man what I've done I'm just going to copy this text now in here just I'm going to copy/paste si si si so this is what I have copied this is the great display and the template will be called in grid template column this is one very helpful cindex you can say and I want I want to recommend that you have you to the to do this because this is what actual developer do now I have used a grid gap of one with REM and width is 100% such that it will take whole place or food is 95% now if we just look into here yeah that's something yeah it's good yeah it's responsive also you can see now again are more things to see now this is complete the country list is complete now other is what I am going to do is in country country I'm going to create one new CSS file country dot CSS and in countries are GS in vs col if you are new you can use Khan it like this so that you can see also the code in here I also see the CSS file and this is the button he's here for you to split the editor now in here I'm just going to import country dot CSS and I'm going to use classname in here say the name country then there is one more class that I'm going to use in here and that's called it is described now I'm just going to save it and in here I'm just gonna use dot country there this is what I have copied yeah just a sec yeah this is what I have copied now these are all the CSS that we need for the project completion now you can see the wall does not look good well we have the font well we are gonna change the font in the later blog for now you can see this is what our project looks like so this half is done the next blog we are going to create our own search box such that we can use this search box in any place in any project and yeah that's all thanks