Add basic badge generation

6 years ago · 7272d305cf
2 changed files with 22 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -10,6 +10,11 @@
    <!-- <meta property="og:image" content="favicon.png" /> -->
  </head>
  <body>
+    <div class="container">
+      <input type="text" name="username">
+      <div class="badge-preview"></div>
+    </div>
+
    <script src="./script.js"></script>
  </body>
 </html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,17 @@
+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 username = document.querySelector('input[name="username"]');
+const badgePreview = document.querySelector('.badge-preview');
+
+const generateBadge = () => {
+  badgePreview.innerHTML = badgeHtml(username.value);
+};
+
+username.addEventListener('change', generateBadge);