We also have this chart over here and if i hover over this we can see the labels are displayed over here and also the value and we have all the labels over here as well and then over.
Here we have this text and then we have this close button over here and we also have a hover effect and if i click on this close button we can see that the pop-up disappears.
And then we have this button called display the stats and if i click on that we can see that the pop-up is displayed once again so this is what we're going to design in this video now i'll split.
This video into two parts where in the first part we will write the html and also add this chart and then in the next part we will write the css and make it look like this and we'll also add some.
Javascript to display and hide this popup and one more thing i have to mention is that this is responsive so if i just open this browser in a small window.
Text at the bottom and if we increase the width we can see we have a different layout so let's get started .
Right here i have opened up this folder called popup in vs code and let's start by creating an index.html file and we also need to have a css file so let's create a new file and i'll just.
Name it style.css and let's start with the index.html file now in vs code you have the shortcut where you can just press exclamation and.
Press tab and you will have this basic html5 code and i'll just link the css file over here so i'll just type link and press tab and here in the edit file start.
Style.css all right first of all let's create a division with the class of pop-up container now in this we need to have a heading so let's create an s3.
And let's type popular game engines Wesdigital
And then we need to have this chart and this text over here so for that we'll create a division with the class of pop-up content.And in that we will have the chart so for the chart i'll just create a division of the class of chart container and in here i'll just type chart for now now let's open this in our browser and.
Let's see how it looks so i have this extension called live server installed in vs code and once you do that you can just right click over here in the html and click on open with live server.
And now we can see our design is displayed over here in the browser so here we can see we have the heading and the chart displayed over here and the next thing we need to have is this text.
Over here so i'll just copy this and let's go back and below this chart container division let's create a division with a class of popup details and here we just paste the text.
So here we can see we have all the content displayed over here right now let's create this close button so let's go back let's go outside this pop-up content and here we'll create a.
Division of the class of close button and here we will add the close image now we're gonna get the close icon from this website over here called heroicons.com.
So i'll just search for close and here we can see we have all these icons over here let's select this one and let's click on copy svg and let's paste the svg over here.
And now you can see the close button is also displayed over here but it is too large but we will style it using css later right now the next thing we will do is.
We will add this chart
Now for this chart we are going to use a library called chart.js so you can just google for chart.js and you will find this website called chartjs.org so let's.Go to the website and let's click on get started and here we can see a guide on how to get started with charges so here we can see the first thing we.
Need to do is create this canvas and then we need to add the script and that's all so let's copy this canvas from here.
And let's paste it over here inside the chart so here we have created this division with the class of chart container so in place of this chart i'll just.
Paste the canvas and i'll just remove this height and width now the next thing we need to have is the script so i'll just copy the script.
And i'll just paste it over here inside the html just before the body ends so just paste it over here now the next thing we need to do is get.
The cdn so let's go over here to this link called charges cdn and here you can find the cdn link so let's click on this button to copy this link.
And let's click on copy html and let's paste it over here just before the script tag right now let's go to our website and let's see what we have.
So here we can see we have this chart displayed over here and this is a bar chart we have to change this to a pie chart so let's go back to our html and let's.
Make some changes over here now if you go over here to the script we can see that we have this option called type and it is set to bar so we'll just change this to pi.
And now we can see we have a pie chart now the next thing we need to do is we need to change all this data so let's go back and here we can see the labels over here.
So let's change the labels to the labels that we want over here so we need to have unity game maker gado unreal and libgdx so let's go back and let's add that over.
Here so here i'll just type unity and then we have game maker and then we have gudo and then we have unreal engine.
And then lastly we have libgdx and that's it we don't need to have this data over here now the next thing we need to do is change this data.
So i'll just change the unity data to and then for game maker i'll just change this to 15. you can change these values based on the stats that you have.
Right here i'll just type 13 for gado and then for unreal engine i'll just type 5 and.
I just type 2 for libgdx and then the next thing is the background color so i'll just remove all of this and let's add our own colors over here.
And we don't need to have any border so i'll just remove this border and here inside the background color let's add the colors that we need so the first color that we need is.
F4 0 0 7 6 this is going to be the first color now let's add the second color so i'll just type comma and here i'll just type 3d 3 4 8 b.
This is going to be the second color now let's add the third color the hex value of the third color is 4 4 ffd1 and let's add the fourth color and for this.
Color we have f75 c03 and then for the last color we have fca 311 so these are all the colors that we need.
Now we can see we have this border over here between each of these colors so we don't need to have any border in our original design we can see that we don't have any borders.
So let's remove the border so here i'll just type border width and set it to zero and now we don't have any borders and that looks all right.
Now the next thing we need to do is we need to remove all these lines all these axis over here we also have these numbers written over here so we need to remove that as well.
In our design we can see that we don't have any of those so let's go back and if we scroll down we can see that we have this option called.
Scales and in that we have this code written over here and all this is responsible for these lines so let's remove these options from here.
And now let's go back and now we can see that we don't have any lines any axis and everything looks all right now the last thing we will do is we will add this button.
So let's go back and let's go to the top and here we'll create a button and here for the text i'll just type display the stats.
And we'll also give it a class so that we can style it using css so i'll just type stats btn and here we can see we have this button all right that's it with the html of our.