Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

Javascript Calculadora dentro do blog

DiegoRLS

Por DiegoRLS
em Web e banco de dados

 Compartilhar
Ir à solução Resolvido por joseph_dev,

Posts recomendados

DiegoRLS
 

DiegoRLS

Postado
Postado

Olá a todos,

 

Estou criando um blog sobre paraquedismo e dentro dele irei colocar uma calculadora de carga alar (parâmetro usado no esporte), como faz um tempo que não uso JavaScript montei toda a estrutura mas acabei travando na hora de calcular o resultado.

 

O calculo a ser feito é através de três entradas do usuário (peso da pessoa, peso do equipamento e tamanho do velame) e o cálculo será:

((peso da pessoa+peso do equipamento)*2.2)/tamanho do velame

 

Além disto quero mostrar o nível de experiência baseado no resultado que seria o seguinte:

menor ou igual a 1 - Iniciante

1.1 até 1.3 - Intermediário

1.31 até 1.5 - Avançado

maior que 1.51 - Experiente

 

Vou deixar a estrutura que fiz até o momento e uma foto de como está ficando no blog. Quem poder me ajudar agradeço. 

<p>&nbsp;</p><h1 style="text-align: center;"><span style="font-family: Changa One;"><span style="font-weight: 400;">CALCULADORA DE CARGA ALAR</span></span></h1><div style="text-align: center;"><span><span style="font-family: ABeeZee;">Preencha o formulário abaixo.</span></span></div><div id="gtx-trans" style="left: 262px; position: absolute; top: 19.4375px;"><div class="gtx-trans-icon"></div></div>

<form name="calcform" method="post" action="">
   <fieldset>
     <label for="pessoa">Peso da Pessoa (kg):</label>
     <input type="text" name="pessoa" id="pessoa" value="70"/>

     <label for="equipamento">Peso do Equipamento (kg):</label>
     <input type="text" name="equipamento" id="equipamento" value="12"/>
     
     <label for="velame">Tamanho do Velame (ft):</label>
     <input type="text" name="velame" id="velame" value="190"/>

     <label></label>
     
	 <input type="button" value="Calcular" class="botao" onClick=calcular()/>

     <label></label>
     
     <label>Carga Alar:</label><label  ></label>
     <label>Nível de Experiência:</label>

   </fieldset>
</form>

 

 

Calculadora.png

Link para o comentário
Compartilhar em outros sites
DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado

Opa @DiF, beleza?

 

Na verdade não ta dando erro, o que eu não to conseguindo fazer é na hora que apertar o botão calcular ele mostrar os resultados. Já tentei usar formula comum e também uma função para realizar as contas, mas não funcionaram dentro desta estruturam que montei.

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@DiegoRLS Com jquery é bem fácil de fazer um cálculo:

  

$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	
  
  	var calculo = (((pessoa + equipamento) * 2.2) / velame);
    
    alert(calculo);
  
  });
});

Mas tem certeza que a fórmula é essa mesma?   o resultado foi um número altissmo, nem se compara com o que você busca com valores entre 1 e 1.35

 

Quanto a apresentar o resultado, bem aí vai ter que usar um switch case para cada resultado.

Além disso, você precisa usar um elemento por exemplo span, dentro do label para apresentar o reultado

Link para o comentário
Compartilhar em outros sites
DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado

@DiF realmente ficou bem fácil. O erro no resultado era porque o alert naturalmente é string, então usei o parseFloat e resolvi o problema, além disso usei o toFixed para mostrar apenas dois números depois da virgula.

 

Montei a estrutura do Switch, mas não sei se a localização do código está certo, e como exibir ele no label que está montado, não sei se devo dar um id pro switch para identifica-lo (nem sei se é possível), mas tá quase pronto...

  

<p>&nbsp;</p><h1 style="text-align: center;"><span style="font-family: Changa One;"><span style="font-weight: 400;">CALCULADORA DE CARGA ALAR</span></span></h1><div style="text-align: center;"><span><span style="font-family: ABeeZee;">Preencha o formulário abaixo.</span></span></div><div id="gtx-trans" style="left: 262px; position: absolute; top: 19.4375px;"><div class="gtx-trans-icon"></div></div>

<script type="text/javascript">
$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
	
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    
    document.getElementById('resultado').setAttribute("value", cargaAlar);
    });  
  
  switch (calculo) {
  case '<=1':
    console.log('Iniciante');
    break;
  case '>1 and <=1.3':
    console.log('Intermediário');
  case '>1.3 and <=1.5':
    console.log('Avançado');
  case '>1.5':
    console.log('Avançado');    
    break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
      
    document.getElementById('experiencia').setAttribute("value", ???);
	});
</script>

<form name="calcform" method="post" action="">
   <fieldset>
     <label for="pessoa">Peso da Pessoa (kg):</label>
     <input type="text" name="pessoa" id="pessoa" value="70"/>

     <label for="equipamento">Peso do Equipamento (kg):</label>
     <input type="text" name="equipamento" id="equipamento" value="12"/>
     
     <label for="velame">Tamanho do Velame (ft):</label>
     <input type="text" name="velame" id="velame" value="190"/>

     <label></label>
     <input type="button" value="Calcular" class="botao" onClick=calcular()/>
     
     <label></label>
     <label>Carga Alar: <input type="text" id="resultado" value=""></label>

     <label>Nível de Experiência: <input type="text" id="experiencia" value=""></label>

   </fieldset>
</form>

 

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@DiegoRLS Um dos principais erros na minha opinião é misturar elementos jquery e javascript puro. Use todo em jquery.

  

 document.getElementById('resultado').setAttribute("value", cargaAlar);

 

troque para:

  

$("#resultado").val(cargaAlar);

