Live Stream - Coding a web app (Countries REST) from scratch

hello everyone welcome to this live coding session how are you doing today ain't high in the chat if you're around I sent out a tweet and I posted it on social media so we're going to wait just a little bit for people to join before we start today's live coding session I ever how are you i BSD at sea whose else going to join us it's really hard although I've been doing a lot of live streams lately I'm still nervous about when when I start a new one so yeah it's a funny thing I don't know if I even going to ever be more like Stressless whatever okay I'm glad you're fine ever all right so not sure if you noticed but I've been sending out tweets about what we're going to build today [Music] and it's going to be this sort of web application where we're going to take this design from front and mentor and we're going to implement it in HTML CSS and on top of it we're going to have JavaScript for searching for filtering and put dark mode here yeah it's a pretty simple app but the fun part is that we're covering multiple things with JavaScript so we have search filter dark mode also we have where is it let me see we have the details page which might be a model for now yeah higher we go hopefully marvin you'll get the hang of it let's hope for that all right so let me copy and paste this link to the chat in case you want to follow along battery hi welcome so in case you want to follow along I best the pasted the code in the check and yeah you can also open your vs code or your ID or whatever you're using to code and you can follow along Rodrigo yes this is a live video not a premiere like we had before I cruise hi Gabrielle how are you awesome so let me download the start dear sorry the starter files yeah so if we click here you can get the starter files which will download here on the desktop let's unzip it and if I close this and then drag it over it will open in the vs code app alright perfect you can see I've looked at these the designs let me close them and then we can look at them to get her do you know that ad yes I know him and yes he is also from Romania but his he doesn't have such an accent as I have is better than then death at this point what I'm trying to improve Alaris on high awesome so let's see we have here start let's start with the home light version so you can see here basically we're going to have a list of countries and here at the top we can search for a country and we can filter by region here also we have the dark mode so if we click the dark mode button you can see everything goes dark which is a nice feature I've seen websites implementing [Music] like the copper years in the past couple of years it's more common on the website which is good because we browse on in the night and we don't want to hurt our eyes all right and then we have as I said the light and dark page and we have the details page which basically is more details on the country which is pretty nice all right if you join in the meantime say hi in the chat and we're about to start let's see we have a style guide also where we can see some information we have a layout the 1440 pixels all right we have the colors here and typography awesome and I can if we need do we have some icons here let's see yeah we have the search icon there the moon I can how does it look yeah kay all right maybe instead of having a separate page we're going to have a pop up which will be easier to do in JavaScript so we are going to click on this tile and we're going to get more information in the pop-up so we can play around with positioning in CSS okay so let's start why not there's a readme but yet this is pretty generic you can go over if you if you want alright so first we're going to have an index.html file and let's let's see we're going to open this with live server okay let me put this on the right somewhere we can close this and we can place this here and the code on the left all right and what else we need as files we're going to need style at CSS and script the J's okay perfect now we can close the Explorer so we only have the files let's close this also okay so the HTML CSS and JavaScript good let's add some basic code in this file so we can see it works an alert in the jas hello world and on the body in CSS background color dark solemn like that and let's create a boilerplate in the HTML rest country's API something like that it was called okay and we need to get the styling so links like CSS alright and script scream the GS and here we can also say Oh so if we save that's ok it works we have the styling we have the JavaScript perfect okay and if we save the file it loads automatically awesome we can remove now the boiler plate and we can start working on it let's see so I want to open the light version revealing finder and I want to have it opened in a site here so we can take a look so Rodrigo asks what API we're going to use I think they have the API in this tag guide or not in the readme let's see yeah it's the rest countries that II let's see what this does I am Norva well that's an interesting name sorry if I mispronounced it okay so look this is the API left needs domain so you can see we can get all the countries from this URL and then we can get the on to buy a name which is nice okay let's see if we call this API what do we get back right so we have a lot of information look at that nice nice nice nice all right salute re react you I kid how are you okay so do you have an idea about the furnace script tag instead of putting script at the bottom oh I haven't used that much but differ so yeah I usually put it in the bottom and where Golan I said you're welcome okay so let's think what we're going to do hmm would we use a CSS framework to style the page or should we do it in vanilla CSS like everything from scratch what do you say so we have here the input which is is like the style then we have this drop down this will be interesting the style okay so people say vanilla all right all right all right we also need the icons let me see the where is it the details page also I want to see the difference yeah so here we only have the languages okay some information and the borders all right yeah it's it's doable we have some box-shadow here okay hello and Keith welcome good let's see we're going to do the HTML first where we'll have here this header then a search box this filter and then we're going to have a list of country's right okay let's do that closed its read me close this image and the HTML so we are going to have first a header and inside the header you can see the header here is whiter than the body so and also you check out that everything is centered here so we need some set some kind of container which can be of relax element and everything you can see here it's pushed to the extreme so space between okay good well let's do that we have the header and decided we have a date with the class of content on the Left we have this h1 saying we're in the world like that and on the right we're going to have the let's see will be a button like a ghost button which doesn't have a border or anything so that's it button we have a class of BT and a BTN ghost so we're going to style the style the button but then using the beat angles class we're going to remove the border and stuff because in this file page you can see we have the back button although I said that we're going to do it in a model oh well yeah let's not overthink it let's keep it button and we can have here dark mode and we need the icons let me quickly grab the link to default awesome library I usually have them in my pants let's see which one [Music] here in the CSS yeah here it is okay so let's add this above ear link right good and we can use now on toss and to get this icon we just have to find out which is it so we're going to go to their website on to awesome and go to the icons Oh Mon I think it's called let's see okay look at that so we have two months this one will be empty or something or Oh yeah so this one will be like that and we also have is full version which interesting they have oh yeah I see so 1 is FA are and 180 FAS let's see if they appear ok look at that we can have both of them be here in front of the text and then we can toggle them good so we have that next let's go to this section where we're going to have an input on the left and the drop down on the right let's create a section the same I'm going to have a container to keep everything in the center and on the left we're going to have an input which says something let's see yeah search for a country placeholder search for a country like that okay and on the right we're going to have the drop down which we're going to create a custom drop down perfect let me let me know if the code is big enough so you can see it in the meantime okay so here we're going to have a drop down which will have or text a filter by a region filter by region and it's going to have an icon here let's leave the icon for now we're going to add it later hopefully we won't forget I'm counting on you hey under our welcome how are you okay and then here we're going to have a list an unordered list so you are allied times five I think it was Africa America Asia Europe and hold Sonia but how to pronounce that okay Africa Africa like that America age [Music] oh man I'm pronouncing is so good Europe and the last one okay perfect let's see all ask would it better to use nav instead of Dave in the header just asking because of semantic HTML oh well you don't really have a nav in the header so it's just the title and the button it's not it's not enough right it's just some but yeah you can change header to nav if you want I just choose Heather because it's on top here okay good so now you can see here let me zoom in we have our header in our section and the next section we can have the container like that and we can have the list of I'm trees let's see this container will have an ID and it will say come trees like that and let's create a country box here so we can see how it should look like so we have a div which also has some kind of header here for the image so half of it will be an image and the other half will be info okay so let's see how should we call it country country like that right okay and we have here on three other which will have an image and then we have country body which will have let's say an h2 and here the items so h2 will say Germany and then we're going to have let's see three paragraph with a strong tag here okay so P times three bigger than strong and we're using Emmet to have everything to be written for us so have population which will be 81 blah blah blah like that okay next we have region and capital region Europe and capital early right yeah oh and we have the comma there not comma how do you call this I forgot no never right all right so we have that hey Scott welcome to the livestream let's see what people said in the chat okay yeah as Patrick said it's just a some links good God is making this planning to make a video and now got distracted by our live stream and making a coffee awesome good so we now have the base HTML let's start styling it a bit one thing we're going to need is the image here so let's take it from this API let's find Germany and look the flag season as BG so we can use that oh this one hmm where is your flag Germany put here all right well let's copy this and we can use it here and also the L out will be Germany all right let's see perfect look at that now let's get into the CSS style this and then we can go into the JavaScript and render not randomly dynamically generate all the countries good so let's see first we need to get the bond which was this one none either sons okay import URL this right and then on the body we can apply it font family neato sons and sensor if as default okay we saved it and it changed perfect let's add every set here for box-sizing border-box i don't think we need to use a normalize CSS for now it's it's a pretty simple project in the last livestream when we build the landing page we used normalize CSS maybe you can use it or not it depends from depends on what you want if it's a bigger project yeah I advise you use it but for this one we can go without it all right I'm also looking at the chat and back to the code so if you hear me not saying anything for a while it's because of that all right right but I'm not that yet all right next let's see we need the background color because has a little bit of gray in it so clip closing style guide dark mode background like my background this color so body background color like that you can notice it but if we're going to have the header be a background color white which is this with 100% oops you can see it a little and let's remove the margin on the body okay [Music] good next we have that where was it here in the HTML we have the container class so let's style that to be a maximum weight of 1440 pixels because what that's in the style guide I usually found it's too large but let's leave it like that for now and it will be a display flex element let's see what happens now perfect look at that so now we have them in a row we can use the line item Center to have them centered vertically and we can use space so no justify contents space between so we have them like that perfectly and let's have a little bit of padding what should it be 30 pixels yeah thirty pixels are all around okay look at that perfect now it starts to look that what I usually do because they don't like huge images is I set image to be with 100% or the max wait let's not force it okay look at that getting better and better I see in the chat you're talking about how should this community be cold poppers pop community on her - you're funny Vieira hi from Brazil I from Romania good let's see now we have that [Music] I used here an h1 maybe you should go down to h2 math let's let's tile it there we remove the margin and everything is alright good next let's go to this dark mode button and happy let's see we're going to give it a class the dark mode like that so we can target it in the CSS dark mode okay first increase the font size 16 pixels like that and I wanted to have so what how are we going to do the dark mode on the page is that we're going to toggle a dark glass on the body so when we're going to have the dark glass the font will be light the background will be dark and also on this dark mode button we're going to swap out the icons because now we can see both of them so by default in the dark mode button we have the let's see ours disc 1 f R yeah fa r which is the empty moon yeah and this is the full moon so we want to hide the pole so FAS is going to be display:none all right and when we're going to have something like dark mode now on the body dark then on the dark mode button which we should probably add a BT and from front it and dark mode okay so we can easily see that this is a button yes oh this style is only for this button for now what we're going to have a general style for the BTN class okay so buddy dart bitten dark mode and the FIS will be display:inline-block and then the other one will be display:none so f R like that will be display:none okay now if we would toggle between these like let's see we can do that if we inspect here and I'm going to put the inspector down here and if we have on the body a class come on function okay less will be dark you can see now that the dark I can appeared awesome okay we got that out of the way what else do we need to do remove the border murder none okay let's britain it let's see in the chat so are you doing it mobile first uh I think I will delete mobile first now I usually do it that's the first okay Pierre says will the video will be available on a channel yes will be available on my channel after it will be after the livestream rothman hi welcome to this live stream alright let's continue mmm-hmm where were we let's style this part now maybe ad let's add HTML structure we have an input let's add a class on me I usually like to have classes because maybe you want to have another input so we want to target it specifically and let's have a class on search and also we're going to need a an idea of search so we want to target it in the JavaScript so let's write here and book styling and up here we're going to have aim button but yeah now that I realize button that mode is not the right name but we're going to change that Betsy team towel Oh should we call it BTN toggle because it's not just for the dark mouth so that's not very semantics right oops we need this entire thing and change it like that perfect all right good now on our search let's see how does it look kay has a padding of around 25 pixels and here it has a bit of padding let's do it I padding 25 pixels all around and border-radius like four pixels and order none like that oops none because we're going to have a box shadow shadow let's box shadow materially why I found the skull pan which I'm using to get CSS for some nice book shadows let's see let's use this one Oh too much that this was one [Music] oh no it wasn't over so we want this one okay alright let's see how this looks okay decent and let's give it a minimum width of 300 pixels all right and increase the font size that may be too much 14 pixels like that and you can see that it doesn't pick up the font by default so let's add the font-family here or does it let's interest usually the input doesn't be up the font oh well good that's good we have input maybe the box shadow is too dark let's see we can remove your alpha here there are six and plow all right that works good and let's create this drop-down now drop down styling I think we have here yeah drum down class perfect so it has a background color why doesn't it work Barranca okay of white and we have the same box-shadow oops Coffee like that perfect we have the same padding and the same font size alright perfect and what we need to do now is to hide the UL if it's not clicked we're going to show it when we click the drop down so for that we're going to use to create a drop-down the position:relative and then the drop-down URL will be position:absolute like that now you can see that the drop down is the same height as the input which is a little to be isn't it let's decrease is to 20 pixels all right and have the border radius also perfect okay next the UL will have to be the same weight as the parent let's move the padding on it I mean it has a padding on the left by default let's see how does it look yeah you can see here it's just about two or three pixels below and it has the same padding okay so adding it has the same background color border-radius and also the bob shadow we're going to copy this over a lot alright and if we have position:absolute we can set the left be zero and it let's see we either set the bottom - or the top - the Betsy 60 pixels that's too much 55 what happens if we set 100% yeah that works okay good let's remove the list-style-type where is it placed I'll type none okay good perfect and we need to add a little bit of March in beef between these placed elements please type them sorry least items margin five six two zero okay that's perfect okay let's see the chat so what tool are using to measure the length of the elements adding a margin this is the image previewer in my I mean this is the image app on the Mac and it has this tool by default how do how the calculations have done how easily just looking at it figuring the size not sure what you mean all right in the meantime we should add this but right yeah let's sir you hello so apparently my Mac just had to take a little lap oh yeah that was fun let me know if we're back oh now this is not the right project oh man yeah so apparently my Mac crashed for some reason so yeah let's see if the progress was saved hopefully we have the style we have top down yeah that's fun and sir if it was a long pause for you or something let's continue Akers yeah it happens to me when I streaming the Mac is not the newest version should upgrade so sometimes it just goes to sleep without notice okay we're back we have the style so yeah sorry for that okay let's see where were we we added the margin here and I was about to do something oh yeah to get the icons from the font awesome we need to down item this one chevron down okay and we can add it in the HTML where is it here okay let's see yeah you can see now there and in the styling we can add a little bit of margin to it we can get this class and inside the drop-down drop-down we can do margin left 10 pixels okay look at that now we have a nice drop-down which is perfect is everyone back already or do I need to wait a little bit yeah sorry about the about there in the future I should get a better Mac yeah okay okie dokie so we have that let's see and we want to hide the UL by default but we will be display:none but then if the drop down will have the class of open then the UL will be display:block and we're going to tie her to double this class by clicking the drop-down which should have a cursor:pointer so we can see that it's clickable like that good perfect also let's add this cursor pointer to the bottom yeah all right good and the last thing to style oh we need to open the image where is it this one all right yet so we want to make this I guess it has a fixed weight right yeah and we had the class com3 and come to head and body okay let's see a country card styling like that we're going to have a max weight of 300 pixels okay and it's going to be background-color:white and we're going to copy once again this box shadow and the border-radius okay you see that the images are not rounded here that's because we need to add overflow:hidden like death it now it has rounded corners and on the on the country bar day we want to have a padding of 30 pixels something like that right yeah and we need to remove the margin on the hey eh not sure what plus h2 so let's do that country buddy whoops Hunter body h2 will be margin-top zero okay perfect it's styled pretty knives for it by default but if we're going to have multiple countries maybe we should call it a card mmm yeah let's call it a card more semantics and apparently we don't need to style the header here oops and card body and we can replace this with card okay perfect in case we ever need to have this card and have everything or something else in it it will be just good we need to make this car clickable so let's add cursor:pointer click I am I'm going to click it a model with appear with the details perfect and we have this painting oh yeah I wanted to see how it looks if we have multiples multiple cards okay they go on a second row let's car oh I copied the comic in and also so we only want to copy the card on this one okay all right that's what I was talking about let's at a fixed weight on it we have the pixels and we want to have the container which is displayed flex we want also to be flex wrap wrap so now it will go on the second row and we can have the card to have a little bit of margin 20 pixels all around okay that's good let's see I don't like the spacing here or maybe just add margin-bottom for now more 40 pixels okay that's close enough for now all right if we yeah he who is zoom in enough it will go on the second row maybe maybe maybe let's see we want them to be centered when it's one row so we have this container where is it and it has an idea of countries let's also add a class of comm trees and this will be flex flexbox item with the justify content center so justify content center if we have a container with a class of countries okay and now you can see it goes in the middle there nice hmm but now in the margin back here okay good enough or now we'll see we can change in the future all right I think it's time to go inside the JavaScript now and get a list of all these countries right let's see who's with us in the chat raise your hand while I drink a little water you okay you why are you not using SSS why to use SCSS here it's not it's not really required okay let's move to the JavaScript here we need to do a couple of things shadow on the header what do you mean oh all right book shredder on the header the right right right so the header should have this book shallow let's see where did perfect thank you Nisha good so let's see what we need in JavaScript we need to have the dark mode toggle we need to have this search we need to get the countries and we need to get have the filter so let's see who do a dark team toggle toggle then we have search then we have filter then we have a model when we want to show the information and we want to have a API call which we are going to do first so let's write a function get countries countries like that which is going to be in a sinc function sink and we're going to use fetch to get the counter response so away fetch and we'll need this URL okay and then let's see oh wait purge and the countries will be away to rest at Jason right let's cancel that log countries eight countries we call it here and we can stay the console.log okay we have an array of 250 countries perfect now we want to show countries Oh countries or Betsy we're going to call a separate function yeah rather than doing it here Oh display display countries and we pass in the countries perfect function display countries takes in countries let's see we have this cone tailor we want to remove one card here and we want to copy it so we have the structure here in the day we can say boundary is loading something like that oops let's do hh2 okay country's loading dock perfect and now we want to target this whoops country element right towards the countries um trees container but let's call it countries element document.getelementbyid e on trees like that and here at the end we're going to do countries element and child and the new country element like that which we're going to create here Hunter element will be document and document bit element a deal here we have this structure so we can use this so we have a div and this thief has to have the class of card so country element class list add card and then we have come three sorry Here Come three element in our HTML be this thing without this and the cake we're going to swap out everything here but let's see this working if we save now we should have a con 3 found three oh okay yeah so we need to loop over become trees and create a country for every country make sense hi from Germany hi okay so pour let a equal zero I less depth or now let's use the 4-h palm trees or each boundary we want to do a loop and we paste everything by the loop perfect and we should have 250 Germany's Germany's taking over the world alright good and now we can swap out this wait let's see we need to find the corresponding properties Oh the problem that you have the flag Oh country flag next here we have the country name I guess yeah round three name here we have the country population [Music] population next the country area foods interesting so as the area we have fifty-four I want to see hoarded chair region o not Ariel its region sorry my bad and obviously here we have capital so now if we say we should have all the countries look at that and the population and the region perfect and I want to check something United State yeah Regent America oh I did yes country doesn't have a capital that's here why does have a capital [Music] let's see the API we search here capital empty string that's interesting you oh never mind is just one and you can see we have nicely done as G here on top if we increase here the space we should have more Oh controlling I forgot to place that so when we we want to display the countries we first want to empty out the countries element the country element innerhtml will be empty string okay so now we can see that disappeared mmm interesting some logos have these are height oh well it's pretty okay good let's see what's next now we want to search mm-hm we want to search by the country name so we did that or we should do the team toggle let's do that interval because it's easier so we had here a button in toggle we need to add a class of toggle like that and we're going to also target here in the JavaScript Togepi yeah and toggle let's go down here toggle we can add eventlistener click and it will run a simple function which will take the document body classlist toggle back so it will toggle the dark class on the body let's see if that works okay look at that the button is changing we just don't have the styling for that so for the dark let's take the styling from the style guide we have also colorful the text when it's lighter I think okay and then dark mode background we have this peasant color a right look at it it starts to change and we have dark mold elements dark mode elements I'm not sure what this is for let's see if we go here and open this yeah I guess it's the background for all of these okay let's see we can do something we can have a variable in CSS be set to the background color of all of these elements and then on the dark mode we change that variable let's try that so on the HTML not on the route I haven't done this for a while so here we have let's say background which will be let's use the HSL here this is the background for the element background e-l okay and then on the body dark we're going to overwrite it I think that's how you do it let's test this the background element will be this No yes okay and what's left to do is to use it so instead of using this color we're going to say bar and we use the background element okay look at that perfect uhh and we need to have where is it dark third mode text it's white where is it yeah so in the CSS dark text we'll be the white color okay pretty good let's swap out this or D where is it for the background of the toggle background-color like this next we want it on the search background color but this and also on the drop-down and the card body right Oh yet here the card okay baby clothes they're just asking could you give each card a hover effect yeah we could give them a hover effect let's see p8x oh that's good what they want to do here on the button Oh color that's the color inherit I've done it will inherit the life look at that we have the dark mode pretty much which is pretty good yeah just here on the placeholder on the input we need to style that separately it was a selector but I don't know it now so let's just leave it like that for now yeah let's let's see color be inherit here - Buena yeah that works we just have to change the placeholder there input placeholder SS it yeah this selector a search like that and yeah the same color we can use the same that's okay look at that good it was it wasn't that hard perfect so now we have dark mode let me add a little bit of a margin or we can have it be displayed flags and justify content-based between like that and now you can have a weight of pixels Oh more unhappy to be so much okay and also a line item center get that works perfect so we have that now let's see let's toggle the drop-down here this drop-down has an I know filter like that so in the JavaScript the same pretty much the same thing they did here filter and when we click filter button when we click it we want the filter button to toggle class open tip look at that and now we can see the list of on three the list of regions but for some reason I don't like this marching should be more yeah okay we're going to have the ally be linked with the unclick also later good good good good good good so in the JavaScript we did this we did this not really let's do the search so for this search we're going to have a input event on the input field here right right let's do that where is it input ID search up this over search search and this will be search element like that and it's going to have add eventlistener [Music] input kay and here we have the value eat that target that value or if let's let me show you console that lock the help like that so if we inspect and so and I have something in the input you can see that it appears here okay let me think you we can also do something like value and have like that is the same thing pretty much good so now we have the value and we only want to show the countries that so for example we searched first and here we want to show this one but not this one right so for that we're going to go over all these cards using the query selector all and we're going to search after the name right yeah and if we have inside the name if we team includes the value from an input we're going to show it otherwise we're going to hide it so for that let's add a class here on the h2 to be country name because now we can use this country names to have value here document very selector all country name and we can do country name or each name and we'll do the following let's see first we need to go to lower string because we want to search Afghanistan with a lowercase a or uppercase a we can do a check if name that to lowercase includes value to lowercase the same so we have the country otherwise we don't throw it [Music] you country name counter name okay name this is the element but we want the inner text let's see console that log name that inner text it's good to use the console to see what's happening okay so see we have all the country names here in the inner text but it's just on thing let's see we have this card I mean the name and we want to go two steps up and hide this one or we can do something crazier to check directly the inert export the entire card yeah but then if someone searches for pop all will show yeah it's not okay let's do like this and we can only have one no let's devote so if it's there than the name parent element parent element because you want to go up up twice style.display will be block otherwise here display will be none let's see okay look at that so we want to search from Romania Romania perfect where the pet asked couldn't we use the array that we get from get countries function yeah we have that array but basically we already have this ended down so what we're doing is to hide it or throw it depending on the search so we're not recreating the innerhtml which will be must which will be costly we're just applying style on it you see so we have the name here and then we go up to the card body and then up to the body if it's not there then we display:none so we can search for Germany and we can search for United all of the United come please okay that's pretty decent good so now we have debt let's see what else we can do the same here with this so basically when we click on one of these allies we want to check if the inner text from here is equal with the inner text from the rate region so let's do that class we're going to add here country region so we will do the same trick there on the toggle button we want to go one level deep Oh Phil not on the fielder's region Realtors will beget now get but very selector all and we're going to find allies inside the filter button okay so we take this but no no no that's not good we filter button but yes that's it let's see the HTML so we can okay so we have this filter and we want to take all of these and add an event listener on them okay good let's see if we have them console.log like that okay look at that we have mouths list Schott says filter function maybe yeah that doesn't work now because as I said I don't want to manipulate the Dom directly but I want to just show and hide the elements so we don't want to delete them from the Dom we want to leave them in the Dom but you just change the display okay so we have the region filters let's go over all and add for each filter and we go filter add eventlistener click and we rerun a function here all right maybe we should comment something to add some comments this is pretty obvious get country display countries of kay I'll go in dark and light like that and then filter button [Music] show and hide the filters I like tags okay and here search and this is pretty obvious here we want to say why we have parent alone parent element so we have the name [Music] we're in country name class Hunter name class and we have the card body and then I have the card like that maybe we can meet maybe we can go the other way around like that okay we can say why we have a done parent good and here region filters add a filter on the Allies inside the it'll tire inside of them now okay that's better let's console that log filter that inner text here so we can see what we have when we click on it and so Africa perfect Asia perfect China perfect Europe and here should be America's an S okay goody-goody good [Music] we need to do pretty much the same here we take all the country but this time country regions so come 3 3 Chan this will be the Chan and this will be region we pretty much did this let's see but we don't have value here but instead we have filter in our text okay let's see so America's look at there that's perfect Africa's alright and oceania and Europe perfect perfect perfect perfect the only thing I see here that you don't have a way to go back which is not okay so maybe let's add mmm I need an option to go back all of them instead of refreshing so let's have here I like to be all but now if we click this nothing shows so we have to let see we have to check if the value is all so let's store here constant value will be filter that inner text a weekend yes okay yeah we basically don't need the lowercase because that's by default so let's move this to make it right here and we can change it with filter that's the bit that it okay let's if this still works marecus okay and now if the wreckage on includes value or if the filter value is all so if it's all then ratio of let's see oh right Americas and if we click all then we can see all perfect that was simple good a good button label and icons should change according to toggle state not sure what you mean anywho let's continue so we have filter whoops look at that I forgot to change that styling where are you here in this here Oh Kate look at that now we have that fixed perfect we have dark mode we have search we have fielder yet we don't have filter and search though that's a tricky one or now we have let me see America's and we say goodnight yes we have now hmm yeah because this goes alright we could fix that by adding here instead of showing display:block and none we could have two separate classes like so country or so red region show name but we'll leave it for that so ee to youtube says for dark mode reshat word why do you think we should have an array yeah but then we can filter that array out but then we have to construct the innerhtml always Odin I didn't want to do that public to youtube says that in dark mode the button should become light mode well this is in the design so it's the same design look at that so we click SC all right it's decent it could be improved but it's decent for now let's create the let's see what we have here we have search we have filtered and let's create the model which will have this with the information and the border countries and they imagine the left so for that I'm going to create another sec not a section let's see model container model like that and we're going to fill this in with the HTML so basically this model will be hidden and every time we click a card will fill this model with the information we want and let's see we need to get information from the API but they already call the API maybe we should store the information somewhere okay let's see let's do the model first and then we can see what we'll do okay so we'll have the same a container which we have the image in the left and on the right we'll have this and here we can see has another maybe I'll do this on a line easier let's see how that works so we have another container let me add it here on top so we can see it and inside here we have a container which on the left [Music] going to have an image like this and on the right we'll have information we can copy let's see this third of we just have multiple columns okay that's good yeah we just have multiple items and this let's tell our model styling Oh the model container we'll be position fixed top:0 left:0 right:0 and bottom zero right and then it will stretch for us and we can have a background-color it's one second okay and we can have it be display flags I'm Anakin sent them just for content center and everything goes now in the center perfect if we stretch this out we'll see that the text goes to the right okay now inside the model let's see the structure again model container [Music] we want this image to be smaller now I know so we wanted to stretch a height of the of this div right let's see ya further but we still need some margin here so instead of this class why not add here a model model body like that and the model body will be having a padding of 30 pixels like that but I still want the image to be smaller for now image will be max-width and okay good and the model will be also going to have a close button let's button closed and it's going to have a font icon SAS and types FAS f8 times okay like that grass will be button closed and let's quickly style it but enclose border:none we position:absolute top 20 pixels and right 20 okay blows knife font size 90 pixels we wanted to have it around here so for that we need to add them let's see what's the oops the parent here the container so let's make the container position:relative to position:relative and then it will go there perfect now because we did that we need to set the z-index of the bottle container let's see all right eighty good next thing will be to ready get this information out of the Tyl when we click the card ok so first this modal container will be displayed and so we don't want to see and only when we click the card we want to show the model so for that after creating the card we want to add an event listener add eventlistener click yes we'll open the mode let's see we can remove that and have ideal model also and here like that okay now can target it in the JavaScript maldo model like that and here when we click it we want the model to have style.display reflux Oh click it we show the model and then we have the close button close BTN we go down here and say close the model low speed and click we want eight model and [Music] style.display Vietnam okay so now we see it and we hide it see it hide it perfect in the style here I want to have our serve pointer I think we had the general class for the bottom but I forgot of it yeah so let's just remove that okay let me drink a little water are you still listening if you are you're a hero it's been an interesting stream so far I had to think a lot let me know in the chat if you are still around okay no more water so we can see here the model appearing cut you're still around and kitnik shot nice to see you around were the pet good perfect so what we have to do now the last thing is to take the information and throw it inside the model where is that function yeah oh I know we can do that so we have all the information here in the country we just call a function here country element we show the model and then we can call the country oh sorry a function something like field show on three details and we send the country like that and we're going to have here function show country details country the model innerhtml will be la let's see if it works so click this look at that blah perfect but make shots as maybe we could consider even bubbling we're under a 100 plus okay Georgia till death okay good so we have the model but we want to change just the where is it we see here just the model body so we can do something like model very select or model body innerhtml will be whoops if following [Music] somehow we should see look at that Afghanistan and I learned yeah we need to change the image also so we're going to go what not work up one level and we're going to change the image also this won't have a source let's see first model body we'll be although like that and then the model body will be okay we want separation of concerns and then here we have the model image the image and model image source will be on three that flag and now we'll have the correct flag look at that and the correct information we just need to add more informations let's see what it has here I'm going to let see this one I'm going to put it here on the right screen so I can see it faster so we have country name all right then we have we don't yeah we have population but there's the second one here we have native a does it have a native name here yeah native name this is so easy region of K population region sub region sorry does it have something like that yes look at that sub-region sub region of K capital okay then we have top-level domain which I guess we have here whoops look at that it's an array all of them are race yeah array we need to take the first first item Oh like that a we have the currency but we still check maybe some do have multiple no they all have one which is odd nevertheless let's see currencies this is where we need to loop over the array probably parentheses let's see which country has multiple color currencies maybe Switzerland I'm not sure now it had only currencies let's search by that and see oops look at that prove this one now just one one one one one one oh here we have or to follow so here we need to do something like currencies or country currencies that map currency and will say something like let's see and we can just dream return but if we leave the array it will be with commas let's see where is he ochio currencies object country currency oh yeah so we need to go currency here and say currency that code currency depakote like that now we can see BZD and here we have euro and here we have xcb perfect okay what's next we have colors that we have languages so we can do the same thing here language land bridges like that languages now let's see the EPI language that name language name okay English now we need sweet land as three languages perfect that works this is pretty close to what we wanted oh and we have boulders or dyslexia Romania has boulders that's weird just bill to have the example here you like that border border yeah or borders interesting that it only has the what's that shorthand so we need to loop over and take the yeah I wonder that we leave out the borders basically what we have to do is to take this and search for death alpha code just to take a name it's not worth it a pretty interesting that they don't have an object here oh wow that's good enough so we have here let's see so we have dart mode toggle we have search functionality we have filter which doesn't work now for some reason yeah that's because I know why when we change the container to be position:relative now we need to go to the drop down ul and add that index here also that index ninite because I think the others at index is 100 yeah so now you can see we can select by region okay and what I want to do is to pull this up a little bit so let's see work how I can do that we have the class of countries trees like that we want it to be margin-top - forty pixels okay and I won the card to the 250 pixels smaller cards all right kay let's make this fullscreen oh yeah we need to center the container where is the code where is the code here container max wait and we can set margin Auto okay look at that now everything is in the center all right that's pretty much it we did the entire functionalities I mean all functionalities dark mode search and then I have a model here with more informations ok we need to fix that and the filter by region which is nice let's fix that button where is it button closed background color that now if we go here you can see that huh that's interesting now it's on one line why [Music] let me close this a-also good that's still weird why went on one night [Music] we have a container there so it should be max with it let's see we can inspect it and see what we have here model container Oh max with I see and because this yeah let's remove this Dave and then the container will go oh wait I'm not sure why we had dead he's anyway where is the model here okay now it should be like that perfect all right that's it it's pretty close to the original what do you say if you like this one maybe we could have a for this we can have the background color be something else and not sure oops yeah here or this container inside the model model containers should be background-color let's see oh we can have the box shadow so it will have a box around okay that's decent dark mode also works okay pretty good maybe the model background should be this color which is the body color [Music] uhh element and then background no body let's add this to a variable and here we're going to change the body okay well they like that and now here we need to use it - - body let's see this works close but not lady what did it do Akbar body oh wow like that okay and now we can use this same variable for the although for the model container this okay that's it look at that now it's better you can see that this is a model actually good good good good I notice something this should be white I hate that I have to scroll twice so let's do that but BT and cloves color should be where is Italy do we have a car here inherit okay perfect you okay let's see the check Larry plus plus you not sure what you mean Scot ship it where to ship it to the moon Nisha well it was a lot of work you did great the functionality is there exactly the functionality is there we now have a country REST API we can see the details of the web the countries we can filter them by regions and search perfect okay if you have any questions let me know you I'm going to wait for any questions you have some whoops look at that that's an error what happened there so apparently Moldova doesn't have anything container body why it's not showing you [Music] what are you doing mate display' none' the container okay something's happening here so if we have search but only for a couple of let's see and I did this one also there is a book a boogie we need to find a boogie GMO I'm going to have the full video available you can watch it afterwards so apparently some of the countries are missing look at that when we filter let's see I think it has something to do with is urgent okayed is not filter region filters can't reach a filter now region parent parent Bridge and a Kanto region query selector will come through region oh I see I see now because we have this class here inside the [Music] the model so we remove debt and now we don't hide the model anymore I forgot to remove those glasses okay now it should work let's see Dola click and look at that yeah so basically it's Heidi from painer the model here good so we fix that okay let's see undresses love the dark mouth yeah pretty much it's nice it's nicer one than the light one of Kay great work great job thanks okay Vinnie Lea you missed some part it will be recorded so you can go over it I highly encourage you do so if you want to see what what's up Norva says some images are different width and height yeah let's fix that we can have where is the code here so we have the let's see we need the HTML structure [Music] here so we going to target the card image card [Music] card image I want to be wait 100% and height to be blended pixels now all the images are the same height but you can see they stretch so in order to fix that we can say object 8 power and now you can see all the images have the same width and height yeah the other issue might be now that some countries have euros on their name and it will push the card down maybe what we can do is to increase the weight on the cart under lady also let's add max weight of 100% because we don't want to be too wide on who I forgot to add okay yeah that didn't fix it we can add let's see I think if we add flex one to them they go bonkers but look at that it's pretty nice right we have all the countries here a case of lexan now with the width they have a pixel yeah I mean it's close let's see in the design do they have in the design where it is here they have something on oh it's smaller that's a good fix though so let's go here in the code and instead of having where it is an h2 here we can add h4 and it's almost pigs now it's too small let's make it below okay dark mode alright that's pretty decent and then we have to come back here and card each to want to change page three to remove the top in the top margin sorry so let's see maybe opacity of the model container that should look great what do you mean opacity increases decrease it female country region this kind of code is it I never JavaScript so let me show you this is template strings little template saying something like that so basically you can have this back tic and you're creating a string and inside it using this you can add variables inside the string so instead of having to say something like let's say constant will be the name plus surname you can do string be where the name and surname earning also don't forget it here you have to have the spacings of something like that this is a much cleaner approach so that's what that is okay next add background opacity decrease oh well we have the these variables and if you I mean if I would do that where is it yeah so if I'll do that then it will we'll have to keep track of which colors we changed oh yeah I mean you can see the difference maybe on the white only white Modi can't but yeah it's decent okay any other questions if you have you if not just say something the chat hi or bye or oh yeah if I'd before I forget tomorrow at 5:00 we'll have the night's livestream let me know what you'd like to see tomorrow we're going to have a live stream every single day at 5 p.m. UTC pastor the same time it was today so now it's 7:00 my time I started at 5:00 look at your time now and go back to ours how many years of experience do you have seven close to seven can you share files with us sure under a beautiful great work looks you're pretty pro using the s-curve finally that's our sharing code yeah let me create a github page github repo let's see + new repository three named name country is rest like that and I'm going to push this do this will it have repo [Music] so let's go here let me go back do a total get blown [Music] you appear to have cloned an empty repository Radio 5 praise me you ah okay train your file commit now clone oh okay and now we can take everything from here and copy it here right and we can get at all it push Oh II know entrees go into the folder gate add it push what oh man raps health masters are not match what happened okay I'll do it offline apparently I don't know how to do it I need to check okay I'll add it to github repo and then you I'll put the link in the description of this video oh you need to get commit first yeah Hyman probably because I'm tired let's say that because effect so get clone [Music] work ts URL eat alone this URL running into them going into countries okay then we copy this over replace why not okay then get at it comment in it ank's the a part eight push push push push okay okay and if we go here and we take this and place it in the chat there you have it Thanks I work for that yet now you have the code now let's see what else what should we build tomorrow that's the big big question these took close to two hours decent without the explanation might be able to do it in an hour yeah but it was fun I enjoyed it I like doing ten men let's see what else do they have here challenges section rising four cards they have this where is it game paper scissor which looks nice we might be all this you it's pretty decent and it has a nice design yeah maybe I don't know what do you think maybe you have other ideas or we can go two codewords toddlers and do something here these are coding challenges we can do it in JavaScript or in JavaScript or Java skill because they don't know any other language that well all right thanks very much for listening and for watching keep in mind that this will be added to my youtube channel so you can watch it over again I might need some help with adding the timeline for this video if someone is kind enough to go over the video and I don't know add like starting working on CSS starting the HTML or starting coding so it would be easier for people to follow oh yeah we also have the crash where my Mack failed Oh maybe people can skip that part if anyone is kind enough to help me with that I'd be grateful if not I wish you have a great day I mean even if you do or not I start to ramble around oh yeah I should go to sleep very much for watching and listening see you tomorrow at 5:00 same time as today have a great great great day I

Channel: Florin Pop

Views: 5,292

Rating: 5 out of 5

Keywords: javascript, css, live coding, landing page, css animation, coding, development, programming, javascript dynamic update, dynamic value, landing page coding, html, html css landing page, web app, web app coding, web app from scratch

Id: uIj8wbvxZIk

Length: 137min 6sec (8226 seconds)

Published: Sun Jan 19 2020

Reddit Comments

[u/FlorinPop17]

I've seen people getting more and more interested in Live Coding Sessions so I decided to create myself a little challenge. 😆

Starting today, I'm going to do a Live Coding Session every single day at 5PM (UTC+2) on my YouTube channel.

We're going to cover things like: - coding a website from scratch (design to HTML/CSS) - adding JS functionalities on top of these pages - JavaScript coding challenges - and maybe even go into ReactJS It will depend on what people want me to code, but I'll try to cover all of these.

If you'd like to see this sort of things, feel free to join!

Also, feel free to suggest topics if you want. 😃