hi everybody Welcome To Live blogger in this video I'll show you how to create this chart over here using HTML CSS and JavaScript and we'll also use a library called chart.js to design this chart right here so let's get started [Applause] [Music] all right so here I have created this folder called chart and I just opened it with vs code now let's create the necessary files so let's click on new file and let's create an HTML file I'll just name it index.html and now let's create a CSS file I'll just name it style.css and we'll also create a Javascript file I'll just name it main.js let's start with the index.html file so in vs code you can just press exclamation and press Tab and you'll have this basic HTML5 code well let's link our CSS file over here so I'll just type link and press Tab and here this tab style.css and let's link our Javascript file over here so I'll just type script and in the srcls type main.js right now let's start with the markup of our design so the first thing we will do is we will create the heading so here we can see we have this heading before this chart container so let's create an H2 and we will give it a class of chart heading and here I'll just type popular programming languages or the next thing we will do is we'll create a container division for all of this so let's create a division of the class of programming stats and in that for the chart we'll create a division so let's create a division with the class of chart container and in that we will have the chart so I just type chart over here and the next thing we need to have is the details over here so we have the programming language and the percentage over here and here in the chart we have it in donut format but here we have it in percentage so let's go back and let's create a division with a class of details and then that will create an unordered list and in that we will have list items for each of these lines of text now we will add the list items using JavaScript so we will get the data from JavaScript and we'll create these list items in the Javascript file but for now just for styling let's add a couple of lines over here so I'll just type Python and then we need to have a colon and then we need to have this percentage so for the percentage we'll create a span with a class of percentage and in that we'll type the percentage so it's up 30 percent and I'll just duplicate this down here right now the next thing we will do is we'll create the chart but before that let's open this in our browser so I have this extension called live server installed in vs code so once you install that you can just right click over here in the HTML and click on open with live server and here we can see that our design is displayed in the browser now the next thing we will do is we will get the CDN of chart.js Library so let's search for charges so you can just Google for charges and just click on get started link or you can just open the main URL and you can just click on get started and then you can click on this link right here and if you scroll down here we have this getting started guide and here we can see we have the CDN so let's copy this script from here and let's go back and I'll just paste it over here so just before the script of main.js I'll just paste it over here now for the chart we need to create a canvas so here inside the chart container division let's create a canvas and the canvas we will have the chart so I'll just give it a class and let's give it a class of my chart you can name this class anything you want right now let's go ahead and let's create the chart so let's go to the main.js file and the first thing we need to do is we need to reference this canvas so we have a class of my chart so here I'll just type const my chart equals document dot query selector and here I'll just type dot my chart and now here you have to type new chart here we need to have two arguments the first one is the my chart so let's start my chart over here and the next one is the options so for that we will have an object and in this we will set up the chart so the first thing we need to do is set the type of the chart so let's type type and let's set the type to Donut and the next thing we need to specify is the data so what we will do is we'll create the data constant in the JavaScript so let's create a constant and I'll just name it chart data and we'll just set it to an object now in this chart data we need to have the labels and the data so here we can see these are the labels and on the right side we have the data so let's type labels and we'll create an array and here we'll just type these programming languages so let's type python and then we have Java then we have JavaScript and then we have C sharp and then lastly we have others so this is the labels and then we need to have the data so let's have data and let's create an array for that as well so for the data we have 30 17 10 7 and 36. so let's type the values over here 30 17 10 7 and 36. now we can use this data in our options in the chart so let's type data and here let's type labels and for the labels we need to access these labels so let's have chart data dot labels and the next thing you need to have is the data sets so let's type data sets and we'll just set it to an array and in that we need to have an object and we need to type label and here we can type the label that displays over here when we hover over this so here we can see it says language popularity so let's type that over here language popularity and then we have the data so let's type data let's set it equal to this data inside chart data so let's start chart data data and now if we go back to our website here we can see that our chart is being displayed but right now it has a huge size so let's style it using CSS so let's go back to our CSS file and first of all let's style this heading so I'll just type chart heading which is the class that we have given for this H2 and here I'll just type font family and let's set the font family to Rubik sensitive and we also need to get the link of this font so let's go to Google fonts so here I'm in phones.google.com and let's search for Rubik and let's select this font let's scroll down and let's select the regular version and also a bold version so I'll just select 700 and let's click on this icon and let's copy this link from here and let's go back to our HTML file and I'll just paste it over here in the head section right now let's go back to our CSS and let's continue styling this let's set the color of the text to zero two three zero four seven and let's say the text transform to uppercase and we'll set the font size to 24 pixels and text align to the center so this is how the heading looks right now now let's style this chart so for the chart we have this division with the class of chart container so let's type chart container and we'll use that the width of the chart container to 200 pixels and now we can see we have the correct width and we'll also hide these details from here so for that let's go back to the main.js file and here in the options we need to add some more code so here after the data let's create options and let's create an object and here we need to type plugins and then you will need to type Legend and then inside that we need to type display and set it to false and now if we go back we can see that the details are not displayed over here we just have the chart now we can also set the Border width and Border radius of this chart so let's go back and let's do that here I'll just type border with and let's set it to 10. now we can see we have a border width of 10. and let's also add border radius so let's set the Border radius to and now if we go back we can see that we have a little bit of Border radius and now when we hover over this we can see that we have some border so let's remove that I'll just type hover border width and let's set it to zero now if you hover this we don't have the extra width so everything is working all right now let's style this right here so let's go back and let's go to the style.css file and let's style the container division which is this division with the class of programming stats so let's start programming stats and the first thing we will do is we'll set the font family to Rubik sensitive and we need to have these two elements one next to the other so let's type display of flex and we need to bring this to the center vertically so let's type align items to the center and we'll also have a gap of 24 pixels between these elements right now let's bring this to the center so let's start margin 0 for top and bottom and Auto for left and right and right now it is not being centered so that's because we have full width for this division right now so if I just add a background color we can see that it has this full width so what we can do is we can set the width to fit content so let's type with fit content and now we can see it has the correct width right now let's add a box Shadow so here we can see we have this box Shadow around this element so let's type box Shadow and let's set the values to 0 4 pixels 12 pixels negative 2 pixels rgba 0 0 and 0.3 and let's also add a border radius for rounded corners and let's type border radius and let's set it to 20 pixels and we'll also add some padding so let's start padding and let's set the padding to 8 pixels top and bottom and 32 pixels left and right right now let's set the color of this text so let's type color and let's set the color to zero two three zero four seven right now when we hover over this we need to increase the scale of this container division so let's type programming stats column hover and here this type transform so scale and let's set it to 1.02 and we'll also add a transition for smooth animation and let's set it to all 400 milliseconds is and we'll also change the Box Shadow when we hover this so let's copy this line of code from here let's paste it down here and let's change some values over here I just change this to 16 and I'll just change this value to let's try 7 and now we can see we have this hover effect right now let's style these list items it is inside this division of the class of details in that we have this UL so let's type programming stats details ul and first of all let's remove these bullets so let's tab list style and set it to none and we'll also remove the padding so let's type padding and set it to zero right now let's style the list items inside the UL so let's type programming stats details Uli and first of all let's set the font size to 16 pixels and we'll set the margin to 12 pixels top and bottom and 0 for left and right and we'll also set the text transform to uppercase and let's style this percentage so for the percentage we have this span with a class of percentage so let's type programming stats details percentage and for the percentage let's set the font weight to 800 and let's go back to the HTML and here we have selected a weight of 700 so let's do that let's type 700 over here and let's set the color of the text to e63946 The Styling looks alright now let's change the data so let's go back to our HTML file and I'll just delete all these list items from here and we will add the list items using JavaScript so we need to have the label inside the list item then we need to have a span with a class of percentage and then we need to have the data so let's delete all of this from here and let's reference this UL inside the details so here let's type const UL equals document dot query selector let's start programming stats details UL now what we're going to do is we're going to create a function so let's type const and let's call it populate UL and now what we need to do is we need to Loop through each of these labels so the labels are inside the chart data object so let's type chart data dot labels dot for each to Loop through each of the labels and let's call the single labels l and let's create an error function now here the first thing we need to do is we need to create a list item so let's type let Li we'll just call it Li equals document dot create element let's create an ally element over here and the Ally element we need to add some text so let's tap Li dot inner HTML equals and we'll also add variables inside this so we'll just use backticks and here I'll just type dollar symbol curly braces let's tap l so this will be the label and then we need to have a colon and then we need to have a span so let's create a span and for the span we need to have a class of percentage and then we need to close the span over here now in the span we need to have the data now we need to have the data of the same label so when we use four each we also get the index so for that we need to create one more variable over here I'll just call it I now this I variable will contain the index of the list item so here let's type dollar symbol curly braces chart data dot data so here we can see we have this data and here we need to type square brackets and I so it will select the correct data and then we need to add the percentage symbol right now the next thing we need to do is we need to append this list item to the UL so we have created this constant named UL so let's type UL dot append child Li right now the last thing we need to do is we need to call this function so let's type populate ul and now if we go back to our design here we can see all the data is populated over here so everything looks all right so that's basically how you can create this design with a chart using HTML CSS and JavaScript right that's it for this video I will leave the link of the source code in the description and if you have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day [Music]