Vue.js HTML Email Signature Containing Images Generator From Form in Browser Using Javascript Full Project For Beginners

Vue.js HTML Email Signature Containing Images Generator From Form in Browser Using Javascript Full Project For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post we will be building a html email signature containing images generator from form in browser using vue.js and  html5 css3 and javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<div id="app">
  <h1>Email signature creator</h1>
  <div class="criador">
    <section>
      <div class="criador__input">
        <h2>input</h2>
        <form>
          <input
            tabindex="1"
            v-model="name"
            placeholder="Name"
            autocomplete="new-name" />
          <input
            tabindex="2"
            v-model="title"
            placeholder="Title"
            autocomplete="new-title" />
          <input
            tabindex="3"
            v-model="telephone1"
            placeholder="Phone"
            autocomplete="new-phone1" />
          <input
            tabindex="4"
            v-model="telephone2"
            placeholder="Phone 2"
            autocomplete="new-phone2" />
          <input
            tabindex="5"
            v-model="image"
            placeholder="Img src"
            autocomplete="new-image" />
          <input
            tabindex="6"
            v-model="imageHref"
            placeholder="Img href"
            autocomplete="new-image" />
        </form>
      </div>
      <div class="criador__output">
        <h2>output</h2>
        <div class="criador__source">
          <div ref="sourceWrapper">
            <table id="source" cellpadding="0" cellspacing="0" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;font-weight:normal;color:#37474f;text-align:left;line-height:20px;">
              <tr>
                <td style="font-size:0px;">
                  <a tabindex="-1" :href="imageHref || 'http://placekitten.com'">
                    <img :src="image || 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/Rick_Sanchez.png'" border="0" style="padding-top: 8px;" width="56" height="56">
                  </a>
                </td>
                <td style="padding-left:10px;">
                  <span style="font-weight: bold;">{{ name || "Rick Sanchez" }}</span>,
                  <span style="color: #78909c;">{{ title || "Inventor" }}</span>
                  <br>
                  <a tabindex="-1" :href="tel1" style="color:#1f96f2;"> {{ telephone1 || "+137 Earth 1 202 509 6995" }}</a> <span v-if="telephone2"style="color:#999;">|</span>
                  <a tabindex="-1" :href="tel2" style="color:#1f96f2;"> {{ telephone2 }}</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="criador__copy">
        <h2>Actions</h2>
        <button ref="copy" class="js-copy" data-clipboard-target="#source">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M22 3v21h-20v-21h4.667l-2.667 2.808v16.192h16v-16.192l-2.609-2.808h4.609zm-3.646 4l-3.312-3.569v-.41c.001-1.668-1.352-3.021-3.021-3.021-1.667 0-3.021 1.332-3.021 3l.001.431-3.298 3.569h12.651zm-6.354-5c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm-5 15h10v1h-10v-1zm0-1h10v-1h-10v1zm0-2h10v-1h-10v1zm0-2h10v-1h-10v1z"/>
            <path d="M7 14.729l.855-1.151c1 .484 1.635.852 2.76 1.654 2.113-2.399 3.511-3.616 6.106-5.231l.279.64c-2.141 1.869-3.709 3.949-5.967 7.999-1.393-1.64-2.322-2.326-4.033-3.911zm15-11.729v21h-20v-21h4.666l-2.666 2.808v16.192h16v-16.192l-2.609-2.808h4.609zm-3.646 4l-3.312-3.569v-.41c.001-1.668-1.352-3.021-3.021-3.021-1.667 0-3.021 1.332-3.021 3l.001.431-3.298 3.569h12.651zm-6.354-5c.553 0 1 .448 1 1s-.447 1-1 1-1-.448-1-1 .447-1 1-1z"/>
          </svg>
          <span>Copy</span>
          <span class="feedback__text">Copied!</span>
        </button>
        <button ref="copySrc" class="js-copy-src">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M22 3v21h-20v-21h4.667l-2.667 2.808v16.192h16v-16.192l-2.609-2.808h4.609zm-3.646 4l-3.312-3.569v-.41c.001-1.668-1.352-3.021-3.021-3.021-1.667 0-3.021 1.332-3.021 3l.001.431-3.298 3.569h12.651zm-6.354-5c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm-5 15h10v1h-10v-1zm0-1h10v-1h-10v1zm0-2h10v-1h-10v1zm0-2h10v-1h-10v1z"/>
            <path d="M7 14.729l.855-1.151c1 .484 1.635.852 2.76 1.654 2.113-2.399 3.511-3.616 6.106-5.231l.279.64c-2.141 1.869-3.709 3.949-5.967 7.999-1.393-1.64-2.322-2.326-4.033-3.911zm15-11.729v21h-20v-21h4.666l-2.666 2.808v16.192h16v-16.192l-2.609-2.808h4.609zm-3.646 4l-3.312-3.569v-.41c.001-1.668-1.352-3.021-3.021-3.021-1.667 0-3.021 1.332-3.021 3l.001.431-3.298 3.569h12.651zm-6.354-5c.553 0 1 .448 1 1s-.447 1-1 1-1-.448-1-1 .447-1 1-1z"/>
          </svg>
          <span>Copy HTML</span>
          <span class="feedback__text">Copied!</span>
        </button>
      </div>
    </section>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

 

