Entrar Ainda não tem acesso?
1
resposta

Desafio 02 / Não Obrigatório

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Carrinho de Compras e atividade Desafio: hora da prática

por Leandro Silva Do Nascimento
| 25k xp | 19 posts
<body>
    <h2>Boas vindas ao desafio de programação!</h2>
    <label for="nome">Nome:</label>
    <input id="nome" type="text">
    <br>
    <label for="idade">Idade:</label>
    <input id="idade" type="number" min="1" max="100">
    <br>
    <button onclick="confirmar()">Confirmar</button>
    <p id="dados"></p>
</body>

// Crie um formulário simples com campos de entrada e utilize JavaScript para recuperar os valores digitados nos campos usando a propriedade value. Exiba os valores no console e na tela.

function confirmar() {
    let nome = document.getElementById("nome").value;
    let idade = document.getElementById("idade").value;
    let dados = document.getElementById("dados");
    console.log(`Nome:${nome} Idade:${idade}`);
    dados.textContent = `Seu nome é ${nome}, sua idade é ${idade}`;
}
1 resposta
por Vinicius de Oliveira Giuliani
| 49.3k xp | 8 posts
Desenvolvedor Full Stack

Olá, Leandro, tudo bem?

O seu código faz o que o desafio propôs, parabéns pela atenção ao utilizar um input com type="number" para a idade, bem como colocar valores máximos e mínimos para esses campos!

Uma melhoria que você poderia considerar, e que é muito importante em qualquer formulário, é realizar a validação dos valores de cada campo no seu código JavaScript. No momento, não existe nada impedindo o usuário de clicar no botão sem digitar nada e exibir uma mensagem com valores vazios, o que não faz sentido.

Também existe a questão de que o campo do tipo number não impede o usuário de digitar qualquer número que quiser, sendo possível digitar valores fora do intervalo estipulado pelos atributos min e max, e dessa forma, é possível digitar uma idade negativa ou acima de 100. Os atributos min e max apenas limitam os valores quando o usuário utiliza as setas do campo, e não funcionam se o usuário usar o teclado para a entrada dos valores.

Se quiser fazer essas validações, sugiro verificar se ambos os campos contém algum valor, e verificar se o campo de idade contém um número válido e que esteja dentro do intervalo estipulado. Caso contrário, exibir mensagens de erro ao usuário e interromper a execução do código.