Show generated HTML and Markdown

6 years ago · 60fa8c3c56
3 changed files with 38 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -12,12 +12,19 @@
  <body>
    <div class="container">
      <h1>⚡️ tippin.me Badge Generator</h1>
-      <p class="description">Enter your Twitter username</p>
+      <h2 class="description">Enter your Twitter username</h2>
      <div class="input-container">
        <input type="text" name="username" placeholder="username" autofocus autocomplete="off">
        <span class="prefix">@</span>
      </div>
+
      <div class="badge-preview"></div>
+
+      <h3 class="output-title">HTML</h3>
+      <pre class="badge-html"></pre>
+
+      <h3 class="output-title">Markdown</h3>
+      <pre class="badge-markdown"></pre>
    </div>

    <script src="./script.js"></script>
--- a/script.js
+++ b/script.js
@ -3,18 +3,28 @@ 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">
+const badgeHtml = username =>
+`<a href="${badgeLinkUrl(username)}" rel="noopener noreferrer" target="_blank">
  <img src="${badgeImageUrl(username)}" alt="@${username} on tippin.me"/>
-</a>
-`;
+</a>`;

-const username = document.querySelector('input[name="username"]');
+const badgeMarkdown = username =>
+`[![tippin.me](${badgeImageUrl(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 = () => {
-  badgePreview.innerHTML = badgeHtml(escape(username.value) || 'username');
+  const username = escape(usernameInput.value) || 'username';
+  const html = badgeHtml(username);
+  const markdown = badgeMarkdown(username);
+
+  badgePreview.innerHTML = html;
+  badgeHtmlSource.innerText = html;
+  badgeMarkdownSource.innerText = markdown;
 };

 generateBadge();
-username.addEventListener('input', generateBadge);
+usernameInput.addEventListener('input', generateBadge);
--- a/style.css
+++ b/style.css
@ -15,6 +15,7 @@ body {
 }

 .description {
+  font-weight: 500;
  margin-top: 1.4em;
  font-size: 1.4em;
 }
@ -48,3 +49,15 @@ body {
  margin-top: 2em;
  height: 20px;
 }
+
+.output-title {
+  margin-top: 2em;
+}
+
+pre {
+  text-align: left;
+  font-size: 0.8em;
+  background: rgba(255, 255, 255, 0.3);
+  padding: 1em;
+  overflow-x: scroll;
+}