This is a row. right ? You must be familiar with what rows and columns are. If you are familiar with table structure, you have different rows and different columns. So I want to create let’s see I have a 1920*1080p monitor. Let me try to add 5 Five tickers in 1 row. Let me just copy this and paste it 5 times. okay. Let me refresh this. Its not fitting in. I’ll just add 4. sorry, I’ll just have to delete this. refresh. that’s it. These are added. And you can change these indicators. For E.g. all you see is Ethereum, right ? If I want to add something else, I can just select Bitcoin. Okay. And …I’ll select this. I just have to copy the div class. not the script tag. I’ll just replace it with this one Let me refresh the page Now you’ll see Bitcoin on the right hand side. So you can add any indicators sorry, tickers that you want over here. And they will show up on your webpage. One thing to keep in mind is that these are not refreshed automatically. So you have to reload the page every few seconds. In order to have the recent or the most updated values. And … to do that its quite simple. we can do that in just 1 line of code. so lets try to do it. In the script tag. am going to create something called SetInterval and In “Set Interval” we can pass a function that runs every few secs. So am going to pass an anonymous function and inside the function, I’ll say location.reload() and, it takes in another parameter. which is the frequency. and this is specified in milliseconds. I want to refresh the page every , lets say, 15 secs. 15 times. each second is 1000 milli seconds. So I’ll put in 1000
So what this line of code means is that it executes this function every 15 secs, and inside this function we are reloading the page. So, what it means is that every 15 secs the page gets reloaded. I’ll change it to 3 secs to demonstrate how this works. Let me refresh the page. And, You should notice that after 3 secs the page should be reloaded automatically. yeah, it just happened. depending on your requirement, you can put in appropriate refresh timer, and you can add different rows and columns in this way. Let me try to add another row. This is one row. right ? I can add another row by just copying and pasting here. Now you should see 2 rows of data, See, its that simple. Alright, one last thing that I want to explain is that this code would work only when you don’t have Ad Block plus extension installed in your browser. I want to walk you through some steps that you have to do, if you have Ad Block Plus(ABP) installed. Let me turn on ABP and come right back. and show you what happens when you have that extension installed. Alright, ABP in ON. Now when I refresh the page, you would see that these tickers would not appear. So let me refresh. You can see that nothing comes up and if I click F12 which is the debugger console, you can see that these are blocked by the client. So whats happening is that ABP is treating these tickers as spam or add and its trying to block these requests. So we have to find a way to exclude or filter out these urls from ABP. Am going to show you how to do that. So these are the 3 urls that you have to include in your exception filter in ABP. For the tickers to work. Now, you might wonder How did I come up with these urls ? How do I know these are the ones that I have to enable. Its simple. What I do is I refresh the page and whenever I see some url here, I just filter it out. It’s that simple. So let me try to do it manually so that you would understand how I came up with these and if you don’t really care about these, I’ll leave all these 3 urls in the description box. so that you can access them directly. So first when I refresh the page, I see this url. I’ll just copy this. let me try to zoom in so that you can see the url clearly. you can see the url now. I’ll just copy the url. and Go to ABP left click on it and then go to “Settings” then go to “Advanced” and on the bottom you see “My Filter List”. click on “Start Creating my Fillter List”. Here the way to specify is @@ … It’s just the convention. I just read some documentation. You have to two @s before starting the url. That is my first filter. Am going to save it. Let me refresh the page. Click on “Refresh”. We got some new urls. We have to exclude these. Let me copy this first one, you can see that, All these 4 urls are the same, but you see you see 4 errors because we have added 4 tickers on the page. So am just going to. this one and edit the filter @@ and paste the url. Now you can see that it looks like a REST api call. right ? you can see the reference=”WIDGET’ and convert=”USD”. and the ticker is 1027 something, so There are thousands of coins on coinmarketcap. You should not. paste this entire url. Instead, you have to filter from here. The reason I truncated the url is because the url contains several filters. So if we include the full url and try to add another widget That would fail because the url would be different for that that ticker. So when we truncate it to here. it includes all the urls all the filters or all the parameters that fall under widgets.coinmarketcap.com. I hope it is clear. Let me save it. Let me refresh the page. Okay, now we can see the tickers , but the image is not showing up. right ? That’s because there is another url that we have to enable. Let me zoom out a little bit. Let me copy this. and go to the filters. Edit filter=>@@ + paste same thing here. We have to remove a portion of the url I’ll do it up to here. click on Save. Refresh the page. Awesome, we don’t see any errors now. Close the console. It works! Even if you have ABP installed, all you have to do is just paste these three urls in your filter list. and this should work automatically. and inorder to have the latest data, you have to reload the page every few seconds. That’s it for this video. I hope you found this informative. If you have any requests or any questions, leave them in the comment section. If you want to send any video requests you can send them to me at y email address that is about to pop up on the screen. Alright, have a good one! Talk to you in the next video. Bye for now!