Neste caso, eu usei o JavaScript interno com o HTML para diexar tudo juntamente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="email-field">
<!-- <input type="button" id="email-button" value="Insert the e-mail." onclick="verifyEmail()"> -->
<input type="button" id="email-button" value="Insert the e-mail.">
<ul id="email-list">
<li>user1@example.com</li>
<li>user2@example.com</li>
<li>user3@example.com</li>
</ul>
</body>
</html>
<script>
const emailField = document.getElementById("email-field");
const buttonField = document.getElementById("email-button");
const emailList = document.getElementById("email-list");
//const registeredEmails = ['user1@example.com', 'user2@example.com', 'user3@example.com'];
var registeredEmails = [];
async function verifyEmail(emailInsertered) {
//const emailInsertered = emailField.value;
return new Promise((resolve) => {
const email = document.querySelectorAll("#email-list li");
for(var i = 0; email.length > i; i++) {
registeredEmails.push(email[i].innerText);
console.log("novo", email[i].innerText)
}
resolve(registeredEmails.includes(emailInsertered))
}, 1000)
}
//buttonField.addEventListener('keypress', async (event) => {
emailField.addEventListener('blur', async (event) => {
const emailTexted = emailField.value.trim();
if (emailTexted !== "") {
console.log("going")
try {
const emailExists = await verifyEmail(emailTexted);
if (!emailExists) {
const newEmail = document.createElement("li");
newEmail.innerHTML = `<p>${emailTexted}</p>`;
emailList.appendChild(newEmail);
emailField.value = "";
} else {
alert("E-mail já inserido.")
}
} catch (error) {
console.error("Erro no serviço.")
alert("Erro no serviço.")
}
}
})
</script>
<!--
Você está desenvolvendo um formulário de cadastro de usuários para um site.
* Um dos requisitos é validar se o e-mail inserido pelo usuário já está registrado
* no sistema antes de permitir o envio do formulário.
* A validação deve ser feita de forma assíncrona,
* consultando uma lista de e-mails previamente cadastrados.
-->
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!