I have two things that relate to adding a character to the output view.
- Pronouns – Right now, it is hidden until someone types in their preferred pronoun. It’ll output her/she if that’s what they put, but I would like to do ‘(‘ + “her/she” + ‘)’;
2.The output is hidden until someone types a number. I would like to have it as display M: 739.383.3893.
I can get the outputs to display the input text but never the with the character. How do I go about adding characters into the output based on the input the user puts in?
Extreme beginner here, I’m sorry 🙁
(function() { /* * Input stuff */ var doc = document; var form = doc.getElementById('form'); var copyButton = doc.getElementById('copy'); var resetButton = doc.getElementById('reset'); var inputPhone = doc.getElementById('phone'); var inputOffice = doc.getElementById('office'); var instructions = doc.getElementById('instructions'); var inputFullName = doc.getElementById('fullName'); var inputPronouns = doc.getElementById('pronouns'); var inputJobTitle = doc.getElementById('jobTitle'); var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature'; var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!'; var peopleTemplate = { empty: { fullName: "", pronouns: "", jobTitle: "", phone: "", office: "" }, dummy: { fullName: "Your Name", jobTitle: "Your title", pronouns: "Your pronouns", office: "7890", phone: "123-456-7890" } }; /* * Output stuff */ var sig = doc.getElementById('sig'); var sigPhone = doc.querySelector('.sig__phone'); var sigFullName = doc.querySelector('.sig__fullName'); var sigJobTitle = doc.querySelector('.sig__jobTitle'); var sigPronouns = doc.querySelector('.sig__pronouns'); var sigOffice = doc.querySelector('.sig__office'); /* * Instructions HTML */ var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>" + "<p>To create a new signature in Outlook, follow these directions:</p>" + "<ol><li>Update Outlook to the latest version.</li>" + "<li>Open Outlook.</li>" + "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>" + "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>" + "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>" + "<li>Select whatever is there already and paste your new signature into the box.</li>" + "</ol>"; /* * Clear form inputs */ var resetForm = function () { inputFullName.value = ''; inputJobTitle.value = ''; inputPhone.value = ''; inputPronouns.value = ''; inputOffice.value = ''; updateSignature(); instructions.innerHTML = ''; }; /* * Fill signature with dummy info */ var fillDummySignature = function () { sigFullName.textContent = "Your Name"; sigPronouns.textContent = "" sigJobTitle.textContent = "Your title"; sigPhone.textContent = ""; sigOffice.textContent = "1234"; }; /* * Check if nothing is entered */ var inputsAreEmpty = function () { return inputFullName.value === '' && inputPronouns.value === '' && inputJobTitle.value === '' && inputPhone.value === '' && inputOffice.value === ''; }; var userName = document.querySelector('#phone'); userName.addEventListener('input', restrictNumber); function restrictNumber (e) { var newValue = this.value.replace(new RegExp(/[^d]/,'ig'), ""); this.value = newValue; } /* * Reformat phone number syntax */ var formatPhone = function (n) { // var pattern = /[^0-9.]+/g; // if (n.search(pattern) !== -1) { // console.log("not a number"); // // n.replace(pattern, ''); // return n; // } var o = n; var l = n.length; var noDash = function (value, index) { return value.charAt(index) !== '.'; }; var insertDash = function (value, index) { return value.slice(0, index) + '.' + value.slice(index, value.length + 1); }; var no3 = noDash(o, 3); var no7 = noDash(o, 7); if (l > 3 && l <= 7) { if (no3) { o = insertDash(n, 3); } } else if (l > 7 && l <= 11) { if (no3) { o = insertDash(n, 3); if (no7) { o = insertDash(o, 7); // insert on the value we just updated } } else if (no7) { o = insertDash(n, 7); } } else if (l > 12) { o = n.slice(0, 12); } return o; }; /* * Add the input values into the actual signature */ var updateSignature = function (event) { if (inputsAreEmpty()) { fillDummySignature(); // Button states copyButton.disabled = true; copyButton.innerHTML = copyButtonDisabledHTML; resetButton.style.display = 'none'; } else { // Button states copyButton.disabled = false; copyButton.innerHTML = copyButtonOriginalHTML; resetButton.style.display = 'inline-block'; // Populate signature fields if (event && event.target.tagName === 'INPUT') { var id = event.target.id; var input = doc.getElementById(id); var sigClassName = '.sig__' + id; var inputIdName = '#' + id; var sigTarget = doc.querySelector(sigClassName); var inputTarget = doc.querySelector(inputIdName); if (id === 'fullName') { sigTarget.textContent = input.value; } else if (id === 'phone') { sigTarget.textContent = formatPhone(input.value); inputTarget.value = formatPhone(input.value); } else { sigTarget.textContent = input.value; } } else { sigFullName.textContent = inputFullName.value; sigJobTitle.textContent = inputJobTitle.value; sigPhone.textContent = inputPhone.value; } } } /* * Insert a person's info when option is selected */ var insertPersonInfo = function (event) { resetForm(); if (event.target.value !== 'custom') { var person = people[this.selectedIndex - 1]; inputFullName.value = person.fullName; inputPronouns.value = person.pronouns; inputJobTitle.value = person.jobTitle; inputPhone.value = person.phone; updateSignature(event); } }; /* * Populate the people info in the select menu on load */ document.addEventListener("DOMContentLoaded", function (event) { updateSignature(event); fillDummySignature(); }); /* * Copy raw HTML output */ copyButton.addEventListener('click', function(event) { // Have to remove any existing ranges :: Chrome bug window.getSelection().removeAllRanges(); // Create range and add it to selection var r = document.createRange(); r.selectNode(sig); window.getSelection().addRange(r); // Error catching try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy command was ' + msg); } catch(err) { console.log('Oops, unable to copy'); } // Remove range from selection again window.getSelection().removeAllRanges(); if (successful) { instructions.innerHTML = pasteInstructions; // this.parentNode.removeChild(this); } }); /* * Listeners */ form.addEventListener('input', updateSignature); resetButton.addEventListener('click', resetForm); inputPhone.addEventListener('paste', function(event) { // formatPhone(); }); }());
.form__input, .button, .button--copy, .button--reset { font-size: 14px; margin: 0; padding: 6px 9px; border: 1px solid #e7e7e7; border-radius: 2px; line-height: 1; } * { box-sizing: border-box; } .sig-gen { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; margin: 2em auto 4em; width: 100%; max-width: 800px; } .sig-gen__section { margin-bottom: 2em; } .sig-gen__section--email { margin-bottom: 3em; } .sig__field, .set-inform, .links-text { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; } .form { display: flex; justify-content: space-between; flex-direction: column; } .set-inform { display: inline-block; } @media screen and (min-width: 600px) { .form { /* flex-direction: row; */ } } .form__group { margin-bottom: 12px; } .form__group:last-of-type { margin-bottom: 0; } @media screen and (min-width: 600px) { .form__group { margin-bottom: 10px; } } .form label { display: block; margin-bottom: 6px; } .form__input { background: white; width: 100%; } .form__input:focus, .form__input:active { outline: 0; border-color: #bebebe; } .email_generator { position: relative; border: 1px solid #e7e7e7; border-top: none; border-bottom: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 6px 0 #ccc; } .email_generator:before { content: ""; position: absolute; top: 0; left: -1px; width: calc(100% + 2 * 1px); height: 28%; background: linear-gradient(white, rgba(255, 255, 255, 0)); } .email__container { padding: 28px; } .email__sig { margin-top: 51px; } .email__line { height: 12px; margin-bottom: 12px; background: #e7e7e7; border-radius: 1px; } .email__line:last-child { width: 66%; margin-bottom: 28px; } .email__signoff .email__line { width: 17%; } .sig__field { font-size: 14px; } .sig__fullName { font-size: 18px; } .button, .button--copy, .button--reset { padding: 9px 12px; color: white; cursor: pointer; background: #8c4049; border-color: #823b44; } .button:hover, .button--copy:hover, .button--reset:hover { background: #97454e; border-color: #8c4049; } .button:focus, .button--copy:focus, .button--reset:focus, .button:active, .button--copy:active, .button--reset:active { outline: 0; background: #77363e; border-color: #622d33; } .button:disabled, .button--copy:disabled, .button--reset:disabled { background: #656669; border-color: #5d5e61; cursor: not-allowed; color: white; } .button--reset { background: #e2e3e4; border-color: #dadbdd; color: #656669; } .button--reset:hover { background: #eaebeb; border-color: #e2e3e4; } .button--reset:focus, .button--reset:active { outline: 0; background: #d2d4d5; border-color: #c2c4c6; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="app" class="sig-gen"> <section class="sig-gen__section"> <h2>Email Signature Generator</h2> </section> <section class="sig-gen__section"> <form id="form" class="form"> <div class="form__group"> <label for="fullName">Full Name:</label> <input type="text" id="fullName" class="form__input" placeholder="Your name" value=""> </div> <div class="form__group"> <label for="pronouns">Pronouns:</label> <input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value=""> </div> <div class="form__group"> <label for="jobTitle">Job Title:</label> <input type="text" id="jobTitle" class="form__input" placeholder="Your title" value=""> </div> <div class="form__group"> <label for="office">Office Extension:</label> <input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value=""> </div> <div class="form__group"> <label for="phone">Mobile:</label> <input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value=""> </div> </form> </section> <section class="sig-gen__section sig-gen__section--email"> <div class="email_generator"> <div class="email__container"> <div id="sig" class="email__sig"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;"> <tbody border="0" cellpadding="0" cellspacing="0"> <tr border="0" cellpadding="0" cellspacing="0"> <td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top"> <div> <strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong><div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div> </div> <div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div> <div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div> <div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div><div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> </span><div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div> <div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div> </td> </tr> <tr border="0" cellpadding="0" cellspacing="0"> <td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;"> <tbody border="0" cellpadding="0" cellspacing="0"> <tr border="0" cellpadding="0" cellspacing="0"> <td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top"> <a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a><span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span> </td> </tr> <tr border="0" cellpadding="0" cellspacing="0"> <td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> </div> </section> <section class="sig-gen__section"> <button id="copy" class="button--copy"></button> <button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button> </section> <section class="sig-gen__section"> <div id="instructions"></div> </section> </div>
Advertisement
Answer
[x] displaying of (pronoun)
is done,
[x] prepending M.
to the displayed mobile number is done,
(function() { /* * Input stuff */ var doc = document; var form = doc.getElementById('form'); var copyButton = doc.getElementById('copy'); var resetButton = doc.getElementById('reset'); var inputPhone = doc.getElementById('phone'); var inputOffice = doc.getElementById('office'); var instructions = doc.getElementById('instructions'); var inputFullName = doc.getElementById('fullName'); var inputPronouns = doc.getElementById('pronouns'); var inputJobTitle = doc.getElementById('jobTitle'); var copyButtonOriginalHTML = '<i class="fas fa-copy"></i> Copy Signature'; var copyButtonDisabledHTML = '<i class="fas fa-exclamation-circle"></i> Enter your info first!'; var peopleTemplate = { empty: { fullName: "", pronouns: "", jobTitle: "", phone: "", office: "" }, dummy: { fullName: "Your Name", jobTitle: "Your title", pronouns: "Your pronouns", office: "7890", phone: "123-456-7890" } }; /* * Output stuff */ var sig = doc.getElementById('sig'); var sigPhone = doc.querySelector('.sig__phone'); var sigFullName = doc.querySelector('.sig__fullName'); var sigJobTitle = doc.querySelector('.sig__jobTitle'); var sigPronouns = doc.querySelector('.sig__pronouns'); var sigOffice = doc.querySelector('.sig__office'); /* * Instructions HTML */ var pasteInstructions = "<h3>Yay! Your signature was copied and is ready to paste.</h3>" + "<p>To create a new signature in Outlook, follow these directions:</p>" + "<ol><li>Update Outlook to the latest version.</li>" + "<li>Open Outlook.</li>" + "<li>Under <b>Outlook</b> in the main menu, select <b>Preferences</b>.</li>" + "<li>Under the <b>Email</b> section, click <b>Signatures</b>.</li>" + "<li>In the <b>Edit Signatures</b> section, click the <b>+</b> (plus) icon in the bottom left corner.</li>" + "<li>Select whatever is there already and paste your new signature into the box.</li>" + "</ol>"; /* * Clear form inputs */ var resetForm = function() { inputFullName.value = ''; inputJobTitle.value = ''; inputPhone.value = ''; inputPronouns.value = ''; inputOffice.value = ''; updateSignature(); instructions.innerHTML = ''; }; /* * Fill signature with dummy info */ var fillDummySignature = function() { sigFullName.textContent = "Your Name"; sigPronouns.textContent = "" sigJobTitle.textContent = "Your title"; sigPhone.textContent = ""; sigOffice.textContent = "1234"; }; /* * Check if nothing is entered */ var inputsAreEmpty = function() { return [inputFullName, inputPronouns, inputJobTitle, inputPhone, inputOffice].every(({ value }) => value === '') }; var userName = document.querySelector('#phone'); userName.addEventListener('input', restrictNumber); function restrictNumber(e) { var newValue = this.value.replace(new RegExp(/[^d]/, 'ig'), ""); this.value = newValue; } /* * Reformat phone number syntax */ var formatPhone = function(n) { // var pattern = /[^0-9.]+/g; // if (n.search(pattern) !== -1) { // console.log("not a number"); // // n.replace(pattern, ''); // return n; // } var o = n; var l = n.length; var noDash = function(value, index) { return value.charAt(index) !== '.'; }; var insertDash = function(value, index) { return value.slice(0, index) + '.' + value.slice(index, value.length + 1); }; var no3 = noDash(o, 3); var no7 = noDash(o, 7); if (l > 3 && l <= 7) { if (no3) { o = insertDash(n, 3); } } else if (l > 7 && l <= 11) { if (no3) { o = insertDash(n, 3); if (no7) { o = insertDash(o, 7); // insert on the value we just updated } } else if (no7) { o = insertDash(n, 7); } } else if (l > 12) { o = n.slice(0, 12); } return o; }; /* * Add the input values into the actual signature */ var updateSignature = function(event) { if (inputsAreEmpty()) { fillDummySignature(); // Button states copyButton.disabled = true; copyButton.innerHTML = copyButtonDisabledHTML; resetButton.style.display = 'none'; } else { // Button states copyButton.disabled = false; copyButton.innerHTML = copyButtonOriginalHTML; resetButton.style.display = 'inline-block'; // Populate signature fields if (event && event.target.tagName === 'INPUT') { var id = event.target.id; var input = doc.getElementById(id); var sigClassName = '.sig__' + id; var inputIdName = '#' + id; var sigTarget = doc.querySelector(sigClassName); var inputTarget = doc.querySelector(inputIdName); if (id === 'fullName') { sigTarget.textContent = input.value; } else if (id === 'phone') { // just save the value in a variable, and use that const formattedPhone = formatPhone(input.value); sigTarget.textContent = `M. ${formattedPhone}`; inputTarget.value = formattedPhone } else if (id === 'pronouns') { // this case needed to be treated separately sigTarget.textContent = `(${input.value})` } else { sigTarget.textContent = input.value; } } else { sigFullName.textContent = inputFullName.value; sigJobTitle.textContent = inputJobTitle.value; sigPhone.textContent = inputPhone.value; } } } /* * Insert a person's info when option is selected */ var insertPersonInfo = function(event) { resetForm(); if (event.target.value !== 'custom') { var person = people[this.selectedIndex - 1]; inputFullName.value = person.fullName; inputPronouns.value = person.pronouns; inputJobTitle.value = person.jobTitle; inputPhone.value = person.phone; updateSignature(event); } }; /* * Populate the people info in the select menu on load */ document.addEventListener("DOMContentLoaded", function(event) { updateSignature(event); fillDummySignature(); }); /* * Copy raw HTML output */ copyButton.addEventListener('click', function(event) { // Have to remove any existing ranges :: Chrome bug window.getSelection().removeAllRanges(); // Create range and add it to selection var r = document.createRange(); r.selectNode(sig); window.getSelection().addRange(r); // Error catching try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copy command was ' + msg); } catch (err) { console.log('Oops, unable to copy'); } // Remove range from selection again window.getSelection().removeAllRanges(); if (successful) { instructions.innerHTML = pasteInstructions; // this.parentNode.removeChild(this); } }); /* * Listeners */ form.addEventListener('input', updateSignature); resetButton.addEventListener('click', resetForm); inputPhone.addEventListener('paste', function(event) { // formatPhone(); }); }());
.form__input, .button, .button--copy, .button--reset { font-size: 14px; margin: 0; padding: 6px 9px; border: 1px solid #e7e7e7; border-radius: 2px; line-height: 1; } * { box-sizing: border-box; } .sig-gen { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 16px; margin: 2em auto 4em; width: 100%; max-width: 800px; } .sig-gen__section { margin-bottom: 2em; } .sig-gen__section--email { margin-bottom: 3em; } .sig__field, .set-inform, .links-text { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; } .form { display: flex; justify-content: space-between; flex-direction: column; } .set-inform { display: inline-block; } @media screen and (min-width: 600px) { .form { /* flex-direction: row; */ } } .form__group { margin-bottom: 12px; } .form__group:last-of-type { margin-bottom: 0; } @media screen and (min-width: 600px) { .form__group { margin-bottom: 10px; } } .form label { display: block; margin-bottom: 6px; } .form__input { background: white; width: 100%; } .form__input:focus, .form__input:active { outline: 0; border-color: #bebebe; } .email_generator { position: relative; border: 1px solid #e7e7e7; border-top: none; border-bottom: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0 6px 0 #ccc; } .email_generator:before { content: ""; position: absolute; top: 0; left: -1px; width: calc(100% + 2 * 1px); height: 28%; background: linear-gradient(white, rgba(255, 255, 255, 0)); } .email__container { padding: 28px; } .email__sig { margin-top: 51px; } .email__line { height: 12px; margin-bottom: 12px; background: #e7e7e7; border-radius: 1px; } .email__line:last-child { width: 66%; margin-bottom: 28px; } .email__signoff .email__line { width: 17%; } .sig__field { font-size: 14px; } .sig__fullName { font-size: 18px; } .button, .button--copy, .button--reset { padding: 9px 12px; color: white; cursor: pointer; background: #8c4049; border-color: #823b44; } .button:hover, .button--copy:hover, .button--reset:hover { background: #97454e; border-color: #8c4049; } .button:focus, .button--copy:focus, .button--reset:focus, .button:active, .button--copy:active, .button--reset:active { outline: 0; background: #77363e; border-color: #622d33; } .button:disabled, .button--copy:disabled, .button--reset:disabled { background: #656669; border-color: #5d5e61; cursor: not-allowed; color: white; } .button--reset { background: #e2e3e4; border-color: #dadbdd; color: #656669; } .button--reset:hover { background: #eaebeb; border-color: #e2e3e4; } .button--reset:focus, .button--reset:active { outline: 0; background: #d2d4d5; border-color: #c2c4c6; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="app" class="sig-gen"> <section class="sig-gen__section"> <h2>Email Signature Generator</h2> </section> <section class="sig-gen__section"> <form id="form" class="form"> <div class="form__group"> <label for="fullName">Full Name:</label> <input type="text" id="fullName" class="form__input" placeholder="Your name" value=""> </div> <div class="form__group"> <label for="pronouns">Pronouns:</label> <input type="text" id="pronouns" class="form__input" placeholder="optional (they/them)" value=""> </div> <div class="form__group"> <label for="jobTitle">Job Title:</label> <input type="text" id="jobTitle" class="form__input" placeholder="Your title" value=""> </div> <div class="form__group"> <label for="office">Office Extension:</label> <input type="text" id="office" class="form__input" pattern="[0-9]" maxlength="4" placeholder="1234" value=""> </div> <div class="form__group"> <label for="phone">Mobile:</label> <input type="text" id="phone" class="form__input" pattern="[0-9]" maxlength="12" placeholder="optional" value=""> </div> </form> </section> <section class="sig-gen__section sig-gen__section--email"> <div class="email_generator"> <div class="email__container"> <div id="sig" class="email__sig"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;"> <tbody border="0" cellpadding="0" cellspacing="0"> <tr border="0" cellpadding="0" cellspacing="0"> <td align="left" height="28" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;" valign="top"> <div> <strong class="sig__field sig__fullName set-inform" style="font-size: 16px; color:#002857;"></strong> <div class="sig__field sig__pronouns set-inform" style="font-size: 13px; color: #002857; font-style: italic;"></div> </div> <div class="sig__field sig__jobTitle" style="font-size: 15px; color: #7f7f7f"></div> <div class="links-text" style="font-size: 15px; color: #7f7f7f">3847 New York, New York</div> <div class="set-inform" style="font-size: 15px; color: #7f7f7f">O: 383.384.4838 ext.</div> <div class="sig__field sig__office set-inform" style="font-size: 15px; color: #7f7f7f"></div><span> </span> <div class="sig__phone set-inform" style="font-size: 15px; color: #7f7f7f"></div> <div class="links-text" style="font-size: 15px;"><a style="color: #7f7f7f;" href="#">FB</a> | <a style="color: #7f7f7f;" href="#">Twitter</a> | <a style="color: #7f7f7f;" href="#">Instagram</a> | <a style="color: #7f7f7f;" href="#">LinkedIn</a></div> </td> </tr> <tr border="0" cellpadding="0" cellspacing="0"> <td align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;margin:0;padding:0;" valign="top"> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:normal;color:#313030;line-height:1.5;"> <tbody border="0" cellpadding="0" cellspacing="0"> <tr border="0" cellpadding="0" cellspacing="0"> <td align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;line-height:1.4;" valign="top"> <a href="https://www.desales.edu" style="text-decoration: none;font-family:'DM Serif Text', serif;font-size:24px;font-weight:bold;color:#002857;" class="sig__logo" title="DeSales University - Home">New York University</a> <span style="margin-left:10px;margin-right: 10px;border-left: solid; border-color: #002857;border-width: 2px;"></span><span style="font-weight: bold;color: #C20F2F;font-size:18px;letter-spacing: 1px;"> NYU</span> </td> </tr> <tr border="0" cellpadding="0" cellspacing="0"> <td align="left" height="16" style="mso-table-lspace:0pt;mso-table-rspace:0pt;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;" valign="top"> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> </div> </div> </section> <section class="sig-gen__section"> <button id="copy" class="button--copy"></button> <button id="reset" class="button--reset"><i class="fas fa-sync"></i> Reset Form</button> </section> <section class="sig-gen__section"> <div id="instructions"></div> </section> </div>