Lista de Compras
<input type="text" id="itemInput" placeholder="Digite um item">
<button onclick="adicionarItem()">Adicionar</button>
<ul id="lista"></ul>
<input type="text" id="itemInput" placeholder="Digite um item">
<button onclick="adicionarItem()">Adicionar</button>
<ul id="lista"></ul>
Olá, Aníbal. Como vai?
O seu código HTML estrutural está excelente e cumpre muito bem o papel de criar a interface básica para a lista de compras, com o campo de texto, o botão e a lista desordenada onde os itens serão inseridos.
Como a atividade foca em determinando data e hora dentro do contexto de construção de páginas dinâmicas, o próximo passo essencial é construir a função adicionarItem() no JavaScript. Para que o seu exercício fique completo e atenda ao que foi proposto no capítulo, precisamos capturar o valor do input, criar um novo elemento de lista (<li>) e gerar a data e a hora atuais de forma dinâmica.
Para enriquecer o seu aprendizado, preparei um exemplo prático de como você pode implementar essa lógica no seu arquivo JavaScript:
function adicionarItem() {
// Captura os elementos do HTML pelo ID
const itemInput = document.getElementById('itemInput');
const lista = document.getElementById('lista');
// Verifica se o usuário não deixou o campo vazio
if (itemInput.value.trim() === '') {
alert('Por favor, digite um item antes de adicionar.');
return;
}
// Cria um novo elemento de lista (li)
const novoItem = document.createElement('li');
// Cria um objeto de data para capturar o momento exato da inserção
const dataAtual = new Date();
// Formata a data e a hora no padrão brasileiro (DD/MM/AAAA hh:mm)
const dataFormatada = dataAtual.toLocaleDateString('pt-BR');
const horaFormatada = dataAtual.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
// Define o conteúdo do novo item combinando o nome, a data e a hora
novoItem.innerHTML = `**${itemInput.value}** (Adicionado em: ${dataFormatada} às ${horaFormatada})`;
// Adiciona o novo item à nossa lista na tela
lista.appendChild(novoItem);
// Limpa o campo de entrada para o próximo item
itemInput.value = '';
}
trim(): Remove espaços em branco desnecessários antes e depois do texto, evitando que o usuário adicione um item "vazio" feito apenas de espaços.toLocaleDateString e toLocaleTimeString: São métodos nativos do JavaScript excelentes para formatar datas e horas de acordo com a região do usuário (pt-BR), sem a necessidade de instalar bibliotecas externas.appendChild: Método seguro e eficiente para injetar novos nós na árvore do DOM (Document Object Model).Espero que possa ter lhe ajudado!
<input type="text" id="itemInput" placeholder="Digite um item">
<button onclick="adicionarItem()">Adicionar</button>
<ul id="lista"></ul>
Obrigado pelas dicas professor. Agora sim esta inserindo data e hora e adiciona novo item na lista.