JavaScript Project: Copy to Clipboard

1. Introduction: Everyone in this class, we're going to build and copy to clipbot project using JavaScript. So you can copy all the text which is written inside this input field just by clicking this icon. So if I click this icon, my text will be copied, which is written inside this input field. I'll write some other texts like something and then I'll click this icon, and then this text will be copied which is written inside this input field. Now if I want to paste, I'll paste it here, so it will be pasted because it was copied to my clipboard when I click this button. So let's learn how to build this kind of project using JavaScript from the next video. 2. Setup: In this video, we're going to do the setup for our project. For the icon, means we're going to use one copy to clipboard icon in our project. For icon means to get the icon, we're going to use this website. This fontawesome.com website. You can visit this website and click this start button and after clicking this start button, you will see this page. And here you can provide your email address and click this Sand kit embed code and you'll get a CDN link in your email address to connect Font Awesome with your website. But if you don't want to provide your email address, which I don't want to provide, it's very difficult. It's not difficult. It's very long process. So if you don't want to share your email address and all, you can just search CDN Js and open this website. In this search fill, you can search font awesome means you can search the website name. You site name is font dosome type font awesome here and click this font Awesome. From here, you have to click this Copy Link tech. Click this and your Link tag will be copied with your CDN link and just open your codator and inside your codator, you can paste it. But now we won paste. We will write our Htmal code and inside that HTMal code, we will paste that link. So as you can see, I've created a folder, the folder name is Copy to Clipboard. Inside this folder, I've created three files, JavaScript file, HTML file, and CSS file. You also have to create this JavaScript file, file and CSS file. The name of the files can be anything, but the extension should be jthtml CSS. Then open your HTML file and inside this HTML file, you have to create one HTML boilerplate. To create HTMil boilerplate you can just click exxclamation Mark and Enter your boilerplate will be created. Inside this not inside and below this meta tech, you can paste your link, which you have copied. After pasting it, I'll click A G to wrap it. After clicking Control V, you will get this link. And from where we have got this link, we got this link from here. Just click this copy link tech and you will get this Link tech and inside the Link tech, the CDN link also will be there like this. Now we'll link our CSS and JavaScript file to link CSS, just go below this title deck and create one Link tech and click this link column CSS and inside the HRF, you have to write the CSS filename. Our CSS file name is Styloid CSS and inside the HRF, it's written styloid CSS. I'll fix this. Inside this HRF, it's written style CSS. Now I will connect this HTML file with our JavaScript file to connect our HTML file with JavaScript file. I have to create a script tag inside this body tech, just write script and call on SRC. Inside this SRC, you have to write the JavaScript file, our JavaScript file is Abt Js. I've written here at Js. Now our CSS and our JavaScript is linked with our HTML, and we have successfully generated a CDN link for fondosm and now we can use the icons from fondos. This is it for setup video. Now let's write HTML code in the next video. 3. HTML: Everyone in this video, we are going to write our HTML code for our project. What we will write inside our HTML code for that we have to check our final project. This is our final project which we are going to build and inside our HTML, first we have to create this blue color background. This blue color background is container. I'll create Diff tech for this container and inside this container, there will be a input field. As you can see, we have written some text here, this text is written inside the input field and to create input field, we have to use input tech. We'll create input tech inside this dif container and then we'll create a button Teck and inside that button tech instead of text, we are going to use this icon. Let's build this means let's build the structure of our project in our HTML, so I'll open my codator and inside this codator. As you can see, I've already opened my HTML file and inside this HTML file, I'll go inside this body tech and inside this body tech, first thing, what I'll do is I'll create at to create a continual dif, I can just write dif and I can use met to use. As I want to create a dif with the class name of container, by using met, I can write deft container, TIN, TIN here. If I click Enter, I'll get a Diff tag with a class of container. Inside this diff tech, I'll create one. What I'll create I have to check. I'll create one input field, to create input field, I have to write input tag. Inside this input tag, the type will be text. As you can see, there is a Bdfault value. The Bdfault value is this text will be copied. What is the meaning of Bdefault value? Even though I reload this page, so I'll remove some text and even though I'll reload this page, I'll get that Bdfault text again. That means to create this Bdfault text, you have to write this text inside the value of the input text. You have to create attribute, dt tribute name will be value and inside this value, you will write this text will be copied. Now you will get this text will be copied thing by default. Now below this input text, I'll create one button tech, just write button. Inside this button tech, I'll create one icon. As we are using font dosomT create icon, you have to type Tech. In the class theme of this icon, you can find the class name of this icon in that font dosme website. But I know the class name of this icon. The class name of this icon is far solid, far copy, and then the size of the icon. I'll just type class and the class will be f dash solid, and then far dy, so far ds copy. Then the size of the icon, the size of the icon will be far two X. Now let's save and save in our browser. I'll click Open with live server. Now as you can see, we are getting our structure means we are getting our input field, and there is a Bdefault text inside this input field, and then we are getting a button with icon of copy to click put. This is it for our HTML video. Now let's write CSS code in our next video. 4. Adding styling: In this video, we are going to write CSS code for our project to add styling in this project and after adding styling means after writing CSS code, our project will look like this. Let's add some styling in this project to add styling, I'll open my codator and inside this codator I've already opened my style CSS file and inside this file, I'll add some CSS. So first thing what I will do is, first thing I will bring this content to center because this content is in center, so I'll bring this content in center and then I'll change the font family. Let's start adding some styling. First of all, I'll bring this in center. To bring this in center, I'll just select my body tech. Inside this body tech, I'll write display flex. Means I'm going to use Flexboox to bring that content in center. So to use Flexbox, you have to write display flex and then you can define the flex direction. So I'll define the flex direction or you don't have to define the flex direction. For now, I won't define. If it's needed, then only I will define flex direction. Now let's add justify content center. So justify content center. What this justify content center will do is it will bring our content horizontally in center and to bring our content vertically in center, you have to use Align item center. This linem center will bring our content vertically in center. As we are bringing our content vertically in center, we have to define a height. So to define height, I'll write height and the height will be 100 Vg. So I guess you already know what is the meaning of 100 Vg, 50 he, but then also I'll show you 100 vg means the full page. Now we are bringing this content in center of 100 g means we want to bring this content in center of this full page. Means this is the center. Now our content is in center. Now I'll change the font family. The font family is, first of all, font family and the font family is aerial. This aerial Helvatka and serif, so now let's let's evolve in our rouser how it's looking, and now it's looking proper means now our content is in center. Now what I will do now I'll add this blue color in our continer diff. So to add blue color in our continuer Diff means in the background, you have to select that continuer dip. The class name of the dif was container, so that's why I've selected the class. So containers, U and TEI and your container inside the curly brackets, I'll add the background color. So background color. And the background colors hex codes, uh, 4075 EF, 4075 EF. So now let's add some padding in our background color. Why we are adding padding, we're adding padding because we want to make this background color a little bit big from the inside. To make our background color big, we are adding padding and the padding will be 40 pixel. Let's save and let's have a look in our browser how it's looking. As you can see, this is not the project which you are working. We're working on this project. Now as you can see, we are getting this blue background, but the borders are not rounded. To make the borders rounded, you can use the propertyym border radius, il type des radius. And the border radius will be eight pixel. Now let's let's have a look in our browser. Now it's looking proper. Now it's just looking like this, I guess, looking like this itself. Now we have to make this input field a little bit big like this input field is big. Means we have adds some padding in this input field. Let's do this. Now I'll style add the styling inside the input field. I'll select the input and I'll select specifically this type text because I want to add styling in this text area of the input field. So I'll copy this type text, and I have to create square brackets and inside square brackets, I can write type text. And now let's add padding to this. Why we're adding padding. We're adding padding because we want to make it big. So padding and padding will be 20 pixel. So let's say and let's have a look in our browser how it's looking. It's working or not. So yeah, now, as you can see, this is looking almost similar. Now I have to increase the font family of this text, not font family font size of this text to increase font size, I can type font size font size and the font size of this text will be 16 pixel. Now I'll add margin right. Why I add ISU. Let's save a look in our rowser. We're adding margin right because there is no space between this button and this input field. To create some space between this button and input field, we are adding some margin in the right. Now I'll type margin right. And margin right will be ten pixel and we have to remove the border from this input. To remove the borders, you can just type border nun. Then there won't be any border, type border and then none. Now let's save a look in our router how it's looking. Now as you can see, it's looking almost same, but we have to style this button. To style this button, I'll select this button tech button. Inside this button tech, I want to increase the size of this icon to increase the size of this icon, I'll add padding and the padding will be ten pixel. And the background color of the button will be transparent because there is some background color as you can see. This background color is there. So to remove this background color of the button, you can type background color transparent background color, and the background color will be transparent. So now let's have a look in our browser. Now as you can see, the background color has been removed, but there is some border. So now to remove border, you can type border, none so border, and then none. Now let's say let's have a look in our browser. Now as you can see, our input field is looking uh, little bit similar like this. But now what we have to do is we have to increase the size of the I guess, and we have to make this icons color white, and we have to align this icon in the center. Let's do this. First, I'll add the color to that icon to add the color, I'll just type color and the color will be white. And to align that icon in the center, I can type vertical align middle. There is a property with the name of vertical align, which will align our element vertically and vertically where we want to align, we want to align in middle so you can type middle. Now if we check, now you can see that it's aligned in the center means the icon is aligned in the center of this container. Now we have to increase the font size of this icon to increase the font size, you can type font size. And the font size will be 16 pixel. Now if you have a look in our rouser, now you can see that it's looking a little bit bigger, just seem like this. Now you can see that there is a scroll bar in this page, but there is no scroll bar in this page. Why there is scroll bar, there is scroll bar in our currently working project because we have not added margin zero in our body. If you add margin zero in your body, then scroll bar will be removed. Margin zero. Now let's save and have a look in our browser. Now as you can see, our scroll bar has been removed from this project. Why we added margin zero in this project, we added margin zero because by default CSS gives some margin to this page and because of that margin, we were getting that scroll bar. Now when we remove that margin, by default margin, there is no scroll bar. Now we have to add some Hefe I guess. There is some hover effect in this icon. And there is no how effect To add Her effect, I have to select this button. And inside this button, I am adding Ho effect so that's why I'm selecting button. And then to add H effect, just type colon and then hover. So what do you want to do when we will hover over that button, we want to change the background color. So just copy this background color and make it a little bit lighter. Control C and Control V. I'll type the hex code of this color itself. The hex code of this color will be three double 59, three, five, double nine. Now let's have a look in our rowser. Now if I hover over this icon, there is a hover effect and let's in our final project, if I hover, there is a border radius means the borders are round. So to make these borders rounded, you can just add border radius inside this button. So just add border radius. And the border radius will be of four pixel. So now let's save and let's have a look in our browser. Now if I over over this, background has some rounded corners, just like our final project. Okay, so this was our final project, and this is our current project which we are working on. So now let's check. So this also have border radius in this background color, and this also has border radius in this background color. This is it for this video. Now let's add JavaScript in this 5. Javascript : So now we are going to write JavaScript code for this project. So why we're writing JavaScript code? We're writing JavaScript code because if I click this button, nothing will happen. Means this text which is written inside this input field won't be copied. To add this functionality, what functionality? When I click this button, I want to copy the text which is written inside the input field. To add this functionality, I'm going to write JavaScript code. So now let's learn how to add this kind of functionality using JavaScript. I'll open my codator and I'll open my JavaScript file. Inside this JavaScript file, I'll create one function. Function and the name of this function will be copy text. And now what we want to copy, we want to copy the value of the input field means what is the value of the input field? Whatever we'll write inside this input field will be the value. So to copy the text which is written inside the input field, we have to select this input field to select the input field, I will create one variable and the variable name will be input. And to select this I'll use document dot query selector, document dot query selector and the tag onm. What is the tech name? The tegame is input, type input. Now to copy the text which is written inside the input file, we get a method. The method name is navigator dot clipboRttext. Just write navigator dot clipboard. Dot text. This is the method name and now create this brackets and inside this bracket, you have to define what you want to copy. What we want this method to copy, we want this method to copy the input value. What is the text which we will write inside the input field is the value. So we want this method to copy the input value. Type input while we are typing input, we are typing input because because the variable name where we selected input ten is input. If the variable name was something else, we will be writing that something else here. And now what we want to select, we want to select the value of this input field. So just type input dot value. And now this method will select the value of this input field. Now we have to define when we want to call this function. We want to call this function when we will click this button. So let's select this button in this JavaScript. To select I'll create a variable, the variable name will be Btn then to select I'll type document dot query selector, so document dot query selector, and what we want to select, we want to select button tech, so just type the tag name, the tag name is button. And now what we want to do, we want to call this function when we click this button. So to do that, you have to add even listener in this button tech. So just select this variable and then just typebtnt add even listener. And then which event this button will listen to the event which this button will listen to is click event, means we want to call a function when we click this button. So just type click and then the function name which you want to call when this button will be clicked. The function name which we want to call when this button will be clicked is this copy text function. So just copy this and paste it here. Now let's save and let's have a look in our browser, so I'll save this also this and all the files I'll save and now let's have a look in our browser. This is the project means this was the final project, and this is the project which we are working on now. So I'll type some text here. So whatever I can type, and I'll click this button, or I'll click this icon, and I'll remove this and I'll paste it here, just right click and click this paste. Now you can see that it's written copy text. I'll do something again and I'll click this button again. And then I'll remove this and I'll click Control V. This is not working. Why this is not working? Let's check. The error was, we've written this method wrong. What we've written wrong? We should write navigator board dot R text, type text also. This is the method name. Now if we save and open our browser and check, I'll click this and I'll paste it Control V. Now it's working. I'll type something else and click this and I'll remove this and again, paste it. Now it is working. Now I'll type something else again like this I'll type and I'll click this button and now I'll remove this and I'll click right click and then click this Paste button. Now as you can see, this is working and this is it for this video for this class, we've created this copy to text feature, and I hope you like this class.