Border radius generator and here we can add any value over here and now if you click on this button called copy code then we can see that the code is copied to the clipboard.
And now we can go ahead and paste it anywhere we want so if i just go over here and if i just press ctrl v we can see that the css code for border radius was.
Copied to the clipboard and here we are able to paste it so in this video we will add the functionality of copying to the clipboard to our blogger website so let's get started.
all right let's go to our blogger website and let's create a new page so let's go to pages and let's click on new page.
Here i'll just type border radius generator and here you have to make sure that you are in the html view so if you are in the compose you just click on this.
Description and i also have videos on how to create all of this from scratch so if you want to learn how to design this from scratch you can go ahead and watch those videos i will leave the link.
In the description as well now before copying this code let me show you some of the important lines of code over here here we can see we have all these text so if you go over here to our design.
These are all the text you can go ahead and change these to whatever you want and here we have the copy code button and this is the toast notification so if i click on this copy call button.
We have a touch notification displayed over here you can go ahead and change the text of the notification over here and then here we have the style.css file and these are all the styles to our.
Design you can go ahead and change the colors the height and the width and all of those things over here and then we have the javascript over here now here in these lines of code we are just.
Referencing the elements from the html Wesdigital
Over here into javascript and then this is the function that i wrote to update the border radius and then here we are adding some event.Listeners so here we can see we are checking for the input event so this event gets fired when we change the values of the input field and then we are just calling this update.
Border radius function that we just created over here and then here we have the function to copy the text to the clipboard so here we have the code navigator.clipboard.writetext.
And whatever text you have over here will be copied to the clipboard so here we can see we have created this variable to hold the text to be copied so you can go ahead and change this to whatever you.
Want you can change this to the text that you want to be copied and then these lines of code are for showing the toast notification and then lastly we are adding this event listener to this.
Copy button so when we click on this copy button we want the copy text function to be called so that's how the code is structured so let's go ahead and copy this to our.
Blogger website so let's go to our html file and let's copy all of this inside the body and let's go back and let's paste it inside the page.
And now let's copy the javascript so i'll just create a script tag and i'll just close it over here and in here we'll copy the javascript code so let's go back and let's go to.
The main.js file and i'll just copy everything from here and let's paste it inside the script tag all right now the last thing we need to do is add the css.
So here i'll just create a style tag
And let's go back to our source code and let's copy all of this code from here i'll just copy everything from this line of code because we don't want to add.These styles to the body so i'll just copy everything from this line of code to the end of the css and let's paste it over here right now let's click on publish.
And confirm and now let's see whether it works so let's click on this view button and here we can see we have the border radius generator so let's add some.
Number over here so i'll just type 16 and now let's click on copy and here we can see that the torch notification is displayed over here and let's paste it somewhere and let's see.
Whether it is being copied so i'll just paste it over here and we can see border radius 16 is being displayed over here so this code was copied to the clipboard so that's.
Basically how you add click to copy functionality to your blogger website so that's it for this video i will leave the link of the source code in the description of this video 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.