# Click to Copy!
### Hey Guys 👋
Ever wondered how some websites have "click to copy" functionality?
* You can also do just that, whether you're building an e-commerce website where you want user to click on share button to write the url of the product on their website.
* or you are building some website/documentation where people can click somewhere and copy the code snippet.
In this article I will explain how you can mess around with the user's clipboard 😄.
## Let's get started 🚀
To explain this better, I will create a demo project. You can follow along if you want to.
- Make a folder and name it whatever you like.
- In that folder make two files
- 1. `index.html`
- 2. `app.js`
Add the following HTML code in `index.html`.
```html
Copy to Clipboard 📋
Implementing copy to clipboard with a simple click 📋
```
- Now select `h2` and `button` element in `app.js`:
```js
const h2 = document.querySelector('h2');
const button = document.querySelector('button');
```
Preview the `index.html` in your browser.
> Side note: This demo will not work in IE
It should look something like this 👇
Now to alter the user's clipboard we have to use [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard).
The `clipboard` object is exposed by the `navigator.clipboard` property.
Add the following code in the `app.js` file:
```js
const cb = navigator.clipboard;
```
- `console.log(cb)` will look something like this 👇
👉 Remember: Clipboard API is asnychronous, means every method will return a promise which will resolve or reject.
To consume the `promise` we can either use `async/await` syntax or `.then/.catch`.
### Reading text from clipboard 📋
- To read the text from clipboard I will add a `click` event listener to the `button`:
- In the event listener I will call a method called `readText()`, which is available on the `cb` object we accessed earlier:
```js
button.addEventListener('click', async () => {
const text = await cb.readText();
console.log(text);
// output will be whatever you last copied,
// or empty string if the
// copied data is not of type text.
});
```
- To read the text from clipboard user must grant `read` permission, otherwise the operation will fail. 👇
- If permission is denied 👇
> You check if the user granted the permission or not using the [Permission API](https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API).
### Writing text to clipboard 📋
- To write the text to user's clipboard we use `writeText()` method available on the `cb` object.
- Writing permission is given automatically by the browser.
Write the following the code in the `app.js`:
```js
button.addEventListener('click', async () => {
// const text = await cb.readText();
// console.log(text);
// writing the inner text of the h2 element
// to the user's clipboard.
cb.writeText(h2.innerText).then(() => {
console.log('text written to clipboard')
})
});
```
************************************************
That's it for this article guys.
See, how easy it is you mess with the user's clipboard 😂.
#### Thanks ❤️ for giving it a read, I hope you found it useful.
#### For concise tips and tricks, please follow me on [Twitter](https://www.twitter.com/sidmirza4)
#### Happy Coding 💚