Introduction: Putting a Copy to Clipboard Button on a Webpage
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
- Launch File Explorer.
- Go to My Documents.
- Create a txt file.
- Rename that file to "MyHTMLDoc.html".
- Hit OK to the warning dialog.
- Close File Explorer.
- Open Visual Studio, which takes five minutes.
- Open the file in Visual Studio, which takes another five minutes. VS is very slow.
- Start <coding/>.
- When I am done, I must open the file in Edge to view my work.
Now, all you need to do is
- Launch Edge.
- Go to https://www.codepen.io.
- In the upper-right corner, hit new Pen.
- 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 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.
- Click Settings.
bla bla bla: BLAAAAAAA!!!!
<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
Below that, add this code.
Copy/paste the code to your pen.
Step 4: Changing That Code to Suit Your Needs
Step 5: Demo
We have a be nice policy.
Please be positive and constructive.