Add a li with data from a form using the dom JS

Viewed 22

Good day, I am currently a bit new to js and dom management, I am doing a personal project to practice this topic. I have a form which I receive and store the data, but I would like to add it in li by means of the dom, to be more specific, every time I press the add button the same was added in the li.

const $ = selector => document.querySelector(selector); // es para no tener que escribir document.querySelector cada vez que lo necesitemos
const imp = $('.import');
const time = $('.time');
const timeblocks = $('.time-blocks');
const ulTime = timeblocks.children[0];
const liTime = document.createElement('li');
const $form = $('form');

$form.addEventListener('submit', e => {
    e.preventDefault();

    const data = Object.fromEntries(new FormData($form));
});

let taks = data.taks;
let timeTaks = data.time;
let priority = data.import;
let duration = data.duration;

liTime.textContent = `Tarea: ${taks}, Hora: ${timeTaks}, Prioridad: ${priority}`;
ulTime.appendChild(liTime);

enter image description here

Likewise, if in the code I am showing I am doing something in an inadequate way, I would like to know so I can improve myself. Thank you very much!!!!

0 Answers
Related