CCCPaste

01. List Towns with lit html

import { html, render } from 'https://unpkg.com/lit-html?module';
function attachEventListeners() {
let towns = document.getElementById("towns");
let root = document.getElementById("root");
let btn = document.getElementById("btnLoadTowns");

btn.addEventListener("click", function (e) {
e.preventDefault();
renderTowns();
})


function renderTowns() {
let items = towns.value.split(", ");
//create array of li
const itemTemplates = [];
for (const i of items) {
itemTemplates.push(html`<li>${i}</li>`);
}
//render ul
let rootUl = html`
<ul>
${itemTemplates}
</ul>
`;
//finally append to root
render(rootUl, root)
}

}

attachEventListeners()