How to create an HTML generator with JavaScript?
Tags: javascript, css, webdev, tutorial
Published: 2021-07-13 15:17:54

> **_Before you proceed_**: _This post is not about creating a safe or the best HTML generator rather it's just something for fun that you can try by using template literals in JavaScript. It was a fun experiment for me._

Ever tired of writing multiple lines of similar HTML? If you are, then you can automate the process by using template literals in JavaScript. Let's see how we can do that.

Let's say you have multiple boxes which are actually hyperlinks and you want to create multiple of them.

![HTML Hyperlinks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u01jbnqch3x47e2dknjl.jpg)

One way is to just copy and paste the HTML code and make changes to a particular section of the code. This approach can work for small projects but if your project is big enough, then it can become a mess.

Alternatively, you can create your own HTML generator using `template literals` in JavaScript which will generate HTML code for you!

## Template Literals in JavaScript

Template literals in JavaScript are nothing but string literals which allow you to embed various expressions into the string. They are enclosed in backticks. For embedding an expression the syntax goes like this,

```javascript
let string = `first part of the string ${expression} second part of the string`;
```

Now, let's create the HTML generator.

Create respective input fields for link URL, Title & a Tag. You can add your own input fields also if you want to.

```html
<div id="contains">
      <label for="title" class="title">Title</label>
      <input type="text" id="title" name="title">
      <label for="url" class="url">URL</label>
      <input type="url" id="url" name="url">
      <label for="tag" class="tag">Tag</label>
      <input type="text" id="tag" name="tag">
      <button id="submit">Generate</button>
</div>
```

Next, create a `textarea` field in which the resultant code will be displayed as well as create a button to copy the code to the clipboard.

```html
<div class="result">
      <textarea class="result_text" type="text" rows="5"></textarea>
      <button class="copy_btn"><i class="fas fa-clipboard"></i></button>
</div>
```

![HTML Generator User Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewjgd4wau9sythc3syem.jpg)


## JavaScript

We will create a function named `generate()`. This function has three parameters — `title`, `url` and `tag`. It will take in the value of the `title`, the `url`, and the `tag` that we have input in the field as arguments.

```javascript
function generate(title, url, tag){
   //code
}
```

Further, we will use template literals and we will embed the `title`, the `url` & the `tag` into the string. Then, set the value of the `result` field to the string that is generated.

```javascript
let title = document.querySelector("#title");
let url = document.querySelector("#url");
let tag = document.querySelector("#tag");
let result = document.querySelector(".result_text");

function generate(title, url, tag){
    let final_string = `<a href="${url}"><div class="link"><div class="banner">${tag}</div>${title}</div></a>`;
    result.value = final_string;
}
```

All of this will take place after the user clicks the generate button and so let's add an eventListener to it.

```javascript
let submit_btn = document.querySelector("#submit");
submit_btn.addEventListener("click", () => {
    generate(title.value, url.value, tag.value);
    title.value = "";
    url.value = "";
    tag.value = "";
});
```
In order to copy the code from the `textarea`, we can define a function called `copy()` and then call the function when the user clicks on the 'copy to clipboard' button.

```javascript
let copy_btn = document.querySelector(".copy_btn");
copy_btn.addEventListener("click", () => {
    copy();
})
function copy(){
    result.select();
    document.execCommand("copy");
}
```

Here's a quick demo:

{% codepen https://codepen.io/seekertruth/pen/OJmWMpK %}

Now, you can copy the code into your main project.
This is just one of the use cases of template literals. You can do a lot of thins by using template literals in JavaScript. They make your life as a JavaScript developer easy.

Signing off.