Putting a Copy to Clipboard Button on a Webpage

Published

Introduction: Putting a Copy to Clipboard Button on a Webpage

About: I like to rhyme all the time.

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.

Step 1: Create a Pen

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".

Step 2: Add References

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.

Step 3: Code

Below that, add this code.

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

Copy/paste the code to your pen.

Step 4: Changing That Code to Suit Your Needs

You can fiddle around as much as you like with the pen to suit your needs, then copy-paste the code to wherever you want.

Step 5: Demo

Share

    Recommendations

    • Oil Contest

      Oil Contest
    • Creative Misuse Contest

      Creative Misuse Contest
    • Clocks Contest

      Clocks Contest

    Discussions