using template literals to create html

1const createMarkup = function createMarkup(data) {
2  // Just use the same syntax for node elements
3  const markup = 
4    `<ul id="listItem-${data.name}">
5      <li>Name: ${data.name}</li>
6      <li>Age: ${data.age}</li>
7      <li>Gender: ${data.gender}</li>
8      <li>Fav. Colour: ${data.colour}</li>
9      <li>Lucky Number: ${data.number}</li>
10    </ul>`;return markup;
11};

1// Create our object
2const person = {
3    name: 'TopCoder2021',
4    job: 'Software Developer,
5    city: 'Los Angeles',
6    bio: 'Tony is a really cool guy that loves to code!'
7}
8
9// And then create our markup:
10const markup = `
11 <div class="person">
12    <h2>
13        ${person.name}
14    </h2>
15    <p class="location">${person.city}</p>
16    <p class="bio">${person.bio}</p>
17 </div>
18`;
19
20document.body.innerHTML = markup