<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Animais</title>
</head>
<body>
<main>
<form>
<input class="nomeAnimal" id="animal" type="text" placeholder="Digite o nome de um animal" />
<button id="btn">Clique aqui</button>
</form>
<div class="container-lista">
<h2>Lista de Animais</h2>
<hr />
<ul id="listaAnimais">
<li>
<div class="lista_animais_container">
<label>
<input type='checkbox' id="checkbox-1" />
Malú
</label>
</div>
<p class="texto-data">sábado (03/05/2025) às 07:00</p>
</li>
</ul>
</div>
</main>
<script>
const animal = document.getElementById('animal');
const botaoAdicionar = document.getElementById("btn");
const listaDeAnimais = document.getElementById("listaAnimais");
let contador = 2;
botaoAdicionar.addEventListener("click", function (evento) {
evento.preventDefault();
const nome = animal.value;
if (nome === "") {
alert("Por favor, digite o nome de um animal.");
return;
}
const li = document.createElement('li');
const container = document.createElement('div');
container.classList.add("lista_animais_container");
const label = document.createElement("label");
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = "checkbox-" + contador++;
checkbox.addEventListener("click", function () {
if (checkbox.checked) {
li.style.textDecoration = "line-through";
} else {
li.style.textDecoration = "none";
}
});
label.appendChild(checkbox);
label.appendChild(document.createTextNode(" " + nome));
container.appendChild(label);
li.appendChild(container);
const agora = new Date();
const diaDaSemana = agora.toLocaleDateString('pt-BR', { weekday: 'long' });
const data = agora.toLocaleDateString('pt-BR');
const hora = agora.toLocaleTimeString('pt-BR', { hour: 'numeric', minute: 'numeric' });
const dataCompleta = `${diaDaSemana} (${data}) às ${hora}`;
const p = document.createElement("p");
p.classList.add("texto-data");
p.textContent = dataCompleta;
li.appendChild(p);
listaDeAnimais.appendChild(li);
animal.value = "";
});
</script>
</body>
</html>
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!