Code explain says hi today we're going To build a website a responsive website That shows the FIFA World Cup 2022 Results matches matches to come and the Standings so we're going to make this Responsive and we're going to build this Using all League vanilla JavaScript CSS And HTML so you can see here that our Website is kinda responsive So these are all the matches We also have matches to be determined And we show the stage here the date of The matches Etc so we're going to use a free API to Build this website so without further Ado let's go and start our tutorial but First don't forget to like And subscribe Let's do it Now let's go and create our project so I'm gonna go and open a folder I'm going to the desktop and I'm going To create my project folder so I'm just Going to call this FIFA World Cup 2022 I'm going to select that folder and now I need to create some files here the First one is going to be the index The index.h channel And a folder search then I'm gonna need Another folder inside called CSS then a File inside that CSS folder That's going to be style.ss
So let's go now into our index.html I'm Going to create a basic HTML code I'm Going to change the title to FIFA wall Cup 2012 and I'm going to use just hello Here and then I'm going to hit save now I'm just gonna go and go live So this will open a live server I'm just Gonna go now and Zoom in now let's go into our style that Says but first let's link that style Sheet so I'm going to use SRC here then says Install that says hit save now let's go And see if that's working background Color black hit save and it's black now Let's remove everything here so now I Need to get rid of these patterns and Margins so I'm going to set the pattern To zero then the margin to zero now I Also need to say the box size into both The Box And now let's go and grab the font we're Going to be using for this website so It's called mavin Pro I'm just going to Go and select this one here medium 500 Then I'm going to copy the length to it Now let's go to our A project here and I'm going to go to The index just before the style sheet I'm going to paste in that font here now Let's go back into our star.s and let's Go now and go back to Google font Website and I'm going to copy this
Assassin's Rule now let's go back to our Starter access and hit save now you can See that the font has been changed now Let's go and set the HTML A font size for the hall like document To 20 pixels [Music] And that's it and now let's go back to Our index.html file and the first thing We're going to be creating is the header Well let's go and create a Dev with a Class name container And then inside I'm going to create Another tab with the class name header Now let's just go and reset the zoom Value Here I'm going to use an image And it's going to be this image here so I'm just going to go and save Image as I'm going to desktop and then search Then I need a folder here called Image Then I'm going to save it there Now let's go back here and I'm going to Use SRC then image then logo Now I can see that here now I'm just Going to go as and use as alternative The the title Now I'm gonna go and Use an H one here I'm just gonna go and grab this again I'm going to hit save now let's go back To our style access to style this
So here I'm going to add a comment For header then I'm going to style first The header image I'm going to set the width to 100 pixels For the image now I also need to add Some census rules for my header now I'm Going to display this as Flags Then I'm going to align those items So I'm going to set this to Center you Can justify content Center as well Now I'm going to set the height of the Header to 150 pixels Well we can't see that yet so I'm just Gonna go and use the background color Now I'm not gonna go and use this as a Plain color I'm going to use some vars Here some variables So root Then the name of the variable is going To be Main Background color and it's going to be an RGB so I'm going to use 138 21 And 56 And also I need a main color for text It's going to be white Color Now I'm gonna go here the background Color is going to be an RGB and I'm Going to use The variable main background color I'm Going to hit save now you can see it There now I'm going to set the color of Text to RGB as well then bar then
Uh main color I'm going to hit save Now I'm going to go and add some margin Right to the logo here so I'm just going To go here and say Margin right I'm going to set this to True Rams which Means 40 pixels so here for the header I'm going to add some Padding for a left and right so padding 0 for top and bottom but 0.5 grams for Right and left And that's it for the header Now it's time to go and create the Number but first I just noticed that We're using here the Run font weight so We're going to use 400 instead of 500 so I'm just gonna go to the index.h demo so Here instead of using the weight 500 I'm Going to use 400. And now it looks like the original Website and now let's go and create the Navbar so just under the header I'm Going to add another Dev with the class Name navbar then I'm going to have three Links so I'm going to multiply this by Three and hit enter now this one's going To be today matches And this one's going to be uh all Matches and this one here is going to be Uh standings or the table standings now This one here is going to be active by Default And let's go and style the nav bar so
I'm going to add again A comment for navbar now let's go and Style our nav bar So I'm going to go first and add a Background color I'm going to to use the Same one we used for the header I'm Going to hit save now I'm going to go And change the background or the display To flex Now I need to set the height to 60 Pixels And then I'm going to go and style each Link Now I'm going to go and set the Background color to Black just to see What's going on here So I'm going to set the width of these To 100 percent And the height of them to 100 percent Also now when I said the width of these Links here all of them to 100 this means That these depths here will now have 33 Percent for the width for every one of Them now I'm gonna go here and use Display Flex Flex not block and then Justify content or Center And then align items Center Then I'm going to use a border right To separate those buttons a border right So go to write one pixel Solid It's going to be an RGB and I'm going to Call this the Border color
Now this for the color here will be just A light version of this color here so I'm gonna go here and Save all the color it's going to be on Here six two one uh 16 then 59. I'm Going to hit save now you can see that Border there Now I'm gonna go here and Get rid of this background block And I also need to use the same color For the Border top of the nav bar to Separate the Border or the nav bar from The header I'm going to hit save zoom in Again you can see that the border is There now you can see when I zoomed in The text here touches the left side of The screen so we need to add some Some padding here some patterns so I'm Going to use zero for a top and bottom And then pound 25 grams for left and Right then I need to Center that text Text align Center Now I need to make this a little bit Bigger so I'm going to use font size one Point one ram And then I need to give the user the Feeling that these buttons are clickable So cursor pointer Now it's time to go and change the color Or the background color of these buttons When I hover over them so I want to the Color of text to be the background color And then the background color will be The color of the text so I'm just gonna
Go and grab these here And then I'm going to use navbar then That link then hover Now I'm just gonna go and Use the main color for the background Color and the background color for the Color of text and now you can see that When I hover over the buttons the colors Switches now we also need to use the Same thing when it's active so I'm just Gonna go here and say nav bar Then that link then the active And now this button here is active and That's it for the navbar now it's time To go and create today matches component Now it's time to go and create our Matches component so the matches Component is this component here so we Have the date so the stage the date and Then the matches in that date so let's Go and create This component here so I'm gonna go into Our Index.html so under the navbar I'm going To create a Dev with the class name tabs So we'll have three tabs here one for Today matches all matches and one for Standings so I'm just gonna go and Multiply tab by three so now this one's Going to be for today Matches I'm going to hit save now inside of Today matches we're going to have our Matches component so this one here will
Have this Stage I guess so A Dev with the class Name stage so we're going to use an H3 I'm going to say like a group Stage then let's say today Then I'm going here to this Just enter I'm going to use a Dev with The class name container now inside this Container here so we have this stage and Then inside the container I will have my Matches here so that's going to be Inside A there with the class name match Container So the match container here is a single Match so if I have two then I would have Two of these of these dab now inside the Match container I would have a group So I have here I had the group now let's Say Here I'm going to use an H4 let's say Now round of 16. Or this could be like Uh Group a Etc so if it's not the the group stage It's it's going to be just round of 16 Or any stage now after the group I'm Going to use a div with the class name Match so this is actually This whole thing now inside match I need To render the teams And also the match Date
So this thing here now inside the match State I will have uh three devs the First one is going to be the state Itself whether the match is finished or It's half time Etc then the date of the Match let's say for example Saturday December Three Then I would have also it there with the Class name Time So let's say 18 o'clock Let's go back to our app here now inside The teams I will have Two teams so two teams This one's going to be the home team And this one's going to be the away Team Then inside the home team and the away Team it's going to be the same structure So I will have a team info So I'm just going to call this info So it's going to be an image And then it's going to be a Dev with the Class name name for the name of the The the team let's say just Brazil and Then here I'm going to use a score Uh for the class name of this Dev let's Say just zero for now so if I take a Look here you see that we have Brazil Zero now let's just go and grab Brazilian The Brazil team flag So I'm just going to go and copy
That Source Now let's go back for the alt I'm just Going to give you the same thing the Name of that team now I'm gonna go and Grab the whole thing here and paste it In here now let's change this for Example Spain and I also need to go and Grab the Spain Uh flag So let's copy that link So I'm just gonna go and change this Thing here to the spin flag let's go Back here let's use spin here for the Alt And that's it so now I have created the HTML code for a mattress component now Let's go and style this So let's go to our style that CSS I'm Just gonna go and start the tabs first So tabs So tabs is going to have These tab Element inside And I'm gonna go here and say tabs and Because I want to Center these elements Here inside my tabs elements I want to Display this as a flags and then justify Content Center Now you can see I sent it now I'm just Going to go for each of the tabs and I Want the max width To be 1 000 pixels and also the width of That to be 100 percent now if I use the
Background color here A background color let's say this color Here And use a margin here And let's say five pixels Now you can see we have three tabs but We're not going to go and show them all At the same time when I am on today Matches I'm going to show this tab when I'm all all matches I'm going to show This tab here standings I'm going to Show this tab so I need to hide these Two here and keep just this one here When I open this I want to hide this one In this one and keep just this one so I'm gonna go here and add a class name Called hide Now let's go and create that class name Hide So hide then display is going to be set To None Now I have only one tab here now when I Used Max width so if I go and Make this bigger you can see that when It's a small screen just takes the 100 Percent of the width but when we go For more than 1000 pixel it's just Centered because I used here justify Content Center on the parent tabs now I'm gonna go and Get rid of these here Now the first thing I want it to Style is the stage but first let's say
Matches Matches and I want to add some margins Here let's say one red That's a lot I guess Let's just say one 0.5 grams and then Inside we need the let's just go and see What we have here so matches then stage So matches In that stage I need to use some margins Here for one ram for top and bottom here Then I'm gonna go and Style the container match container And the match here so let's go and use And just copy these So the container I'll write the container here The match container So I also need to use matches here Matches then I'm just gonna go and grab The whole thing here to use it on the Match Class name Now for uh the match container I want to add a border Of one pixel solid I guess not on the container but just The match container So the container is going to have all The matches inside so let's so we will Have multiple matches so I want to add a Portal just for a single match not the Whole thing So one pixel solid now let's just use Black for now
That's great Then I want to use a Max width of 100 or 400 pixels That's right now let's go and add some Pad in here patterns So 0.5 grams Okay now let's go and Add some margin for this here so it's Gonna be the match so margin top Let's say 0.5 grams Now let's change the width and height of These images so I guess it's going to be the Did that The team the info So the team then that info then the Image So the width is going to be 24 pixels And the same thing for the height Now I need to go and Make the The the info and or the I guess the info and the score both Aligned horizontally so I'm going to use Team here So let's go and use that Team so I'm going to display this as a Flex You can see now they are horizontally Aligned now I'm gonna go to uh Align teams and match States I'm going To use match here so this one here so I'm going to display this as a flex as Well
Uh so now I need also To use team info here Team info And use Display Flex again And now everything is displayed Flex now Here for the match I need to use Justify content space around And I guess I'm going to also align item Center Now for these the the team here I'm Going to add some margin here top 0.5 RAM and 0 for left and right And now let's go and add some space Between these info here and this match State so I guess I'm going to this match Here Or let's just go and see the score with The score So we have the score here so it's going To be inside the team so inside team Display Flex I want to set the justify Content to space around I guess Then I also need to set its width first To 60 percent Let's just uh the background color here To see what's going on So just a this is a team All right So team it has the info and the score Teams okay I need to add this width here On teams And I didn't create that yet so let's go And say that
Teams let's go and see it's with the And you can see now that we have them Like we have some space between them Here Now let's go to our info and just align Items Center No not not info but I want to like send It this so I'm gonna go and use the Match state So let's go here to let's say A match That Match state So I'm going to say Display Flex Then I need to flex Direction column Then Display or align items Center And then I'm going to give this a width Of 400 pixels 40 40 Percent and here let's just go and add Match here for all of these Badge now let's go and add a margin Right for this imagine Rights of 0.5 grams Let's also give it a border let's say One pixel so solids and let's actually Create the color for that Let's say body or [Music] Color
So I'm just gonna go to the top here And I'm going to use 214 then 197 then 197. That's like a gray color So I'm going to use That as a border for the images Then the Border radius is going to be 5 Pixels Now I'm just going to go and get rid of This background color here Let's zoom in you can see we have this Background color rounded Let's zoom out again now I need to add a Left Border here so I'm just going to go and Use this On the match State here It's going to be to be below the left That's it now let's just Check if we have the same thing I guess we almost have the same thing Here We just need to change this border here Let's go and do that I'm just gonna go and copy this let's go To our container I guess It's here I'm gonna use a board radius As well here for five pixels And I guess that's it Now let's go and duplicate the match Because we will have We will have more than a single match
Now let's say we have four matches here So first I need to add some margins for A match container So padding then some margin as well 0.5 Grams All right now we have that so if the Screen is like wider we need to show uh Two matches per row so I'm going to go To The Container here and I'm going to Set display here to flex and then Justify content Center Now I also need to use flex wrap Flex wrap I'm going to say to wrap now The flex here I'm going to set it to 50 Percent And that's it so now if I go Wider This is not the it will just show two Matches per row now if I go and for Small screens I will have just one match per row and I Guess we need now to just add the Hardware effect for this so I'm just Going to go to the top here let's just Print this And let's go for our match container Here I'm going to say matches Matches dots container that much Container on Hover I'm going to Okay I need to use here the background Color for the background and the main Color for the color of text And that's it so it's almost the same
Thing we have here I guess So with a little bit of like a Difference in space and here But that's okay I guess Now we're done with matches component And for all matches we're going to use The same component so no need to do any Like uh HTML or css for this tab here Now we need to go for the standings And now it's time to create our Standings tab here so I'm just gonna go And call the second one all matches And then this one is going to be the Standings And now I need to unhide this so I'm Just going to remove uh hide and then Add it to today matches To go to the standings we need to click On this link here which means that this Will be now active the standings link I'm gonna hit save now you can see that Our standings here is now active and now Whatever was in the understandings here Will be shown now here so now let's go And create uh the HTML for our standings So I'm gonna have here a component Called group so I'm just gonna use a Dev With the class name group here then I Will have the group title So I'm going to call this group Title Now inside the group title is going to Be an H3
It's gonna say group a for example Now I will have a rows And columns so it will have one two Three four five rows and I guess one two Three four five six seven eight nine Columns so I'm just gonna go here so I'm I'm going to say row I'm going to create this first row here And then just duplicate it so the first Row here is going to have Nine columns The First Column is going to be the main Column I'm going to call it Main and uh This one's going to be team here So team then match played then the when The match day when how much how many Matches they won then draw Then lost And then calls for and then goes against And then calls difference and then Balance I'm going to hit save let's look at this So we have group a team match played Etc All those there now I'm going to create Another Dev here Called teams and this is where I will Render these teams every team is just Another row so I'm just gonna put this In here now I'm gonna call this team I'm Gonna add this class team here I might Need it now I'm going to create a Dev With the class name wrong so for example One here Then uh
The image for the flag of the uh of the Team let's see again Brazil again Then here it's going to be the name of That Team Brazil now let's go and grab the Link for For the Brazilian team Let's go back here I'm going to hit save Now this is a single team now we just go And change these so let's say three Two One Zero For Four one Three and then Seven Now let's go back to our app so we have Our group title the top row and now we Have our team the first team now all I Need to do is to go and duplicate this Like four times so I have four uh teams In a group so one two three four I'm Going to hit save now I have four teams And that's all I need for the group Component now it's time to go and style This So let's go to our Starter CSS I'm just going to go and minimize these So let's go to stylus as and start with Our Standings Dev Attendance
So these standings here is actually a Tab we already said the max width of the Tab to 1000 pixels now I want to set the Standings here tab to only 600 pixels so Max with two 600 pixels Right now you can see I centered and Then I just need to add some pad in here My like zero points 75 Rams And now let's go and style this and I Want I need to add some margins here Margin bottom so standings That group And then the standings That group Dot group title Now I just need to add some margin Bottom here Let's say one ram All right now let's go and Go to standings then that group and then That row so each row is going to be Displayed as a flex And I'm going to use justify Content space between Or actually I don't need to So I'm just gonna go now for each Two standings That group and in that row Now for the main one here So this is the main so the main here Will have a flex set to one Now you can see it takes the most of the Space here now I will set now the width Of these to 40 pixels so I'm just gonna
Go for standings That group and in that row and in that Column So each column we have a width of 40 Pixels That's right now we need to Center these so I'm just going to go and Say display Flex again justify content Center and the line items Center But I don't want to like Center these so What I will do is I'm just going to take This Okay I'm just gonna go and take this to The bottom here And then use justify content start Just like that Now I need to make this Flags here smaller but they're gonna be The same thing as this Flags here in Today's matches and all matches so what I'm going to do here is I'm just going To go into Our rows here let's remove all the three Rows and now let's go here and add A class name for this I'm going to call It flag now I'm going to go again and Minimize this and deploy it four times So I'm just gonna go here now and uh Select that flag or I'm just gonna go to The top here so this is where I actually Start the image so I'm just going to Call this flag Now you can see that the flag has the Same will have the same
Style as this the ones we use in today Matches Now I will need to go and add Some margins for this rank here so Standings Dot group and then that Row and then that's Uh I guess it's rank rank So I'm just gonna go and add some margin Rights of 0.5 grams Yeah now for each row For each row I'm going to add some Margins So 0.5 RAM for top left and right set to Zero And now I want to go and make this color The color objects a little bit lighter So I'm just gonna go so I'm just gonna Go and select the top row so I will go Here For my just after the group titled the First show is gonna I'm gonna add a top Class name there So now I can select that row I'm just Gonna go and duplicate this Now it's the top row dot columns so all The columns now in that row will have an Opacity Of 0.6 Now you can see we have that lighter Color now it's like a gray color Now we need to go and add a board left For this two teams the ones that will go
To the next stage So I'm just gonna go here and select the Teams So it's going to be I'm just gonna go and duplicate this so It's going to be standings uh so it's Going to be teams Then row And then end child so the first here Child and the second child also so Border left 4 pixels solid And then I'm just gonna go and uh Use blue color the blue color here Now I'm just gonna go and use the same Thing for the second child And that's it now we need to add some Borders to this one here so I guess that's the rank So Let's use just Zero for top and bottom and 3.54 left and right Now you can see that we have this they Are not aligned So I'm just gonna go and add I bought The left for these as well so I'm just Gonna go and copy this Paste it here I'm just gonna go and Remove the whole thing so for all the Rows I'm just gonna go and add This color here but it's going to be Transparent You can see now that they are aligned
Now I guess I'm gonna go and duplicate These groups here So we have this group let's say you have Two more groups group a group and group A so now I need to go to the group here And add some margin Bottom one Ram or let's make it two Rams To have some space between the the Groups And I guess this is lots of space here For the title so let's just save 0.5 Grams Or 0.75 Rams And that's it now let's go back here Remove those groups And now it's time to go and use JavaScript to render the groups and Today matches and all matches Well this is the API we're going to be Using for this tutorial I just searched For free API and I ended up with this One here I will put the link down in Description so to use this API we first Need to create an account we need to Send a post request to this end phone Here and we need to provide this data Here So when we register successfully we get A status access and we get a token so This token here is where we have to Provide each time we need to like Request data from the API and because it Expires we need to log in to get a new
One so when we'll log in we need to send A post request to this endpoint here With the email and password And let's first go and register and also Log in Now let's go and create an account so we Need to send requests to this inpound Here I'm just going to go and copy the Whole request now let's go to our face Code here let's go and research and Create a folder called GS so this is Where I will create all my JavaScript Files let's call this Register.js now I need to go and paste In add request here and it and we need To transform this to a fetch request so I'm going to create an async function Here I'm going to call this uh register And I need here to use fetch So fetch and then I need to use this end Pound here And then I'm going to set here the Method to Post So it's supposed to request then I need To set the headers So headers And I'm going to paste in this I need to Add some quotes here Then a body To send this this data here I'm going to Json stringify this I'm going to hit save now let's go and
Remove the the comments here Now all I need is to change this so Let's say code Explained And then I'm going to use code explained At code Let's say code explained Dot Dev This email doesn't work So I'm just gonna go and use one two Three four five six seven eight let's Just copy the whole thing Now I'm just gonna go and Save these here let's say const Email is going to be this email here and Password is going to be that password Let's use equal sign here So let's just get some space here So I have here okay so I have here the Email and password and I need to pass Those email and then password So the email and password now I'm gonna Go and call the register Function here but first i'm gonna need To get a response and I need to wait for Fetch to finish then I'm gonna go and Get the data here So I'm going to await again for res dot Json And then console log the data Now if I go and open the console log I First need to go to the Index.html file And here I need to
Link this scrap we just described we Just created our Register.js and I need to use default Here To load this script just after this one Finishes Now when I hit save I have this missing In class declaration So cost email equals password equals I need to get rid of this comma here Now let's go and call the register Function here Register function If I hit save now I can see we have this Calls now to fix this I'm going to use a Proxy so it's called cause A everywhere So you need to go first to cars demo So to cause demo and you need to request A temporary access to the demo server And then you need to copy just this part Here And I'm gonna go and use it as cost Proxy And now I'm just gonna go and use some Backticks here Use the proxy and then Use this here without the quotes I'm going to hit save again Now I can see I would get an object it Says success and the uh we got the token Here And it says user created so now we have An account with this email here and this
Password so I'm just gonna go and Uncomment this register I don't want to Go and recreate the account so we need To register just one time so I'm just Gonna go and remove this command here Now I can use this email on password to Login I can also use this proxy here so I'm just going to go and hit save and It's time to go and log in Now it's time to go and log in to get The the token here so I'm just going to Go and copy this request now let's go to Vs code and let's go under JS here and Create a new Full called Login.gs now I'm just going to go and Paste in that request uncomment this and Now I don't want to repeat myself so I'm Just going to go to register here and Copy the whole function And rename it login Now for the endpoint here it's going to Be Slash login And then the proxy here is a global Variable As well as a email and password So here we need to send just the email And password no need to send the name And password confirm now I'm going to Hit save and call login So I'm gonna need to go first and Link that file The login file here Now if I hit save
You can see we have an object here which Is which says status success then we Have this data property So data property and then we have this Other property called token dot token So now if I save Now you can see I will get just a token Here and that's what we need so in the Login function I'm just going to need to Return this token Return And now whenever I want to get the token Just need to say cost token equals login And I need to wait for this function Here so whenever I want to get the token And use it to make a request I will just Run this code here Well now I can't use a weight inside a Inside this file here because I need to Run away inside a function with a sink So I'm just going to go and cut this now I'm going to go and create a file called Init here And this is the initialize our app So I'm going to create a function Called in it And then this is where I will log in and Get the token and now I can use this Token here so let's just cancel log it And hit save now I need to go to the Index.html file and Link our init file Dot edit.js this file and now let's go To our init file so now we're not going To call login here anymore so it's just
Like we created this function here now Let's go and get rid of this login and Also the register and now let's go and Call our init function And hit save Now we must see the token here now I can Choose this token here to send the Request to get today matches and that's The next thing we're going to do Now I want to make our buttons here or This links here functions so uh I'm Gonna go here to the index.html and I Need to select these links here And also the tabs here And you can see that we can just make a Link between the these links here and The tabs so this one here this first one Here index is going to be zero and this One's also is going to be zero this One's index is going to be one and this One's also two and this one is two so I'm just gonna go and add here all Matches because this is the one that Doesn't have inner any inner age demo Content Now I'm going to hit save and I'm gonna Go and create another uh file here Called navigation Dot GS now inside the navigation.gs I Need to select both the novel link and The tabs tab so I'm going to do that Let's go and say const links Let's say a document dot query selector All so I want to select all the the nav
Bar That link I'm going to hit save now I'm just going To duplicate this I'm going to say here Tabs and this time is going to be tabs Then tab Now I'm going to hit save now if I Console log links I need to go first and Link my navigational file here Now you can see that this is a note list If I want to make this a a an array I Just need to like Red Dot note list and put it in an array Now if I hit save now you can see that This is now an array Now I'm going to do the same thing for The tabs Now I want to go and add an event Listener to each of these links so I Need to go and say lengths that for each Blank I'm going to say link that add event Listener and it's going to be a click And whenever I click on that I need to Call it function called select Tab And I need to pass in its index here so I need to get that index from here So I'm gonna call it index or idx Foreign so I'm just gonna go and create That function now select tab it's gonna Take in the index now let's just console Log that index for now
So if I go now and click on today Matches it's going to show 0 1 then 2. Now all I need to do is I need to go and Use a for each method And on the tabs or on the links it Doesn't matter so I'm just gonna go and Use a for each on the lengths so each Link here and then it's index Index Now if the this index here in our Lengths array If dot index is the same as the idx Then I want to make this link active so I'm just going to go and say link that Class list dot add The active class name But if that's not the case I want to Remove this active from that link So I clicked on the link now I send its Index to select tab now if that index Happens to be the index of the one I'm Iterating then I need to add active to It if it's not I need to remove the Active class name from that link so I'm Just going to go here and try so I click On this one now it's active Now this one is active but this one is Not anymore Etc now I need just to do the same thing With the tabs so I'm just gonna go here And say Tabs and because they have the same Index I'm just going to go and use that Index tap the index class list that
Add or remove here we need to remove the Hide class name so we need to remove the Height class name to show the Appropriate tab now I'm just gonna go And copy this paste it in here and this Time we need to add that height So uh I guess I need to use here index instead Of idx So I need to use this index here instead Of the ID X so this is the index of what I have clicked on so I'm going to hit Save now now let's go and click on today Matches now you can see that we are on Today's matches All matches and standings And you can see that I have here This group a this flag didn't get the Class name let's go and fix that so I'm Just going to go here Into our today's matches I'm gonna go and remove all the Containers now let's go back here I need to use a class name flag if I hit Save Go to Day messages you can see it there Now let's go and do the same thing with This one here All right And that's it now let's go back let's Just go and minimize this And let's go back to our navigation Or to our index.html now I want to make This one here active
This one's not active I want to unhide This and I want to hide this one here I'm going to hit save and this is the One I want to show by default and also This is the one we need to go and work On next step Now it's time to go and get the matches I'm not gonna get all the matches yet I Need to go and get the matches by date By today's date So the date is going to be in this Format here so day then month then year So this is what we need to send and it's Going to be a post request and this is What we need to send in the body so I'm Just gonna go and uh Copy this Now let's go back to our passcode here And let's go and create a file called Today Matches dot GS Now we need actually to go and Link that So search GS and day-to-day matches make Sure you call today matches or your link Today matches first then in it because We're going to call the function in Today matches from within in it so I'm Going to go and create a function called A Function get today Matches This needs uh okay let's just go and Save our end pound here now let's go to
To login And it copy this code from here And paste it in here now let's go and Use this So it's going to be a post Uh and also I need to send you the date Today's date is going to be 12. it's It's actually uh Four and then 2022. so I'm going to hit Save and I'm just going to go and Console log data here Now we need the token to send the token So we need to use authorization Polarization And we need to use Bearer Then a space then plus the token The token must be passed As a parameter here now I'm just gonna Go and call this from init So I need to use a weight then call get Matches and I need to pass down the Token And in it now I it says not authorized The access resources Authorization Authorization I guess Now we can see we have a success status And we have this data so let's just go And Use that directly Now you can see we have an array with Two objects this means that we have two Matches in this state here Now I can just take a look on this
Object so we have this away flag the Flag of the team then the away score It's called as we need we also have the Away team English friends that's also Something we need we also need the whole Flag and the home team in English and Also the home score Also we need the type here of the match Or the stage it's uh the round of 16. And we also know we also need to know The time elapsed with it's not started Or finished or it's half time or first Half second half Etc We also need the local date here this is The date of the match and it's this is The time this is just a string so need To convert this to JavaScript so we can Handle dates And that's all we need I guess we we can Also use the group here And that's it so uh you will need to go Through all what you have here to know Exactly what you need to use so now what I will do now is I'm gonna go and I don't want to how code this we need to Like get today's date and use it so I'm Going to use a const And I'm going to call this Date let's say new date so this is a JavaScript date and format it in this This way here we need to like I'm going To call to create a cost today and I Need to use Today our date that get the first one
Here is get I guess date Actually just go and console that today So it's four that's great so we can also Just like use some tactics here then So we need to use The date but first I need to get the Month here So date dot gets I guess it's gonna be Month And then a slash So it's now 11 4. now we need to add one Here so it starts from zero use git Month so Uh we need to use a plus one then we Need to like use another slash and then Again date dot get That you get full year Now if I say we can see now that we have The same thing here now I'm just gonna Go and Send today down now Instead of a string And you can see how we get the same Results so this is now working I just Need to get rid of this console log here And now it's time to go and Call this matches so const Const matches Equals data that data and now let's go And render the matches to our today Matches tab here So I'm gonna go now and Call a function render matches It's gonna take in the matches
And also it's gonna take in the elements Which is the matches or today Today matches elements so we need to to Render the matches uh into this element Here So let's go and select our today's Matches element here So I'm just going to go to top here Const So it's going to be to document dot Query selector And let's just go and grab the Class name Foreign Let's just actually copy the whole thing Come on so it's going to be a function And let's just go and Console log The matches and also today Matches Elements And we need to wait so it says matches So it's an array and it says no so this Is null It's console log today Command PS code So it's no Today's matches Today matches Arc IC so we'll use we need to use Differ here as well so today matches run Before the page loads so I'm gonna hit Save now Okay we can see now that we have
Selected this successfully now let's Just go and see today Matches that inner HTML Let's say test I can see I'll get test here So that's great now it's time to go and Talk about what's going to go inside our Render matches function Well now I'm just gonna go and make this Uh more General let's say element here So now whenever I want to render the Matches to any element I just need to Pass that element here down and the Matches will be rendered to that element Now I'm gonna go to the index HTML I'm Gonna go and minimize this and copy the Whole thing I'm going to hit save now it's going to Be an empty uh Dev now test Is because of this one here now I'm Gonna go here and use some back ticks And then I'm going to paste in my Template So let's just rearrange this So I have this container and this is Where I will have all the matches so I Just need to go and copy the whole thing Or cut the whole thing here And now this is actually where I will Render all the matches Elements so this all matches elements is Going to be created here so all matches Element is going to be Equal to matches that map so our matches
Here what we get from the API is an Array and I'm going to use map to create Another array which is going to be our Matches element here so I'm going to go For each match and I'm going to return The template for a single match that's Some just what I have a copied from here So now I will create the first mesh now If I save Foreign Matches but this is a static like HTML Code so we need to change these infos Here now so I'm going to use match So the the flag here Must be like dollar sign some colored Braces it's going to be match that Let's say home flat I just remembered this if you don't Remember them let's say console log and Say match So you can see here that we have this uh Home flag Right then you can see it has changed Already now we go and say Brazil here And we or instead of Brazil you're going To need to use This home team English And the same thing here Now if I hit save it's gonna say now So team English so it's going to be Match dots And also match That So now you can see we have Poland here
Now we need also zero The score the home score it's called Home score So match Dot home Score And that's it so and now I need to go And just copy This And use it in here Now instead of home I'm going to use away Save Now Poland against friends and Senegal Against England now I need to go and Change the group a here and also this is Not the group stage this is round of 16. and now let's go and handle these so This is where we show group stage So I'm going to use here match type And This is going to be Date so I didn't create this yet let's Go and create them here at the top so Let's go and say let's date we also need Time and we also need match Type So Now I will go and get the date and the Match time so you can see now that they Say here undefined undefined so now I Will go and get the date The date and time so if you remember I Have this match
Or vocal date so I'm going to this is a String I'm going to convert this to an Array and then I'm going to use this as The date here I'm just structuring this Array here and this the second one is The time is the time so I'm going to use Local date here So it's going to be Match that local date and because this Is the string I'm going to split this On space so we have a space here I'm Going to use that now if I use split This will convert this to an array now And if I hit save now let's go and see So now we have our date here but we Don't want to show the date here we need To show today for example now for Undefined here it's a match type now Let's go again and console.match Show you Okay sorry We need to do now So I'm gonna go here and Use This group here Or this type here So I'm going to use one of them so I'm Just gonna go and create Icons here let's say const Uh match types it's going to be an Object so when it's like group I'm going to use I'm going to use a group stage So if this is group if it's like
Uh R16 I'm going to use Round Round of 16 So now the match type here I'm just Gonna go and change it here so Let's say match type So I'm going to say match type equals To match types And then I need to use the match.type Here So match type which is This one here match match type Now if I hit save You can see now we have a round of 16 we Also need to change this group a here we Don't want to show group a so what I Will do here Is I'm gonna go in to this place here Where this is where I show the group so Now I will need to use An if statement so I'm going to check if The match Type is equal to group stage Then what I want to show is I want to Show the group So I just want to show the group and Plus I need a space here and I need to show This group here So the match The match dot group So so the group here is our R16 but when We are in the groups in the group stage
Group stage we show we the group here Will Be A or B or C or D so else I'm going to just like show the match Type I'm going to hit save now We're waiting So now you can see we have here round of 16 round of 16. but when it's gonna be Group stage we're going to show the Group and then A or B or C or D in this Place here now let's go and uh take care Of this day here Now I'm gonna need to add some comments Here so I'm just gonna go and say like Get date and time Of the match The date we need to format the date so For Format the date Two so we need to show today if it's Today tomorrow if it's tomorrow Yesterday if it's yesterday date and if It's not If it's a day in the future we need to Like show that in this format Friday and Then the month and then the uh Day date The day so I'm going to go and say date So I'm just going to go and change this Date again So I created a date here I changed it Here and now I'm going to change it Again so I'm going to use a function Called compare date so I want to compare This state here day of the match to
To today's To today's date So I'm going to send this date but this Is just a string here if you remember so This is just a string but I want to go And say new date to convert it to a JavaScript date And now let's go and create this Function here so I'm just going to go to The top here a function So it's gonna take again the date And let's go and create today date Which is going to be new Date And then all we need to do is to compare This date with today so if it's that if It's that if it's the case we're going To return today We also need to create A tomorrow date And this is where it will get like uh When where you will get confused a Little bit so I'm going to go to the Console here let's just remove Everything and I'm going to show you Something so let's say I have a new date Right and then that get date So let's say now we have we are on four Now if I want to get the next day I need Just to say plus one and this will be The tomorrow date But what's gonna happen when we are on 31 December then plus one that's going To be 32. while we need to get one on
The next month so to fix this is simple So I'm just gonna go and use new date Then that's set date so I'm going this To use this method here set date now Let's see what's going to happen let's Say I'm just gonna use one here so it's Gonna show this here now all I need to Do is use new date Then I'm gonna pass in the whole thing Again So if I hit save now it says December 1 Because I used one here now let's go and Use Three it's going to say December 3. now Let's go and try 32. So it doesn't say like and it doesn't Show an error it says January 1. so we Just fix this problem here so new date New data set date and that's gonna give Us the date no matter how what I pass Here so if I pass like 42 It's going to be January 11 and that's Great so I'm going to use this here So and now all I need to do so to get The next state is use the new date here Or today That get date Plus one So today that I get plus one that's Tomorrow And to fix the problem where we can get 32 if this was 31 we just use set date Now I'm just going to go and duplicate
This and let's use here yesterday So yesterday And you now that we're going just to use A minus here now I'm just gonna go to Compare this state with these dates here I'm just going to go and use switch and I'm going to compare the date that get Date again so get date is going to be a Number so if get date in where the case Is the day today that get A date So if that's the case I'm just gonna go And set this date here to Today And then break Then if Then f Then if it's tomorrow That get date I'm just gonna go and sit This to tomorrow Foreign Yesterday Then I'm going to use yesterday here And that's it now we will have a default So A default here what if it's not Any one of these then if it's not today Or tomorrow or yesterday we just need to Go and show the date in this format here So we need to show this so what I need To do here is I'm going to use this date Here It's a date a JavaScript date object I'm Going to use to local
Date string And I'm going to pass in English us And then an object so I want here the Weekday To be Short So if it's long it's going to be Friday If it's sure it's going just f r i now I Also need the second thing to be the Month so I'm going to say month then It's also going to be short version and Then the day here I want the day to be A number So numeric And that's set now all I need to do here Is just go and return that date back All right so let's just go and And console log the date here console Log the date let's uncomment this for Now So you can see it says today because It's actually today so which means that This is like working now let's go and uh Uncommon this here And now instead of just hardcoding this Let's say Bowler signed in Then date Now let's go and say dollar sign then Time And yeah and now you can see we have the Right time and it says today now we're Gonna need to Handle this finished so it's
Its time elapsed here but first i'm Going to do the same thing we did with These match types I'm just gonna go and Say const Const Match States It's going to be an object so these can Be not started So if it's if it's not started I'm just Gonna go and see not started And it could be H1 I just read this in the documentation H1 so it's going to be first Half and if it's a HTA guess so I'm just Going to go back to the document and Show you So here I have For the matches it's not started H1 HF And H2 and finished I'm just going to go And copy those Paste them here so h f if it's Half time Then H2 if it's The second The second half And if it's finished I'm just gonna go And show finished Let's go and remove this from here Now I'm gonna go here and Instead of just say finished I'm gonna Go and use Uh matches States
And then Match that I guess it's The time elapsed I'm going to hit save Now it's going to show not started Let's go to our app here and see so we Show today here instead of not started Now we need not started I don't want to Show this So I'm just gonna go and make this an Empty string now if I hit save So when the match is not started we're Just gonna show today and then the the Time now I also want to show the time Only if the if the match is not yet Played it's in the future but if the Match is already finished like here is Already finished I don't want to show The time I just want to show the date And show finished so that's why I'm Going to do it now so I'm just gonna go Here And check So check if match If match Is finished So what I'm going to do here so I'm just Going to go and create a cast called Finished And check so if match matches state With match Dot Elapsed time or time elapsed is finished So if it's finished
Then we know that for sure that the the Match is finished and now I'm going to Change the time so if match Is Finished Or it's Or it's live We don't show the time [Music] So I'm going to say time here equals so If finished Or live if the match is finished or live I want to go and don't show the time but If it's not finished on live we're going To show the time again So I didn't clear live here so let's go And check If match is live so const live so to Check if the match is live we need to Check if this is not true So this is not True So if it's not finished it's not it's It's live But also if the match is That elapsed time so I'm going to Explain this so if the matches with Match that time elapsed is not finished Means that the match can be live But if we check that matches that state Is not an empty string here so because If it's not started we show an empty String but if it started we show first Half half times second half and this is
All be will be evaluated to true so now Not started will be a false and finished Also will be false because we use not Equal here so if this is true if it's Finished and if it's an empty string Then it's not live If it's not finished and if it's not an Empty string then it's going to be alive Now if I hit save I will get today and the time okay so we Can't see it now but we will say later Now also if if match is live we don't Show We don't show time we don't show date so We're going to want to show the date So what I'm going to do here is I'm Going to use date here and then and I'm Just gonna go and I want I don't want to Change the date here this Global Variable because if I change it this Will change I want just to change it Here and now both this one here and this One here are using this state so now I'm Just gonna go and create This match date This match date and I'm going to check If it's live I'm going to show an empty String that I want to show the date but If it's not if it's not live I'm going To show the date And then I'm going to hit save now you Can see the that yet I still need to go And put this in its place so instead of Take here I'm going to show this match
Date And I think that's it for uh render Today's matches but I still have one Small thing here you can see it here I Have this a comma here and that's Because our matches date here is uh is An array because map returns an array so To get rid of that of that comma here Because we have here two elements this Is the first element and this is the Second element and in a right they are Separed by a comma so what we need to do Is we just need to join the elements of This right here so I'm just gonna go Here to the bottom here matches that Element this is an array I need to join Them with an empty string Foreign Now you can see that the comma is gone If I join them with let's say this Character here You can see that in here so we need to Join them with an empty string And I guess that's it now we have just Finished today matches which was like a Big deal long way we still need to add The matches type here But I'm going to like add them when we Render all matches and let's go and do That Now it's time to go and render all Matches here so what I'm going to do is I'm going to create another file called
All All matches Dot GS And I'm just gonna go here and Copy the the element and also the Function here Now I'm gonna go into all matches and Paste that n now we need to go just Before in it So we need to go and Link our file all Matches I'm gonna hit save go to all Matches I'm gonna call this get all Matches And this one here will be All matches elements And this also is going to be on matches So it's going to be It's going to be this element here all Matches so now uh get on matches token I Don't need to date anymore I also don't need to send the body And this is going to be a get request Now if I go and open this so we have all Matches We're going to get all matches from this And balance and it's a get Method so I'm going to change this to This endpoint here I'm going to hit save Now now I'll match the data I don't want To render matches here I'm just going to Go and console Matches Now I need to go into init I'm just Going to go and comment this and let's
Say oh wait get all matches and I'm Gonna send the token down to the Function and let's see we're going to Get from this function here so we have Now an array which has 64 which is all the matches in the world Cup so they are not sorted so if you Take a look on the app here we have all Matches we have this this is the first Day this is the second day the third day They are all sorted and the matches now Are put and they stayed here because They all have the same date now if we Take a look on this one here we have 21 Here 11 2022 and the second one here is has the Same date The third one Has the before date this is the first Day 2011. so we need to sort out this Array by date so that's what I'm going To do here so I'm going to change The matches here With a sorted Matches By date function then I'm going to pass In matches so I'm going to go and create This function here So function Then matches here Now I need to sort the uh the dates here Using this state this date you can see Now that we have local date this is a String and again this is the time so we
Need to do the same thing we did before So I'm just going to go and use Matches dot for Each Match For each match I want To I need to get Const the date and the time So I'm going to use the match Dot local Date I'll call date and I need to split this On a space we have a space here So I so I'm just gonna go and save this Now let's go and console The date So involved assignment to cost here I Need to use here instead of Const because I'm creating matches and I'm changing here I need to use let so I'm going to hit save now let's see the Dates we have for the matches so you can See here we have 21 2 times then 20 then 21 again 22 4 times 23 4 times Etc So they are actually kinda Like Are sorted bar we still need to sort Them by ourselves so this one must go Here so how do I do that I'm just going To go and create A I'm just going to call this sorted and It's going to be an object So what I'm going to do here Is I'm gonna go and use this object here
So it's going to be like this sorted It's going to be an object then it's Going to be like 21 Or 2022 and it's going to be an array and It will have all the matches Which are again an object now then it's Going to be like 11 like 20 2022 which Is going to be again an array of of all The matches so this is how this array Will look like at the end To do that I'm going to say sorted Date so sorted in the date and then it's Going to be to equal to an array and I'm Going to put the match in that array so Match here Just like we have here but now a lot of Matches have the same date so we need to Put them in this way here so which means We need to use an if statement to check If that's sorted This array here that has Own Property If it only has this property if it only Has that property created we need to add This match Alongside with this one here So Else if it's not then we need to create That property and we add that single Match in the array now on the next time When this exists what we need to do is
We're going to use sorted with date but Now inside this array I need to Destructure the old array so I need to Keep all the matches that were there and Then add the new match that has the same Date as these These ones here I'm going to hit save Now And all I need is to return that sorted Array now and let's see what we get here So we get an object this is an object So now we have the date 21 here and it's Going to be and it's going to be an Array which is what we did here now we Have three matches in this day here now When we go to 20 we have just one match That's the first match now on 22 we have Four matches so we successfully like uh Sorted these arrays by date now we need To again sort them now By increasing the date so we have 20 and 21 22 23 Etc So to do that sorry so to do that what I Need to do here Is I'm gonna go and uh sort them again So how to do that I'm just gonna go here And Show you so I'm gonna go and say object Values And then sorted so I'm going to show you What this will return So this will turn an array With all the uh the properties of these
Just the values so we have in an array In an object sorry we have always this Key then value So when I use object.values I'm just Going to get the values which is just The arrays of the matches here so this Is the matches that has all the same Date here And This is the second day the third day for Day Etc so object that values will Return an array now to show this I'm Going to use salt And then I'm going to use here day one And day two so I'm just gonna call this Day one day two this is and Ray this is Also an array and I'm going to return This This condition here so I'm going to say Day one Day one with index Zero so day one with index 0 is going to Be this object and I want to get this This date Here Local date So I'm going to say that local date Is greater than day two with index 0. Which is the first match then local date Again But this is not gonna work because these Are just strings these strings here so We need to like compare them using the JavaScript date so I'm just gonna go and Make this a new date convert this to a JavaScript date and then dot get
Time And the same thing here so I'm just Gonna go and say new date And then that get time And hit enter missing after so So I guess now if reference value is not Defined Uh 32. Okay just need to get rid of this now if I Save now I get an array Now the first array here the date is 20 that's great Now on the second one is going to be 21 That's 21. The third one is going to be 22. And that's great now let's just go and Render the matches here so I'm gonna go Now into here I'm just gonna go and Create a function called render All All matches This needs to match his array we just Sorted and the element here all matches Element Now let's just go and create the Functional render all matches I'm going to call I'm gonna use faction Here then matches and then element Now all I need is to go and Use a for each So for each match of the day
So match of the day So much of the day so what I need to do Is I'm going to go and create a Dev here Con staff is so document That creates elements and the tag name Is going to be Dev now I'm going to Render the matches of the day inside This Dev just like with we did here with Render matches we rendered the matches Of the day of today in the today's Matches element now I'm going to use the Same function here In here and rendered the matches of the Day here in this step I'm going to hit save but now before That I want to append them to all Matches element which is this element Here so all element now All The all it matches element now I'm using Append here Because this is a 4H I'm going to render The matches of the data Dev and each Time I want to go and append the dev to Element I actually need to use append Child here now I'm going to hit save now Let's wait and see what's going to Happen Let's open the console missing before Body All matches 18. So okay I'm using an arrow here hit save All matches and now you can see that we Have this uh all the matches now
Rendered let's make this a little bit Bigger Now you can see we have all the matches Now rendered Except now we have this Sunday November This is now group a group a this now Shows finished and the date now let's go And search for Today so this is today it's round of 16. Now it shows round of 16 instead of Group and also this shows yesterday Instead of this date here And this is all because of This computer day today is date and now This is tomorrow's matches This is now undefined because we don't Need we don't know what what we call These we need now to change them so so I'm gonna go and do that actually so I'm Gonna go here and console log The match Of Match of the day or I'm gonna call this Matches matches of the day matches of The day Matches of the day console log these Because of the day is not defined really 20. So now if I go here you can see that we Have We have a final so we have type final Here So how about just like Showing the type here
I'm just gonna go and say you index 0 And then show the type Now we have a final Third place Semi-final quarter and round of 16. So I have these two but we don't have These so let's just go in today matches Here and just matches type let's use QR And then see me Finals and then thirds because it starts With the number I need to put this in Quotes Then we have a final I don't need to put this in quotes Actually So for QR it's gonna be Quarter Finals We need an a here This is going to be see me finals And this is gonna be Third Place Playoff Just get the cut this from Google don't Final then I'm going to hit save now I need to get reds of this type here Now let's go to all matches and now you Can see if we go to the bottom here We don't have a dots undefined anymore Now see me finals semi-finals Semi-finals third place playoff and Final Now we still need to go and uh
Get rid of this all matches this means That whenever we want to render all Matches we just need to go and uh Clear the element using inner age demo And see it to an empty string I'm gonna Hit save let's go back to all matches Now you can see that it's gone Now we have a problem here So we don't want to show these here Because these are not determined yet you Can see that these ones here are already Determined so what we need to do here is We need to go so when we saw the matches By date we also need to change again the Matches array so to be Uh determined to be determined matches So I need to go and And Check for to to be rendered to be Determined matches So For those I'm just gonna go and change And change their Their uh Their Flags to this flag here and the Name to to be determined so instead I Have a problem here so So I'm just gonna go and use this image Here I'm going to save it So uh it's on desktop SRC image and I'm going to save that And let's go back here and open our Console Now all I need to do here is I'm going
To create or return Directly matches that map And for each match Of the day I then let's use for each for now just To see what's going on This is a good way when you want to use A map I'm just going to go and get rid Get a return So let's go and return the matches First just to see the matches here now I'm gonna go and because matches of the Day is going to be again an array so for Each match So now let's go and Console log that match So We can see that we have here the matches Now if we take a look on this one this Is a to be determined match we have the Away team is just uh some uh has just These underscores Etc so now I'm just gonna go and check If the away flag doesn't exist if it's An empty string this means that this is A to B this is a to B determined match If it's not I'm not gonna do any changes To the object so that's what I'm going To do here so I'm going to check F the match that way flag Is not Is not an empty is an empty string so if It's an empty string it's going to be False not false it's going to be true so
If the if we don't have uh if we don't Have any wave flag we need to return So I need now to make this a map then a Map we need to return here this array And I need to return the whole array no Need to use return matches anymore here Now I'm going to destructure match so I Need to keep all All these other informations like local Date match date time elapsed Etc but I Want to change I want to change the wave flag And I want to change the home Flag as well I want to change the home team English Name And I want to change the way team English name So this one is going to be to be Determined the same thing here to be Determined If that's where he stands for now for Away flag I'm just gonna go and use that Flag so it's an SRC then image Then it's gonna be image then it's gonna Be This image here let's just call this and Known And node So image unknown the same thing for this One So can accessible property local dates 73 73 was 73.
So this means that we had a problem so If uh it's uh if it's if the match the Away flag doesn't exist Is an empty string we'll turn the match With these properties changed else we Just return the match So now If we take on all matches now let's go To the bottom here And you can see that now it's to be Determined and you can see that the flag Doesn't like show by default but when I Like uh Harbor we have this background Added and we can see it now so this Means I'm just gonna go into the stuff That says as file Where is the flag this is the flag I'm Going to add a background color of Gray And you can see now that they sh they Are now uh having the background and we Can see them right now So I think that's it with all the Matches I hope so Yeah that's it for all matches now let's Go for standings Now it's time to go and get the Standings and render them so I'm gonna Go again and create another file called Standings Standings.gs now I'm just going to go And Link that So we have this All matches let's duplicate this
Let's call this standards.gs now in size Standings.js I'm going to use the same Code from here forget all matches Now I'm gonna go and put that in here Now instead of all matches gonna be Stand-ins Standings elements Same here standings Stand in standards elements so here's Scroll it's also going to be status just Gonna be a const No need to change that then here I'm Going to render Standings Standings Then it's going to be standings here and Standings element Now I need to go and create the function This function here And for now let's just go and console Log The standings I'm going to hit save Now instead of standings we're going to Get the matches we need to change this Endpoint so let's go back to our Edit documentation so to get the Standings we need to use a get method to This to use it get to send a requests to Get a request to this endpoint here So let's go back here and change the end Point I'm going to hit save now let's see what We want to get
So we have here an array it has all the Groups a b c d e f G h we have the group a so this is a Property Of this object group and then teams we Have these teams here Now let's go and render these to our Standings element so I need to go into The standings here element Dot For each So for each group I'm going to console just for now group Dot group And you can see that we have here a b c D f g h now let's go to our index here Now we're going to so we have our teams Here this is our row The second row the third row or team and This is the fourth team now I need to go And Remove all of these And this is a single team I'm just gonna Go and copy that for now let's go into The standings here and now let's go and Create an element called teams Element And this is going to be so I need to get The teams first Teams Equals group dot teams Which is an array so teams element is Going to be teams That map For each team I'm going to return
This template here Now this template row here let's Arrange this So we have this column here which has This elements here so the rank here is Going to be The the index of the team I guess so Let's just get that say index here so Let's use the index because it's As zero based index we need to add one So and X plus one here the flag Let's just go and Cancel all these teams here So each team will have a flag so just Need to go and use that So a dollar signed in team this team Here then that Flag I'm just gonna go and use this Everywhere Same thing for these Now this one's gonna be a name En S same thing for here now for the First Column is going to be Match blade so it's going to be MP I Guess MP So then when w Then I draw the DNA lost l L then Calls for Then goals Against GA then calls difference
And then bounce I'm going to hit save now And now I need so this is the team's Element This is what we go inside of this here So it's gonna go inside of here so it's Going to be teams element And let's go and copy uh the group Template And hit save now let's go to stand-ins Now in the status We're not gonna see Anything Now let's go and create that group Element const group element Equal again some back text Now let's Rearrange this again So we have this group title And then we have the teams in here Now we need to go And save this group elements in our Standings element this element here I'm Just going to call this element So element let's go To the bottom here And say Element dot inner Inner HTML equals that group Element let's hit enter let's go to Standings And you can see we have only one team Here which is not okay So I need to use a plus equal sign here Let's hit save
Let's go the standings and now you can See we have all the groups here We still have this comma again so we Need just to go and say Dot join Hit save Standings We need to join them with an empty String And there you go so we have all the ones Here I need to change the group here So it must be Must be Group Group that Group So it's this group here it must be group That group now I'm gonna hit save again So group a b c d a f g h that's good now We have one problem this has zero pounds And it's ranked first it has seven Pounds and ranked last Uh this one's uh not not ordered again We have no order here so we masked all Of these Now let's go and create a function Called All the teams So it's gonna get the teams An array and we need to order them we're Going to use sort so uh This is where I need to order the teams Order teams And we need to send group teams so let's
Go and open our console So teams here what I need to do is I Need to go into our teams let's just Return the teams and then call that sort So now we need to sort them using Balance right so I'm just gonna go and Say team a and team B I need to put this in side parentheses And I need to return this This condition here so I need to check If the team a Dot balance Are less than the team B dot balance So now we can see that we have this one Has seven six four zero Seven five three one six four four now You can see here we have a problem this Has four pounds but the goal difference Here is minus one and this one's zero so Poland must have been ranked second So this means that we need to check if The parents here are equal we need to Error like so these themes based on the Goal difference so that's what I'm going To do here so I'm just gonna go and get Rid of this return so I'm going to check F They are both If team that bounces team that team be That pounds I'm going to return The team A DOT goal difference is less than team
B dot call difference so remember we Have this in group C now if that's not The case I'm just going to go and return The old one So this must be here Balance Let's hit save go to standings again So we have this in group C now we can See that pawn now is ranked first in Mexico's third because we have this call Difference now let's go and see if we Have some uh teams that have the same Balance and the same goal difference Here So same balance but not same goal Difference Same balance but not same goal Difference It's here so you can see that we have Here Same balance Same goal difference but goals for are Now So South Korea must be ranked uh Second And not Uruguay so I'm going to do the same Thing here so I only want to return that F So f team Team Uh Call difference is are both equal we Need to see goal four so I'm just going To go and take this in here and say call
For Then call Four Then I'm going to hit save now let's go Back again to standings Now so South Korea is ranked second and I guess I'm not gonna go uh deeper Because we still can go deeper you can Just go and check the FIFA standing System Well we just did like a great job here That's enough for this This website And now it's time to go and Rendered day matches on matching Standings we just need to go to edit Here Let's go and await here and And Get All matches we need to send the token Again So we have today matches that's great All matches So git all messages is called two times So I'm gonna need to use get stand-ins Here It's standing So all matches Standings Standing is working so kit standard is Not defined Standings Oh no I didn't even change the name here So this must be good standings
So now we have today matches all matches Here And now we have this standings In place And that's great now when I refresh I Want to say load in here Before this loads so I'm just gonna go In here let's go and create Hey Dev with the class name loading That says Load in Now let's just copy this use it instead Of all matches here and use it also here So now if I hit save you can see load in Same thing here Same thing here but here it didn't like Go away let's just go to standings And here I need to reset that element Dot enter Enter HTML To an empty string Yeah now we just need to Center that so We need to go to our style that says as So let's go to our tab here I want to just go and add loading So that load in here All I need to do is just say text align Center Hit save now let's go And check that So we have loading here Always centered I just need to add some Padding here pattern let's say true Rams Let's go and refresh login
Login Centered I guess that's it now we just Need to go and check if this is Responsive Now it's time to go and make our like App works on small devices because now If I go and open The dev tools and if I select like a Small device like S10 here This like doesn't look great so the First thing I will do here is just like Use a small font size so I'm going to Choose a small font size so I'm gonna Add some for so small devices here so I'm going to use add media so media Queries And so I'm going to use max because I'm Going from desktop to mobile devices Which I don't recommend to do you always Need to start a styling The website for small devices and then Go up Here I made a mistake so it should be End But because this is like a small website I'm just going to go and do this so max Width I'm going to use 450 pixels and Then for the HTML font size I'm just going to go and use 14 pixels I'm going to hit save And it didn't uh so here I should say For 450 pixels now you can see we have Everything now in place But still we have this problem here and
That's because of this column here let's Just go and copy this I don't need to use 40 pixels I'm just Gonna go and use I'm going to use 25 pixels here And you can see it looks like just great Now if I go for an eye pad here Now let's just go and Shrink this so we Have here seven Fifty So when I get here I should like Add another media query here Like for when it's 600 pixels unless I'm going to use 16 Pixels and here I'm going to use 30 Pixels for the width If I had to save you can see I is Working just fine right now so if I Shrink it down more Now you can see that it's actually Working so we are at 350 pixels I don't Think that there are still mobiles with That wet And that's it let's go and see all Matches It's always so working just great Let's just make this a little bit bigger So you can see we have four matches in a Day And To be determined are in place which is Great I still have this issue here
With this they are not aligned So let's go and fix that So I'm just gonna go I guess into In here For This is actually a team let's just go And Use the inspector So Info here Display Flex Let's say justify content start It didn't do anything Okay because I'm using here space around I need to use space between That fixes the issue So but we still have some problems here We have some margins we need to add some Patterns so I need to go to Team here I Need to use space between All right now I just need to add some Padding for left and right let's say 0.5 Grams I think 3.5 75 let's just check that I think that's great now And I think that's it for our tutorial And that's it that's all we need to do For this website so I hope you learned Something new in this tutorial I hope You enjoyed it although it's a long Tutorial well take care don't forget to Like comment and share and subscribe Take care
