So here are some examples here i am in this website called coolers.com and here if you go to the palettes we can see that we have all these color palettes over here.
And if i click on any of these colors so if i click on this color right here we can see that the color is copied so in the same way we can click on any of these colors over here.
And the hex code of that color will be copied so it makes it easier for the user to go ahead and paste it in their code editor now it is also being used in font.
Awesome so here we can see this is the download icon and here we have this option called copy html and if i click on that we can see that it has been copied to.
The clipboard and then we can go ahead and paste it anywhere we want and the same way we also have this functionality in cdnjs.com here we can see we have these links and.
This simple tool over here so we're going to create this border radius generator tool so here we can see this is a simple tool which generates border radius code for a website.
Here we have the option of adding the value so i just type let's say 24 and here we can see the border radius is being shown over here as well and.
We have the live demo of the border radius over here in this rectangle and then we can click on this button called copy code.
And we can see that the code is copied now the code has been generated and it has been copied to the clipboard now we can just go ahead and paste it anywhere we want so i'll just create.
A file over here i'll just name it style.css and i'll just press ctrl v to paste it and here we can see we have the css code for border radius displayed over here and we have the correct border.
Radius 24 pixels Wesdigital
If i just increase this and if i just set it to 30 pixels and if i click on copy and if i paste it over here we can see.We have 30 pixels of border radius now we have set a limit of 100 pixels over here so if i just increase this and if i go to 100 pixels it won't go beyond that.
And we also have set the lower value to zero and it won't go beyond that and we also have these increment and decrement buttons over here now if i type a value of greater than.
100 pixels like for example if i type 150 pixels it will go back to 100 pixels and we also have the animation for error if i don't have any value over here and.
If i click on copy code it will by default take a value of zero so if you go back and if i just paste it over here we can see border radius of zero pixels.
Now this is just a simple tool where we have set the border radius of all the corners at once now you can go ahead and add more input fields over here and set the border radius of each of these.
Corners separately and then just update the code to generate the border radius now in the same way you can go ahead and create a lot of different online tools but the main focus of my video was to.
Show you this click to copy functionality now i will split this video into two different parts in the first video we will just design this using html and css and in the next video.
I will show you how to add javascript and how to generate the code and also how to add the click to copy functionality so let's get started .
Right here i have created this folder
Called click to copy and i just opened it with vs code so let's go ahead and create all the necessary files so let's click on new file and we'll create an.Html file so i'll just name it index.html 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 we also need to have a javascript file i'll just name it main.js all right 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 html5 code so let's link our css file over here so i'll just type link and press tab and in the edit file just type style.css and here in the body.
I'll just link the javascript file so i'll just type script colon src and press tab and here i'll just type main.js right now let's create a division with a.
Class of click to copy to contain everything so i'll just create a division of the class of click to copy and in that first of all we need to have.
This heading so i'll just create an h2 and i'll just type generate border radius and then we need to have this label and this input field so let's create a label.
Over here and in the four i'll just type border radius input and here we need to type enter a number and the next thing we need to have is an input field so let's create an input.
Field and for the type i'll just set it to number and we'll also have an id over here we'll copy the same thing from here so.
I'll just copy this we need to have a t over here as well and i'll just paste it over here now we need to have some more attributes.
Over here we need to have a min value so i'll just type min equals and the minimum value should be 0 and the maximum value should be 100 and the default value will be 0.
All right that's it with the input field now let's add this element over here to show the border radius so i'll just create a division of the class of box.
And then we need to have this button to copy the code so let's create a button and we'll give it a class of copy button and here i'll just type copy code and then lastly we need to have a toast.
Notification so if i click on this button we can see we have this notification so let's create that so i'll just create a division with a class of toast notification.
And in that i'll just type code copied right that's it with the html now let's add the css so let's go to our style.css file and.
Before that let me just open this in the browser so i have this extension called live server installed in vs code so you can just install this and you can just right click over here in the html.
And then click on open with live server right now let's start styling this so first of all i'll just add some styles to the body so i'll just have body and we'll set the margin to zero and we'll.
Also set a background color of f1 f a ee now let's style the click to copy division so i'll just type dot click to copy.
And we'll set the height to 100 viewport height and the width to 100 percent and i will also set the font family to roboto and sans serif.
And i'll just set the display to flex and align items to the center and we also need to set the flex direction to column so that all the elements will be one.
Below the other now let's set the color of all the text to 1d3557 now let's style the h2 so let's type.
Click to copy h2 and let's set the font family to roboto black and we'll set the font size to 40 pixels.
And we will have a margin bottom of 20 pixels and we also have a border bottom so let's type border bottom of one pixel.
Solid rgba 0 0 0 and 0.2 we'll also have a padding bottom so let's start padding bottom and we'll just set it to 16 pixels.
All right that's it with the h2 now let's style the label so let's type click to copy label and we'll set the font size to 18 pixels now let's style the input field so let's.
Type click to copy input and we will set the font size of the input to 48 pixels we'll set the text align to center.
And we'll set the font weight to bold we'll also add a margin top of 16 pixels and let's set a padding of 8 pixels top and bottom and 16 pixels left and right.
And we'll also set the width to 140 pixels we'll set the border radius to 8 pixels and we'll also set the border to 2 pixel.
Solid and we'll set the color to this dark color over here now when we click inside this input field we have a black outline i think you cannot see it clearly so if i just.