no me acepta el codigo innerHTML

¡Hola Gabriel!

Gracias por compartir tu código. Parece que estás tratando de utilizar el método innerHTML para agregar contenido al elemento con el atributo [data-task]. Sin embargo, no estás seleccionando correctamente el elemento en la línea const task = document.querySelector('[data-task]');.

Para seleccionar correctamente el elemento, asegúrate de que el atributo [data-task] esté presente en el elemento al que deseas agregar contenido. Por ejemplo, si tienes un elemento <div> con el atributo [data-task], puedes seleccionarlo de la siguiente manera:

const task = document.querySelector('div[data-task]');

Además, asegúrate de que el código que agrega el evento al botón esté escrito correctamente. En tu código, hay un error de sintaxis en la línea btn,addEventListener("click", createTask ). Debería ser btn.addEventListener("click", createTask).

Aquí tienes una versión corregida de tu código:

const btn = document.querySelector("[data-form-btn]");

const createTask = (evento) => {
    evento.preventDefault();
    const input = document.querySelector('[data-form-input]');
    const value = input.value;
    const task = document.querySelector('div[data-task]');
    input.value = '';
    //backticks
    const content = `<div>
    <i class="far fa-check-square icon"></i>
              <span class="task">${value}</span>
            </div>
            <i class="fas fa-trash-alt trashIcon icon"></i>`;
    task.innerHTML = content;
    console.log(content);
};

console.log(btn);

//Arrow functions o funciones anonimas
btn.addEventListener("click", createTask);

Espero que esto resuelva tu problema. ¡Si tienes alguna otra pregunta, no dudes en preguntar! ¡Espero haber ayudado y buenos estudios!