30 lines
1.1 KiB
30 lines
1.1 KiB
const escape = require('escape-html');
|
|
|
|
const badgeLinkUrl = username => `https://tippin.me/@${username}`;
|
|
const badgeImageUrl = username => `https://badgen.net/badge/%E2%9A%A1%EF%B8%8Ftippin.me/@${username}/F0918E`;
|
|
|
|
const badgeHtml = username =>
|
|
`<a href="${badgeLinkUrl(username)}" rel="noopener noreferrer" target="_blank">
|
|
<img src="${badgeImageUrl(username)}" alt="@${username} on tippin.me"/>
|
|
</a>`;
|
|
|
|
const badgeMarkdown = username =>
|
|
`[})](${badgeLinkUrl(username)})`;
|
|
|
|
const usernameInput = document.querySelector('input[name="username"]');
|
|
const badgePreview = document.querySelector('.badge-preview');
|
|
const badgeHtmlSource = document.querySelector('.badge-html');
|
|
const badgeMarkdownSource = document.querySelector('.badge-markdown');
|
|
|
|
const generateBadge = () => {
|
|
const username = escape(usernameInput.value) || 'username';
|
|
const html = badgeHtml(username);
|
|
const markdown = badgeMarkdown(username);
|
|
|
|
badgePreview.innerHTML = html;
|
|
badgeHtmlSource.innerText = html;
|
|
badgeMarkdownSource.innerText = markdown;
|
|
};
|
|
|
|
generateBadge();
|
|
usernameInput.addEventListener('input', generateBadge);
|
|
|