Introduction: Putting a Copy to Clipboard Button on a Webpage

Picture of 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.

Step 1: Create a Pen

Picture of 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

Picture of Add References

Since we are going to be using Jquery and this (really) cool thing-a-boo 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 Javascript:

<script src="https://cortanabatch.zohosites.com/files/cdn/lib/jQuery/jQuery.min.js" async></script>

And in the CSS slide, add:

<link rel="stylesheet" href="https://cortanabatch.zohosites.com/files/cdn/lib/Balloon.css/Balloon.css" />

Step 3: Code

Picture of 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

Picture of 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

Picture of Demo

Comments

About This Instructable

655views

9favorites

License:

Bio: I like to rhyme all the time.
More by EliyahuGeorgios:Cool, Decorative Lamp - From Recycled Parts!Computer ProgrammingHow to Put a Fancy (and Flexible) Redirect on Your Site
Add instructable to: