<!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>
</li>
</ul>
</div>
</main>
<script>
let 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++;
label.appendChild(checkbox);
label.appendChild(document.createTextNode(" " + nome)); // espaço antes do nome
container.appendChild(label);
li.appendChild(container);
listaDeAnimais.appendChild(li);
animal.value = "";
});
</script>
</body>
</html>
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!