See also  Build a HTML2PDF.js PDF Generator in Vue.js Using vue-html2pdf Library in Browser Using Javascript Full Project For Beginners

 

Now make a style.css file and copy paste the following code

 

style.css

 

$green:   #369662;
$purple:  #6D64E8;
$blue:    #1f96f2;
$black:   #37474f;
$grey:    #78909c;
$copy:    #2c3e50;
$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px
);

html {
  height: 100%;
  box-sizing: content-box;
  *, *:before, *:after { box-sizing: inherit; }
}

body {
  margin: 0;
  padding: 0;
  background: #eee;
}

#app {
  font-family: 'Avenirblack','Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: $copy;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 1rem;
  font-weight: 500;
  color: $black;
  font-size: 1rem;

  @include mq($from: tablet) {
    font-size: 1.5rem;
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
}

h2 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  color: $black;
  position: absolute;
  top: -1rem;
  left: 0.5rem;
  b { color: $purple; }
  @include mq($from: tablet) {
    left: -1px;
    &::before {
      counter-increment: steps;
      content: "" counter(steps) ". ";
      color: $purple;
      font-weight: 500;
    }
  }
}


.criador {
  width: 100%;
  margin: 0 auto 88px;
  counter-reset: steps;

  @include mq($from: tablet) {
    width: 90%;
    max-width: 1024px;
  }

  section {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

    @include mq($from: tablet) {
      margin-bottom: 2rem;
      justify-content: flex-start;
    }
  }

  section > div {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    background: #fff;
    padding: 0.5rem;

    @include mq($from: tablet) {
      position: relative;
      padding: 0.75rem;
    }
  }

  &__input {
    position: relative;
    margin-bottom: 2rem;
    &:last-of-type {
      margin-bottom: 0;
    }

    @include mq($from: tablet) {
      flex: 0 10rem;
      margin-right: 2rem;
      margin-bottom: 0;
    }

    form { 
      width: 100%;
    }

    input {
      width: 100%;
      box-sizing: border-box;
      font-size: 0.75rem;
      margin-bottom: 12px;
      &:last-child { margin-bottom: 0; }
    }
  }

  &__output {
    flex: 1;

    @include mq($from: mobile, $until: tablet) {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 2;
      margin-bottom: 0;
      h2 { display: none; }
    }
  }

  &__source {
    box-sizing: border-box;
    border: 2px dashed rgba(#444, 0.75);
    height: 100%;
    display: flex;
    position: relative;
    > div { margin: auto; }
  }

  &__copy {
    margin-left: 2rem;
    position: relative;
    flex: 0 200px;
    @include mq($from: tablet) {
      height: 12rem;
    }
  }

  &__copy {
    display: flex;
    flex-flow: row wrap;

    @include mq($from: tablet) {
      flex: 0 10rem;
      margin-right: 2rem;
    }

    button {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      cursor: pointer;
      margin: 0;
      background: #eee;
      border: none;
      width: 100%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      border: 1px solid $green;
      border-radius: 2px;
      transition: box-shadow 0.2s ease;
      padding: 1rem 0;
      &:first-of-type { margin-bottom: 1rem; }
      svg, span { flex: 0 100%; }
      span { margin-top: 8px; line-height: 1rem; }
      path { fill: $green; transition: opacity 0.3s ease; }
      path:last-child { opacity: 0; }
      .feedback__text { line-height: 1rem; display: none; }
      &.feedback path:first-child { opacity: 0; }
      &.feedback path:last-child { opacity: 1; }
      &.feedback > span { display: none; }
      &.feedback > span.feedback__text { display: initial; }
      &:focus { outline: none; }
      &:active {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02), 0 1px 1px rgba(0, 0, 0, 0.04);
        path { fill: darken(#369662, 10%); }
      }
    }
  }
}

 

See also  Build a Vue.js Book Search Web App Using Google Books API in Browser Full Project For Beginners

 

Now make a script.js file and copy paste the following code

 

script.js

 

var time = 0;
var running = 0;

function startPause() {
    if (running == 0) {
        running = 1;
        increment();
        document.getElementById("startPause").innerHTML = "PAUSE";
    } else {
        running = 0;
        document.getElementById("startPause").innerHTML = "RESUME";
    }
}

function reset(){
    running = 0;
    time = 0;
    document.getElementById("startPause").innerHTML = "START";
    document.getElementById("output").innerHTML = "00:00:00";
}

function increment() {
    if (running == 1) {
        setTimeout(function() {
            time++;
            var mins = Math.floor(time/10/60);
            var secs = Math.floor(time/10 % 60);
            var tenths = time % 10;
            if (mins < 10) {
              mins = "0" + mins;
            } 
            if (secs < 10) {
              secs = "0" + secs;
            }
            document.getElementById("output").innerHTML = mins + ":" + secs + ":" + "0" + tenths;
            increment();
        },100);
    }
}

 

See also  Build a Vue.js WebRTC Audio Recorder From Microphone Which Play,Download and Upload Recorded Audio to Server in Browser Using Javascript Full Project For Beginners

 

And now make a script.js file and copy paste the following code

 

script.js

 

window.box = new Vue({
  el: "#app",
  data() {
    return {
      logo: "https://rh.convenia.com.br/assets/institucional/images/convenia-color.png",
      name: "",
      title: "",
      email: "",
      telephone1: "",
      telephone2: "",
      image: "",
      imageHref: ""
    };
  },
  computed: {
    tel1() {
      return `tel:${this.telephone1.replace(/ /g, "").replace(/\D/g, "")}`;
    },
    tel2() {
      return `tel:${this.telephone2.replace(/ /g, "").replace(/\D/g, "")}`;
    }
  },
  mounted() {
    const signatureClipboard = new Clipboard(".js-copy");
    const signatureHTMLClipboard = new Clipboard(".js-copy-src", {
      text: () => {
        return this.$refs.sourceWrapper.innerHTML;
      }
    });

    const feedback = ref => {
      this.$refs[ref].classList.add("feedback");
      setTimeout(() => {
        this.$refs[ref].classList.remove("feedback");
      }, 2000);
    };

    signatureClipboard.on("success", e => {
      feedback("copy");
    });
    signatureHTMLClipboard.on("success", e => {
      feedback("copySrc");
    });
  }
});

 

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

Leave a Reply