From cb112828835a3bf7ea1b9c531e0052d905357b3f Mon Sep 17 00:00:00 2001
From: max-programming <maxprogramming05@gmail.com>
Date: Sun, 4 Oct 2020 07:58:12 +0530
Subject: [PATCH] Added Icons to labels

---
 index.html   | 28 ++++++++++++++--------------
 js/script.js |  9 ++++++---
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 4ce84c4..7aec020 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@
         <app-nav>
             <div class="jumbotron">
                 <h1 class="display-5 bold">GitHub profile readme generator</h1>
-                <p class="lead">Super simple GitHub profile readme generator made with vue js, that allows you to create beautiful readme files that you can copy/paste in your profile.</p>
+                <p class="lead">Super simple GitHub profile readme generator made with Vue.js, that allows you to create beautiful readme files that you can copy/paste in your profile.</p>
                 <hr class="my-4">
                 <p>What is GitHub profile readme? Check out repository to learn more.</p>
                 <p class="lead mb-0">
@@ -108,43 +108,43 @@ <h3>Social information</h3>
 
                     <div class="row">
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.github" title="GitHub" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.github" title="GitHub" placeholder="Enter username.." brand="github"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.dev" title="DEV.TO" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.dev" title="DEV.TO" placeholder="Enter username.." brand="dev-dot-to"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.linkedin" title="LinkedIn" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.linkedin" title="LinkedIn" placeholder="Enter username.." brand="linkedin"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.facebook" title="Facebook" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.facebook" title="Facebook" placeholder="Enter username.." brand="facebook"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.instagram" title="Instagram" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.instagram" title="Instagram" placeholder="Enter username.." brand="instagram"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.twitter" title="Twitter" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.twitter" title="Twitter" placeholder="Enter username.." brand="twitter"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.codepen" title="Codepen" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.codepen" title="Codepen" placeholder="Enter username.." brand="codepen"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.codesandbox" title="CodeSandbox" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.codesandbox" title="CodeSandbox" placeholder="Enter username.." brand="codesandbox"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.stackoverflow" title="Stack Overflow" placeholder="Enter user ID.."></custom-input>
+                            <custom-input v-model="data.stackoverflow" title="Stack Overflow" placeholder="Enter user ID.." brand="stackoverflow"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.youtube" title="YouTube" placeholder="Enter channel ID.."></custom-input>
+                            <custom-input v-model="data.youtube" title="YouTube" placeholder="Enter channel ID.." brand="youtube"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.twitch" title="Twitch" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.twitch" title="Twitch" placeholder="Enter username.." brand="twitch"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-6">
-                            <custom-input v-model="data.reddit" title="Reddit" placeholder="Enter username.."></custom-input>
+                            <custom-input v-model="data.reddit" title="Reddit" placeholder="Enter username.." brand="reddit"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-12">
-                            <custom-input v-model="data.website" title="Website" placeholder="Enter URL.."></custom-input>
+                            <custom-input v-model="data.website" title="Website" placeholder="Enter URL.." brand="icloud"></custom-input>
                         </div>
                         <div class="col-xs-12 col-md-12">
                             <h4>Others</h4>
diff --git a/js/script.js b/js/script.js
index 78d7140..46ec72f 100644
--- a/js/script.js
+++ b/js/script.js
@@ -1,11 +1,14 @@
 Vue.use(VueMarkdown);
 
 Vue.component('custom-input', {
-    props: ['value', 'title', 'placeholder'],
+    props: ['value', 'title', 'placeholder', 'brand'],
     template: `
   <div class="form-group">
-    <label for="`+this.title+`">{{title}}</label>
-    <input type="text" class="form-control" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" aria-describedby="`+this.title+`" v-bind:placeholder="placeholder">
+    <label :for="title">
+      <img v-if="brand" :src="'https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/'+brand+'.svg'" :alt="brand" height='30'> &nbsp;
+      {{ title }}
+    </label>
+    <input type="text" class="form-control" :value="value" @input="$emit('input', $event.target.value)" :aria-describedby="title" :placeholder="placeholder" />
   </div>
   `
 })