do i need a separate Css file in order to make a simple mail signature generator with javascript?

user_10869920 0
Viewed 36

I am trying to create a simple email generator to use internally. they get updated relatively often and the main thing that changes is the image.

I am trying to create a form using javascript and take the user input and create the signature block that they can copy and paste into where ever it is that they need it.

I am a novice when it comes to javascript and haven't touched css in about 10 years.

i keep trying to input the fields into the html, but can't seem to figure out what exactly it is that i need to do.

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <script language="JavaScript">
    function showInput() {
        document.getElementById('display').innerHTML = 
                    document.getElementById("user_input").value;
    }
  </script>

  </head>
<body>

  <form>
    <label><b>Name</b></label>
    <input type="text" name="name" id="name">
    <label><b>Title</b></label>
    <input type="text" name="title" id="title">
    <label><b>Number</b></label>
    <input type="text" name="number" id="number">
    <label><b>Email</b></label>
    <input type="text" name="email" id="email">
    <input type="submit" onclick="showInput();"><br/>
    <label>Your input: </label>
    <p><span id='display'></span></p>
  </form><br>
  <table style="width:525px; font-size:10pt; font-family:Arial, sans-serif;" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td style="font-size:10pt; width:180px; padding-right:10px; vertical-align:middle;" valign="middle">

                <p style="margin-bottom:25px; line-height:1.2">
                    <strong><span
                            style="font-size:12pt; font-family:Arial, sans-serif; color:#000000">document.getElementById("name").value}</span></strong><br>
                    <span
                        style="font-family:Arial, sans-serif; font-size:12pt; color:#515151;"><em><strong>{title}</strong></em></span><br><br>
                    <span style="font-family:Arial, sans-serif; font-size:12pt; color:#000000;">{number}</span><br>
                    <span style="font-family:Arial, sans-serif; font-size:12pt; color:#000000;">{email}</span><br>
                </p>

            </td>

            <td style="font-family:Arial, sans-serif; padding-left:15px; vertical-align:top; line-height:1.2; border-left:solid 2px #000000"
                valign="top">

                <a href="https://www.company.com/" target="_blank" rel="noopener"
                    style="text-decoration:none;"><img src="Picture1.jpg" alt="company"
                        style="height:auto; border:0;"></a>
            </td>
        </tr>

    </tbody>
</table>
</body>
</html>```
css javascript
1 Answers

There are three ways you can use to implement CSS into your HTML: internal, external, and inline styles.

  1. Internal - requires you to add tag in the section of your HTML document.

This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: blue;
}
h1 {
    color: red;
    padding: 60px;
} 
</style>
</head>
<body>

<h1>example h1</h1>
<p>example p.</p>

</body>
</html>

  1. External - CSS, you’ll link your web pages to an external .css file. you can achieve this by doing the following: in the section of your HTML sheet, add a reference to your external .css file right after tag.

  2. Inline - used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.

More about those 3 types of css use can be found here

user_74942180
Related