💡 Easy Copy to Clipboard Button in Vanilla JavaScript
Tags: javascript, webdev, html, css
Published: 2020-11-13 03:43:39

## 👋 Welcome back developers. 
## So, in this article we will see how we can create a simple *Copy to Clipboard* functionality in JavaScript.

> Note: This will only work if you want to copy text inside of an `input` or `textarea`. It can't be done with any other element.

This is how it's gonna work 👇

{% codepen https://codepen.io/Max_Programming/pen/rNLoPRL %}

It is just a few lines of code and we will be done with it! Let's start with the HTML!

## 🎨 HTML

The markup for this is very simple. We'll have an `input` and a `button` with some `id` and that's it. We'll also use an icon font called ** [Phosphor icons](https://phosphoricons.com/)**. So just include use the HTML as shown below

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Copy to clipboard</title>
</head>
<body>
  <input type="text" id="copyText" value="cooopy">
  <button id="copyBtn"><i class="ph-copy"></i> Copy</button>
  <script src="https://unpkg.com/phosphor-icons"></script>
</body>
</html>
```
This will be the result 👇

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605236227955/WCQlX5Jtr.png)

## 💄 CSS

Now we will do the CSS. It will not be too much, but I will be explaining what we do for each element.

First off, we'll use the **Universal Selector (*)**. And put some resets in it. We are putting the font size as `1.5rem` as there is no other element except for the `input` and the `button`.
```css
* {
	margin: 0;
	padding: 0;
	font-size: 1.5rem;
	box-sizing: border-box;
}
```
Next up, we'll center everything on our page using Flexbox on our body and height as `100vh`.
```css
body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
```

Result after centering everything 👇
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605236683804/JkoV2Ejb-.png)

Now, we will style our `button` and `input`, first off, I wrote the common styles by selecting both of them together. These properties are pretty self-explanatory.

```css
button, input {
	padding: 20px;
	border-radius: 20px;
	outline: none;
}
```
Then we give the `input` some color on the border and a nice and simple effect on `focus`. We set the cursor as `default` so that some people might not get caught that this is an input.

```css
input {
	cursor: default;
	border: 5px solid #2196F3;	
	transition: all 0.3s ease-in-out;
}

input:focus {
	border-color: #0078D7;	
}
```

And finally, we style our `button` as shown below. We give it a nice background color and a hover effect changing the background.

```css
button {
	cursor: pointer;
	color: #fff;
	background: #0078D7;
	border: none;
	margin-left: 10px;
	transition: all 0.3s ease-in-out;
}
button:hover {
	background: #2196F3;
}
```

End result:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1605236952166/6xu7E5fLK.png)

Now let's jump to the **most easiest**, JS part!

## 💡 JavaScript

The JavaScript will be pretty straightforward. When the button is clicked, we will trigger a function where we will first **select the input** and then we will **execute the copy command**. Let's see how.

First, we select both of the button and input by their IDs

```js
const copyBtn = document.getElementById('copyBtn')
const copyText = document.getElementById('copyText')
```

And then we check if the button is clicked using `onclick` in JS. You can also use `addEventListener` or `onclick` in HTML if you wish. But I think this is the easy way.

When the button is clicked, we **select the text** and then **copy it**.

```js
copyBtn.onclick = () => {
	copyText.select();    // Selects the text inside the input
	document.execCommand('copy');    // Simply copies the selected text to clipboard 
}
```
So with the `select()` method, we basically select the text that is inside the `input` or `textarea`. And with `execCommand`, we execute the `copy` command, which in the end copies whatever text we have selected.

🎉 And we are done with it.
![DONE](https://i.giphy.com/media/26u4lOMA8JKSnL9Uk/giphy.gif)

> Warning: the `execCommand()` method still works but it is non standard and I will write an updated blog post covering the  [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) .

Let me know in the comments how was your experience throughout this blog post and share your projects where you used this super easy method of copying something in JavaScript.

💙 Give it a like if you liked reading it. Thanks for reading!!!