https://github.com/barbaranunesprogramer/lista-animais
index.html
<!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 type="module" src="/script/script.js"></script>
</body>
</html>
script.js
import { criarItemDaLista } from "./criarItensLista.js";
import { gerarDiaDaSemana } from "./gerarDiasDaSemana.js";
const animal = document.getElementById('animal');
const botaoAdicionar = document.getElementById("btn");
botaoAdicionar.addEventListener("click", function (evento) {
evento.preventDefault();
const nome = animal.value.trim();
if (nome === "") {
alert("Por favor, digite o nome de um animal.");
return;
}
const data = gerarDiaDaSemana();
criarItemDaLista(nome, data);
animal.value = "";
});
gerarDiaDaSemana.js
function gerarDiaDaSemana() {
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: '2-digit', minute: '2-digit' });
const dataCompleta = `${diaDaSemana} (${data}) às ${hora}`;
return dataCompleta;
}
export { gerarDiaDaSemana };
criarItemlista.js
const listaDeAnimais = document.getElementById("listaAnimais");
let contador = 2;
export function criarItemDaLista(nome, dataCompleta) {
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 () {
li.style.textDecoration = checkbox.checked ? "line-through" : "none";
});
label.appendChild(checkbox);
label.appendChild(document.createTextNode(" " + nome));
container.appendChild(label);
li.appendChild(container);
const p = document.createElement("p");
p.classList.add("texto-data");
p.textContent = dataCompleta;
li.appendChild(p);
listaDeAnimais.appendChild(li);
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!