Putting a Copy to Clipboard Button on a Webpage

This may sound simple, and I might look sillytfor putting it on Instructables, but in reality, it's not that easy. There is CSS, Jquery, HTML, some fancy javascript, and, oh well, you know.

There is this cool site called Codepen. In the past, just to code in HTML, I used to have to

1. Launch File Explorer.
2. Go to My Documents.
3. Create a txt file.
4. Rename that file to "MyHTMLDoc.html".
5. Hit OK to the warning dialog.
6. Close File Explorer.
7. Open Visual Studio, which takes five minutes.
8. Open the file in Visual Studio, which takes another five minutes. VS is very slow.
9. Start <coding/>.
10. When I am done, I must open the file in Edge to view my work.

Now, all you need to do is

1. Launch Edge.
2. Go to https://www.codepen.io.
3. In the upper-right corner, hit new Pen.
4. Start Coding.

See how much easier it is? Just enter your JS, CSS, and HTML in their respective boxes. The results show up automatically on the right.

In fact, Codepen is soooo much better, that I recommend you to go create your account right now. Yeah, I hate to be the one advertising, but I can't help it. It is much better. There's nothing I can do about it.

Or, if you don't want to create an account, you can go create a pen without an account. You can save your pen under the username "Captain Anonymous".

Since we are going to be using Jquery and this (really) cool thingajammy called "Balloon.css", we must add references first. If you are new, I will tell you how to do this in Codepen.

1. Click Settings.
2. Depending on whether the reference is a style-sheet or a script, click either CSS or Javascript.
3. Under Add External (Javascript or CSS) add the references.

Add:

bla bla bla: BLAAAAAAA!!!!

Now remove that and put in the HTML <script> tag linking to your favorite CDN for Jquery and Balloon.css.

Below that, add this code.

https://codepen.io/slate-coding/pen/oepQpX

Copy/paste the code to your pen.

https://codepen.io/alexvgs/pen/oepQpX