Frontier Direct Care Email Signature

by stevenkaspar

HTML

<ol>
<li>
  <div>
    <h3>
     Fill out form
    </h3>
    <input placeholder='Bibb Beale' id='Name' /><br/>
    <input placeholder='Chief Executive Officer' id='Title' /><br/>
    <input placeholder='901.652.7046' id='Phone' /><br/>
    <div>
      <input placeholder='bibb' id='Email' /><span>@frontierdirect.com</span>
    </div>
  </div>
</li>
<li>
  <button id="CopyButton">
    Copy HTML
  </button>
</li>
<li><a target="_blank" href="https://mail.google.com/mail/u/0/?ogbl#settings/general">Paste into Google Email Settings</a></li>
</ol>


<hr />

<div id="Content">
  <table>
    <tr>
      <td style="height: 100px; width: 100px; padding-right: 10px;">
        <img style="width: 110px" src="https://storage.googleapis.com/fdc_technology_public_assets/images/logos/email_blue_circle.png" />
      </td>
      <td valign="middle" style="padding-top: 0px;">
        <table style="border-spacing: 0px;">
          <tr style="line-height: 18px;"><td style="padding-top: 0px;">
          <span style="font-family: Open Sans, arial, sans-serif; font-weight: bold; font-size: 18px; border-bottom-width: 4px; border-bottom-color: #5579b1; border-bottom-style: solid; color: #192127; line-height: 18px;" id='NameDest'>FIRST LAST</span></td>
          </tr>
          <tr style="line-height: 16px;"><td style="padding-top: 6px;">
          <span style="font-family: Open Sans, arial, sans-serif; font-weight: bold; font-size: 14px; color: #192127; line-height: 14px;" id='TitleDest'>ROLE</span></td>
          </tr>
          <tr style="line-height: 12px;"><td style="padding-top: 0px;">
          <span style="font-family: Open Sans, arial, sans-serif; font-size: 12px; color: #192127; line-height: 12px;" id='PhoneDest'>901.652.7046</span></td>
          </tr>
          <tr style="line-height: 12px;"><td style="padding-top: 0px;">
          <a id="EmailLinkDest" href="mailto:[email protected]" style="color: #192127 !important;...

CSS

li {
 margin-bottom: 10px;
}

JavaScript

const name = document.getElementById('Name')
const title = document.getElementById('Title')
const phone = document.getElementById('Phone')
const email = document.getElementById('Email')

const signature_content_wrapper = document.getElementById('Content')
const name_dest = document.getElementById('NameDest')
const title_dest = document.getElementById('TitleDest')
const phone_dest = document.getElementById('PhoneDest')
const email_dest = document.getElementById('EmailDest')
const email_link_dest = document.getElementById('EmailLinkDest')

name.oninput = (e) => name_dest.innerHTML = e.target.value.toUpperCase()
title.oninput = (e) => title_dest.innerHTML = e.target.value
phone.oninput = (e) => phone_dest.innerHTML = e.target.value
email.oninput = (e) => {
	const email_string = e.target.value + '@frontierdirect.com'
	email_dest.innerHTML = email_string
	email_link_dest.href = "mailto:" + email_string
}

const copy_button = document.getElementById('CopyButton')
copy_button.onclick = (e) => {
	copyToClip(signature_content_wrapper.outerHTML)
}

function copyToClip(str) {
  function listener(e) {
    e.clipboardData.setData("text/html", str);
    e.clipboardData.setData("text/plain", str);
    e.preventDefault();
  }
  document.addEventListener("copy", listener);
  document.execCommand("copy");
  document.removeEventListener("copy", listener);
};