From 60fa8c3c56297908dfb4d28342d14426f2b811dc Mon Sep 17 00:00:00 2001 From: Luke Childs Date: Wed, 6 Mar 2019 08:38:23 +0700 Subject: [PATCH] Show generated HTML and Markdown --- index.html | 9 ++++++++- script.js | 24 +++++++++++++++++------- style.css | 13 +++++++++++++ 3 files changed, 38 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 75b32c3..5be30f2 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,19 @@

⚡️ tippin.me Badge Generator

-

Enter your Twitter username

+

Enter your Twitter username

@
+
+ +

HTML

+ 

+
+      
Markdown

+      

     

 
     
diff --git a/script.js b/script.js
index 5d56be3..129f97b 100644
--- 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 => `
-
+const badgeHtml = username =>
+`
   @${username} on tippin.me
-
-`;
+`;
 
-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);
diff --git a/style.css b/style.css
index c97e985..7de8740 100644
--- 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;
+}