Solucionado
Eu não entendi muito bem o porque de criar o li, a div, o input e o p, seria para criar mais item na lista? E no input, que já possuía um id, nós alteramos o id original ou adicionamos um id a mais a tag? Também não entendi direito o conceito da function arrow que a professora usou no addEventListener? Se alguém puder me explicar esses tópicos. Agradeço muito.
Oii, Carlos!
Vamos por partes para tentar esclarecer suas dúvidas:
Criação de li, div, input e p: Quando você está criando elementos como li, div, input e p em JavaScript, é para adicionar dinamicamente novos elementos à sua página. Por exemplo, se você está criando uma lista de tarefas, cada li pode representar uma nova tarefa. A div pra agrupar elementos relacionados, o input pra inserir dados, e o p pra exibir texto. Tudo depende do que você está tentando construir na sua página.
Alteração de id no input: Quando você já tem um input com um id, é importante saber que cada id em um documento HTML deve ser único. Se você precisa alterar o id, você pode fazer isso usando JavaScript, só que é melhor manter um único id por elemento. Se você precisa identificar o elemento de outra forma, considere usar classes ou atributos data-*, leia mais aqui sobre.
Arrow Functions no addEventListener: Arrow functions são uma forma mais concisa de escrever funções em JavaScript. Elas são especialmente úteis quando você precisa passar uma função como argumento, como no addEventListener. Uma diferença importante das arrow functions é que elas não têm seu próprio this, o que significa que o valor de this dentro de uma arrow function é o mesmo do contexto em que a função foi criada. Isso pode ser muito útil em callbacks, como os usados no addEventListener, onde você quer manter o contexto do objeto que está chamando o evento.
Para saber mais:
A título de curiosidade, para entender mais sobre arrow functions e como usar atributos de dados em HTML, confira os seguintes links:
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
Obrigado Lorena, 2 das minhas dúvidas foram sanadas, mas ainda não entendi a questão do id. Ele de fato foi substituído por um id novo ou ele foi alterado por um id "dinâmico"?
Que bom, Carlos!
Para essa sua segunda dúvida, se você puder compartilhar o código fica mais fácil pra ajudar. Como você não abriu na aula do curso não consigo saber muitos detalhes.
Fico no aguardo.
Obrigado pela ajuda, Lorena!
Consegui entender a questão do id, foi criado um id dinâmico no JavaScript pra ser usada na div do HTML fazendo uma lista dinâmica.
Muito obrigado pelo suporte.