Fala, Rafael ! tudo certo ?
Tem várias maneiras de se fazer essa substituição do prompt pelo input, uma forma bem simples é adicionando os inputs e na hora que apertar o botão comparar o conteúdo do input com o que temos guardado.
Para começar então, podemos adicionar os campos de input no código, então ficaria algo da seguinte forma:
<form>
<input type="text" id="email" placeholder="digite seu email">
<input type="password" id="senha" placeholder="digite sua senha">
<button onclick="verficar(event)">enviar</button>
</form>Logo, desse jeito já vamos ter o nosso formulário na tela, e dentro dele vamos ter os inputs já com os ids para conseguirmos referenciar eles depois. E por fim temo um botão de enviar,que vai ficar responsável por chamar a nossa função que irá verificar se o conteudo dos inputs é o certo.
function verficar(event) {
event.preventDefault();
var email = document.getElementById("email").value.toLowerCase();
var senha = document.getElementById("senha").value;
if (email == emailCadastrado && senha == senhaCadastrada) {
document.write("seja bem vindo");
}
else if (senha != senhaCadastrada || email != emailCadastrado) {
var email = document.getElementById("email").value.toLowerCase();
var senha = document.getElementById("senha").value;
errou++;
}
if (errou > 2) {
document.write("acesso negado")
}
}A ideia dessa função é bem simples, é pegar o conteúdo dos inputs utilizando o getElementById passando o id, e acessar o value dos inputs. Depois disso, comparar se esses valores são iguais aos valores cadastrados.No caso estamos verificando aqui:
if (email == emailCadastrado && senha == senhaCadastrada) {
document.write("seja bem vindo");
}
else if (senha != senhaCadastrada || email != emailCadastrado) {
var email = document.getElementById("email").value.toLowerCase();
var senha = document.getElementById("senha").value;
errou++;
}
Se a senha for igual, então escrevemos na tela “Seja bem vindo”, caso seja diferente, vamos pegar o novo valor do input e comparar novamente. E utilizamos um contador, para verificar quantas vezes ele errou, nesse exemplo se passar de 3, vamos imprimir na tela “acesso negado”.
Então, o nosso código final, ficaria algo da seguinte forma:
<!DOCTYPE html>
<html lang="en">
<body>
<form>
<input type="text" id="email" placeholder="digite seu email">
<input type="password" id="senha" placeholder="digite sua senha">
<button onclick="verficar(event)">enviar</button>
</form>
<script>
var emailCadastrado = "teste@gmail.com";
var senhaCadastrada = "senha123";
var errou = 0;
function verficar(event) {
event.preventDefault();
var email = document.getElementById("email").value.toLowerCase();
var senha = document.getElementById("senha").value;
if (email == emailCadastrado && senha == senhaCadastrada) {
document.write("seja bem vindo");
}
else if (senha != senhaCadastrada || email != emailCadastrado) {
var email = document.getElementById("email").value.toLowerCase();
var senha = document.getElementById("senha").value;
errou++;
}
if (errou > 2) {
document.write("acesso negado")
}
}
</script>
</body>
</html>Eu espero que tenha ajudado e qualquer coisa eu estou por aqui.
Abraço e bons estudos