Gostaria de saber como ficaria o código se fosse para inserir os ingredientes em um input e a cada clicar de um botão ao lado do input os ingredientes fossem sendo armazenados. Mantendo-se a condição de não poder haver ingredientes repetidos.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Gostaria de saber como ficaria o código se fosse para inserir os ingredientes em um input e a cada clicar de um botão ao lado do input os ingredientes fossem sendo armazenados. Mantendo-se a condição de não poder haver ingredientes repetidos.
Olá Thiago!
Usando o que foi ensinado nas aulas pelo professor Flavio, você poderia fazer dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Incluindo ingredientes com input e button</title>
</head>
<body>
<h1>Receitas do Yan</h1>
<input />
<button>Adicionar</button>
<script>
var ingredientes = [];
var input = document.querySelector("input");
input.focus();
function adiciona() {
var existe = false;
for (var posicao = 0; posicao < ingredientes.length; posicao++) {
if (ingredientes[posicao] == input.value) {
existe = true;
break;
}
}
if (existe == false) {
ingredientes.push(input.value);
}
input.value = "";
input.focus();
console.log(ingredientes);
}
var button = document.querySelector("button");
button.onclick = adiciona;
</script>
</body>
</html>Ou poderia modificar de acordo com sua necessidade.
Espero que tenha ajudado!