1
resposta

[Projeto] Final do Módulo 03 - Implementação para números inválidos

Olá pessoal, espero que estejam todos bem!

Ao final do módulo 03, tive a curiosidade de implementar a condicional para números inválidos, que consiste em verificar o limite do nosso número secreto que definimos no elemento 'p' do nosso projeto: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeOu seja, quaisquer número que não esteja entre 1 e 10, serão considerados inválidos Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Abaixo teremos o código:

function verificarChute() {
  let chute = document.querySelector("input").value;
  
  if(chute > 0 && chute <= 10) {
    if (chute == numeroSecreto) {
      exibirTextoNaTela("h1", "Você Acertou!!");
      let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
      let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}`;
      exibirTextoNaTela("p", mensagemTentativas);
      document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
      if (chute > numeroSecreto) {
        exibirTextoNaTela("p", "O número secreto é menor");
      } else {
        exibirTextoNaTela("p", "O número secreto é maior");
      }
      tentativas++;
      limparCampo();
    }
  } else {
    exibirTextoNaTela('p', 'Número Inválido');
  }
}
1 resposta

Ao utilizar um input do tipo number em formulários HTML, é possível adicionar atributos como min e max para definir limites mínimos e máximos para os valores aceitos. Isso torna a entrada de dados mais robusta e evita a necessidade de validações adicionais no código.

 <label for="number">Digite um número:</label>
<input type="number"  id="number"  min="1" max="10" />

**min="1" **: Garante que o número inserida não seja menor que 1. max="10": Limita o número máximo para 10.

  • O navegador impede automaticamente a entrada de valores fora dos limites especificados.
  • Os usuários recebem feedback visual imediato ao tentar inserir valores inválidos.
  • Reduz a necessidade de validações adicionais em JavaScript ou no back-end.