If you scroll down here we have the animation working and uh it is also responsive so if you decrease the width of the browser window and if I reload this page and if you scroll down here we.
Have the animation for all these numbers so we're going to see how to design this in this video let's get .
Started all right here I have created this folder called counter animation and I just opened it with vs code now let's create the necessary files so let's create a new file and let's call it.
Index.html and let's create another file called style.css and let's create another file called main.js and let's start with the.
File and let's start with the markup of our design so the first thing we will do is we'll create this this first section so for that I'll just create a section tag and here I'll just Ty high and uh.
We'll create one more section and here we can see we have this section and then we have this stats displayed over here and then we have another section and here between these.
Sections let's create a division with a class of stats container and in that for each of these statistics we need to create different divisions so let's create a division.
With the class of stat and in this we need to have two divisions one for the number and the other for this text so let's create a division and let's give it a class of autometer and here let's.
Add zero because the numbers start from zero and uh then let's create another division with a class of type and it is a type of subscribers so let's type subscribers over.
Posts Related:
- #Excel Dynamic Tables Fleet Management Transportation & Logistics #Dashboard Tutorial 2
- #Excel Dynamic Tables Fleet Management Transportation & Logistics #Dashboard Tutorial 2 Office
- VBA to Retrieve Data from Google Sheets Office
Here and here let's also add one more - ID Card Make
Class so that it differentiates itself from the other numbers so here let's give a class of subscribers.Autometer and let's go ahead and copy this stat Division and let's paste it two more times and the second one is uh videos so here let's change this to videos.
Autometer and here let's tap videos and then the last one is projects so here let's tap type projects and here let's give it a class of projects autometer right now let's go.
Ahead and add the CSS so let's go to the style CSS file and uh first of all let's open this in our browser so I have this extension called live server installed in vs code so once you have this.
Installed you can just right click over here in the HTML file and click on open with live server and here we can see everything is being displayed in the browser now it's.
Go ahead and start styling this so first of all let's target the body and let's remove the default margins and let's set the font family to Roboto and.
Sorif and then let's select the section and for the section let's give it a height of 100 vport height and let's set the background color to f f a e0 and uh this is the section let's let's bring.
This text to the center so let's T display of grid and place items to the center and let's go ahead and set the font size to 90 pixels and uh this is how it looks so we have both.
The sections designed now let's focus on this section right here called stats container so we have this division with the class of stats container so let's start styling this so I'll just tap.
Stats container
Now we want all these tats to be one next to the other so let's set the display to grid and let's Ty grid template columns and let's set it to 1fr.1fr 1fr so now we will have three columns so here we can see we have three columns over here and let's go ahead and add some margin so list up Margin and let's set the margin to 30 pixels top.
And bottom and Auto for left and right so that it is in the center horizontally and let's also set a Max width and let's set it to 1,000 pixels let's also add some padding so let's that padding of.
Left and right so we can just padding in line and let's set it to 16 pixels now this padding will be essential for smaller screens so if we decrease the width of the browser window now we can.
See that we have this padding over here right now let's go ahead and style the stat division so here we can see inside the stats container we have stat so let's tap stats container stat and.
Let's set the background color to e f23 3C and let's add a padding of 24 pixels and let's set the text align to Center and let's also add some gap between these elements so here for the.
Stats container let's add a gap of 24 pixels right now let's go ahead and set the color of the text and let's set the color to edf2 F4 and now let's style this.
Autometer so let's St stats container stat autometer so here we can see we have added this class of autometer for all these numbers so let's set the font size.
Of the autometer to 50 pixels and let's set the font weight to bold and uh this is how it looks and for this uh type let's add some Styles so let's type stats container stat type and.
Let's set the font size to 20 pixels now if you take a look at this original design here we can see that for these two numbers we have this plus icon so let's add that as well so for that.
Let's go back to the index.html file and wherever we want the plus icon let's add a class of plus so let's add it over here as well right now let's go to CSS file and here let's type autometer do.
Plus so when we have both these classes added to a division then we need to display the plus icon so we need to add an after element so let's St autometer do plus colum colum after and in this.
After selector we will add a content and let's set the content to plus and this after selector should be relative to this autometer plus so here let's tap position relative and here let's T.
Position absolute and here let's type top to zero and right to min-6 pixels and font size of 20 pixels so here we have this plus icon displayed over here now here we can see.
That the plus icon is being displayed but it is not displayed over here beside this number so let's right click over here and go to inspect and if you take a look at this.
Here we can see that this is a division and because of that the display is set to block so it takes up the whole width so that's why this after selector is on the extreme right side so let's go ahead.
And uh go to the autometer and let's set the display to inline block and now we can see that the plus icon is beside the number right now let's go ahead and add a media query so.
That it is responsive so let's type at media and let's type Max width of 700 pixels so whenever the screen width is less than 700 pixels all these tiles.
Inside this block will be added to our design so let's Tye stats container and let's set the grid template columns to 1fr so that all these elements are displayed one below the other so let's.
Decrease the width of the browser window and now we can see that all these elements are displayed one below the other so it is responsive right now let go ahead and.
Add the number counter an animation so for that we're going to use a library called autometer JS so let's go ahead and get the CDN of the library so you can just Google for autometer JS CDN and.
You'll find this link of CDN js. comom and let's go ahead and copy this tag from here so it is for autometer MJS so let's copy the script tag and let's paste it over.
Here and now let's go ahead and copy the CSS so let's copy the the CSS of the default theme so there are a lot of different themes so we have theme for car we have digital theme we have.
Minimal Plaza and all these things over here let's go ahead and copy the default theme so I'll just go ahead and copy this link tag and let's paste it over here inside the.
Head and the next thing we need to do is we need to create a new autometer instance so let's go to the main.js file and I'll just create a function for that and I'll just call it cre create.
Autometer and we will get the element over here and the value so this value is going to be the number so here let's St const and let's call it.
Autometer equals new autometer and here we can add some options so here let's tap L which is the element and let's set it to this element right here you can name this anything you want and then.
Let's go ahead and set the value to the value that we get from here right now let's go ahead and call this function first of all let's go ahead and uh reference these.
Elements so let's reference the subscribers autometer so I just St const subscribers autometer equals document. query.