Porque esse campo #resultado, é um input do tipo text.. então definir um valor para esse campo precisa ser com a função val() do jquery. Diferente do caso da experiência, onde lá você vai inserir um texto no elemento.

 

Na linha:

  

<input type="button" value="Calcular" class="botao" onClick=calcular()/>

 

retire a chamada de função onclick, pois você já faz isso lá no codigo jquery

 

No switch, você coloca os resultados no console.log., e esta usando o resultado do calculo, no correto é usar a variavel quer você ajustou com toFixed.

 

No nível de experiência, podes colocar um campo span.

  

<label>Nível de Experiência:<span class="experiencia"> </span></label>

  

//enquanto for verdadeiro as expressões
switch (true) {
  case (cargaAlar <= 1): $(".experiencia").html("Iniciante"); break;
  case (cargaAlar > 1 && cargaAlar <= 1.3): $(".experiencia").html("Intermediário"); break; 
  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").html("Avançado"); break;
  case (cargaAlar > 1.5): $(".experiencia").html("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 }

 

 

PS:  o switch case... precisa ficar dentro da função de click do botão..

 

Então seu código completo fica dessa forma:

 

HTML: 

<form name="calcform" method="post" action="">
   <fieldset>
     <label for="pessoa">Peso da Pessoa (kg):</label>
     <input type="text" name="pessoa" id="pessoa" value="70"/>

     <label for="equipamento">Peso do Equipamento (kg):</label>
     <input type="text" name="equipamento" id="equipamento" value="12"/>
     
     <label for="velame">Tamanho do Velame (ft):</label>
     <input type="text" name="velame" id="velame" value="190"/>

     <label></label>
     <input type="button" value="Calcular" class="botao"/>
     
     <label></label>
     <label>Carga Alar: <input type="text" id="resultado" value=""></label>

     <label>Nível de Experiência:<span class="experiencia"> </span></label>

   </fieldset>
</form>

 

Jquery: 

$(document).ready(function() {
  var botao = $(".botao");

      botao.on("click", function() {
        var pessoa = $("#pessoa").val();
        var equipamento = $("#equipamento").val();
        var velame = $("#velame").val();

        var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
        var cargaAlar = calculo.toFixed(2);

        $("#resultado").val(cargaAlar);

        switch (true) {
          case (cargaAlar <= 1):
            $(".experiencia").html("Iniciante");
            break;
          case (cargaAlar > 1 && cargaAlar <= 1.3):
            $(".experiencia").html("Intermediário");
            break;
          case (cargaAlar > 1.3 && cargaAlar <= 1.5):
            $(".experiencia").html("Avançado");
            break;
          case (cargaAlar > 1.5):
            $(".experiencia").html("Experiente");
            break;
          default:
            console.log('Desculpe, houve erro no cálculo, tente novamente.');
        }    

  });
});

 

Veja funcionando: https://jsfiddle.net/dife/ur0z8epc/2/

Link para o comentário
Compartilhar em outros sites
DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado

Estou reativando o tóico para tirar um última dúvida...

 

Estou tentando exibir o resultado do switch case dentro do input igual ficou o resultado da cálculo, mas não estou conseguindo, quando uso o <input> o resultado do switch case não aparece, mas quando deixo dentro do <span> aparece normalmente, tem como exibir o resultado do switch case dentro de um input também para ficar padronizado?

  

<!-- CALCULADORA DE CARGA ALAR -->
<script type="text/javascript">
$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    $("#resultado").val(cargaAlar);

<!-- VERIFICAR NIVEL DE EXPERIENCIA -->    
  switch (true) {
	  case (cargaAlar <= 1.1): $(".experiencia").html("Iniciante"); break;
	  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").html("Intermediário"); break; 
	  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").html("Avançado"); break;
	  case (cargaAlar > 1.5): $(".experiencia").html("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 		} 
	});
});
</script>

<!-- FORMULARIO DE PREENCHIMENTO E RESULTADO -->
<form action="" method="post" name="calcform">
   <fieldset>
     <label>Peso da Pessoa (kg):</label>
     <input id="pessoa" name="pessoa" type="text" value="70" />

     <label>Peso do Equipamento (kg):</label>
     <input id="equipamento" name="equipamento" type="text" value="12" />
     
     <label>Tamanho do Velame (ft):</label>
     <input id="velame" name="velame" type="text" value="190" />

     <label></label>
     <input class="botao" type="button" value="Calcular" />
     
     <label></label>
     <label>Carga Alar: <input disabled id="resultado" value=""></label>
     <label>Nível de Experiência: <input disabled id="experiencia" value=""></label>
	 <!-- No span o resultado aparece normal <label>Nível de Experiência: <span class="experiencia"></span></label> -->
   </fieldset>
</form>

 

Link para o comentário
Compartilhar em outros sites
  • Solução
joseph_dev
 

joseph_dev

Postado
  • Solução
Postado

Mude o método html() por val() no trecho do switch: 

switch (true) {
  case (cargaAlar <= 1.1): $(".experiencia").val("Iniciante"); break;
  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").val("Intermediário"); break; 
  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").val("Avançado"); break;
  case (cargaAlar > 1.5): $(".experiencia").val("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
}

 

  • Curtir 1
Link para o comentário
Compartilhar em outros sites
DiegoRLS
 

DiegoRLS

Postado
  • Autor
Postado
7 horas atrás, joseph_dev disse:

Mude o método html() por val() no trecho do switch: 


switch (true) {
  case (cargaAlar <= 1.1): $(".experiencia").val("Iniciante"); break;
  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").val("Intermediário"); break; 
  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").val("Avançado"); break;
  case (cargaAlar > 1.5): $(".experiencia").val("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
}

 

 

@joseph_dev deu certo! Obrigado!

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

 

GRÁTIS: ebook Redes Wi-Fi – 2ª Edição

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!