<h1>Click-to-Tweet HTML Generator</h1>
<table>
<tr>
<td><label for="url">URL:</label></td>
<td><input type="text" id="url" placeholder="http://offtherichterdesign.com/"></td>
</tr>
<tr>
<td><label for="link">Link Text:</label></td>
<td><input type="text" id="link" placeholder="The Clickable Text"></td>
</tr>
<tr>
<td><label for="alt">Alt Text:</label></td>
<td><input type="text" id="alt" placeholder="For Link SEO"></td>
</tr>
<tr>
<td><label for="tweet">Tweet:</label></td>
<td><input type="text" id="tweet" placeholder="Tweet...Duh!"></td>
</tr>
<tr>
<td><label for="tweet">Hashtags:</label></td>
<td><input type="text" id="hashtags" placeholder="Enter comma-separated hashtags"></td>
</tr>
</table>
<h2>Generated HTML</h2>
<textarea id="share-links"></textarea>
<button>Copy to Clipboard</button>
body {
width: 95%;
max-width: 810px;
font-family: tahoma, sans-serif;
font-size: 14px;
line-height: 1.4;
padding: 0 0 20px 0;
margin: 0 auto 0 auto;
}
h1 {
font-size: 24px;
text-align: center;
margin: 20px 0 30px 0;
}
h2 {
font-size: 20px;
margin: 20px 0 30px 0;
}
table {
margin: 0 auto 30px auto;
}
label {
font-weight: bold;
}
input {
width: 400px;
padding: 2px;
margin: 0 10px 0 0;
}
td:first-child {
text-align: right;
padding: 0 5px 0 0;
}
textarea {
display: block;
width: 100%;
height: 80px;
font-family: monospace;
white-space: pre;
margin: 0 0 10px 0;
}
$("table").on("input", function() {
var url = encodeURIComponent($("#url").val());
var link = $("#link").val();
var alt = $("#alt").val();
var tweet = encodeURIComponent($("#tweet").val());
var title = encodeURIComponent($("#title").val());
var summary = encodeURIComponent($("#summary").val());
var hashtags = $("#hashtags").val();
hashtags = hashtags.replace(/\s+/g, "");
hashtags = hashtags.replace(/#/g, "");
hashtags = encodeURIComponent(hashtags);
hashtags = hashtags.replace(/%2C/g, ",");
twitter =
'<a alt="' + alt + '" target="_blank" href="https://twitter.com/intent/tweet?url=' + url;
if (tweet !== "") {
twitter += "&text=" + tweet;
}
if (hashtags !== "") {
twitter += "&hashtags=" + hashtags;
}
twitter +='">' + link + "</a>";
$("textarea").text(twitter);
});
$("button").on("click", function() {
document.querySelector("#share-links").select();
document.execCommand("copy");
});
This Pen doesn't use any external CSS resources.