import { html, render } from './node_modules/lit-html/lit-html.js';
const form = document.querySelector('form');
form.addEventListener('submit', onSubmeit);
let div = document.getElementById('root')

function onSubmeit(event) {
    event.preventDefault();

    let formData = new FormData(form);

    //let {towns} = Object.fromEntries(formData);
    let towns = formData.get('towns');
    let arrTowns = towns.split(', ');
    renderTownList(arrTowns);
    form.reset()

    function renderTownList(data) {
        const result = createHTMLel(data)
        render(result, div)
    };

    function createHTMLel(data) {
        const ul = html`
        <ul>
          ${data.map(el => html`<li>${el}</li>`)}
        </ul>
        `
        return ul;
    };
};