Putting a Copy to Clipboard Button on a Webpage


1,309

10

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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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

Be the First to Share

    Recommendations

    • Assistive Tech Contest

      Assistive Tech Contest
    • Reuse Contest

      Reuse Contest
    • Made with Math Contest

      Made with Math Contest

    Discussions