Solucionado (ver solução)
Solucionado
(ver solução)
10
respostas

[Dúvida] Preciso de ajuda para o projeto final dos Desafios.

Boa tarde, usando os desafios para aprender, elaborei algo que possa juntar quase todos dos que foram solicitados, porém, encontrei algumas barreiras que preciso de ajuda para resolver, vou deixar abaixo o link do projeto no git e a lista do que preciso ajustar no projeto:

link: https://github.com/LuDesigner/Desafios_C2_JS

  1. Nas opções de conta, como soma, dobro e etc.., o alert aceita o não preenchimento da formula, tornado NaN, como faço para ele solicitar que seja incluido um número na função?

  2. Os números estão aparecendo com respostas inteiras, como por exemplo o Cambio, como faço para nessas funções de valores, seja considerado 2 casas após a virgula ?

  3. Outra duvida é que no responsivo para celulares e tablets ele não fica certo, a parte do desenvolvido por .... fica curto e do lado direito, e as informações grudam no lado esquerdo e ficam cortadas, fora da tela.

aceito sugestões de melhorias.

Obs:. Pretendo por input também no projeto, para que seja possível colocar a informação na tela e não em alert, mas por enquanto minhas duvidas são essas, quem poder ajudar fico agradecido.

10 respostas

Olá, Luis.

Tudo bem?

Eu baixei o seu projeto e fiz essas alterações, lembrando que são só sugestões, depois você pode adaptar do seu jeito.

1. Sobre o alert aceitar o campo vazio, eu coloquei uma verificação com if e else na função verificarDob, usei o sinal de diferente: != para comparar se o valor é um número, caso não for um número a função encerra e exibe o texto: "Preencha o campo com um número", se for número, ele roda o a função normal e exibe o resultado e o texto correto, basicamente é if(dob1 != Number) -> Se o valor inserido for diferente de Número, veja:

function verificarDob() {
    let dob1 = parseInt(prompt('Me diga um número inteiro'));
    if(dob1 != Number){
        exibirTextoNaTela('p', `Preencha o campo com um número`);
    }else{
        let resultad = (dob1 * 2);
    exibirTextoNaTela('p', `O dobro do valor ${dob1} é de ${resultad}`);
    // alert(`O dobro do valor ${dob1} é de ${resultad}`)
    }
}

2. Para que o número exiba as casas decimais eu adicionei o método .toFixed(2) no resultado, na variável resultadoDolar onde exibe o resultado da função dolar(). Esse método .toFixed(2) já vem com o JavaScript, ele exibe as casas decimais, esse valor 2 entre parênteses é a quantidade de casas decimais que queremos exibir, veja:

function dolar(){
    let dolar1 = parseInt(prompt('Qual a valor em Real? (informe somente número)'));
    let dolar2 = parseInt(prompt('Qual o valor do Cambio? (informe somente número)'));
    let resultadoDolar = (dolar1 * dolar2);
    exibirTextoNaTela('p', `A conversão é de R$ ${resultadoDolar.toFixed(2)}`);   //aqui 
}

3. Sobre a responsividade, parece estar correta e funcionando certinho. Quando testamos no modo responsivo do navegador as vezes acontece um bug, ele demora para atualizar, pode estar certo, ele mostra como se estivesse errado. Veja o meu teste no meu celular, eu não mexi em nada no código do CSS:

Print da tela do celular exibindo o projeto de lógica de programação do aluno luis, mostrando a responsividade funcionando perfeitamente

Versão de tablet no modo responsivo do navegador:

Print da tela do do navegador no modo responsivo exibindo o projeto de lógica de programação do aluno luis, mostrando a responsividade funcionando perfeitamente

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

Muito obrigado, vou estudar essas mudanças e acrescentar no projeto, esse desafio vou manter para ir modificando e melhorando com os outros cursos, é provável que ele apareça com duvidas em outros, recentemente adicionei outras funções mas ainda não fiz o commit, nesse meio tempo de postagem eu acabei voltando ao projeto e editando o CSS para responsivo.

Renan eu consegui usar as formulas para melhorar o código, mas a função if(dob1 != Number) com mais de um número não consegui, como por exemplo na soma, eu tentei usar if else if, tentei por nas duas, mas não deram certos, como consigo aplicar essa lógica em mais de um let na função?

Beleza. Eu estou indo além desse curso, pois não foi falado sobre isso.

Nesse caso você pode utilizar o operador de Ou que é escrito assim || com duas barras retas, com ele você consegue comparar dois números se um esta vazio, OU o outro está vazio. No caso da Soma se o "valor1" estiver vazio ou o "valor2" estiver vazio, então imprime algo como "Número inválido ou campo vazio", dessa vez vou utilizar também uma outra função que já é nativa do JavaScript, a função isNAN(valor1), essa função verifica se está vazio, se é NaN, veja:

function verificarSoma() {
    let valor1 = parseInt(prompt('Me diga um número inteiro'));
    let valor2 = parseInt(prompt('Me diga outro valor'));
    if(isNaN(valor1) || isNaN(valor2)){
        exibirTextoNaTela('p', `Número inválido ou campo vazio`);
    }else{
        
        let resultado = (valor1 + valor2);
        exibirTextoNaTela('p', `O resultado do valor ${valor1} somado pelo valor ${valor2} é igual a ${resultado}`);
    }
    
    // alert(`O resultado do ${valor1} somado ao ${valor2} é ${resultado}`)
    // console.log('A soma foi clicada');
    // console.log(`A soma do valor ${valor1} + ${valor2} é de ${resultado}`)
}

Esses códigos comentados já estavam no seu código então não mexi neles. Outro ponto, ele verifica se não é NAN portanto vai aceitar zero.

O OU -> ||, compara o dois, se o primeiro valor estiver preenchido e o segundo não, ele já desqualifica, por isso utilizamos o OU ||.

Show, vou por em prática e já retorno se tive bons resultados, muito obrigado pela ajuda.

Renan consegui aplicar com sucesso nas formulas, porém, na do de temperatura não estou conseguindo aplicar a formula NaN, você poderia me ajudar a resolver?

function temp(){
    let temp01 = prompt('Olá, me digita a escala que deseja celsius ou fahrenheit');
    let x = parseInt(prompt("Escolha um valor para ver a diferença entre as temperaturas!"));
    let celsius = ((x * 1.8) + 32);
    let fahrenheit = ((x -32 ) / 1.8);

    if(temp01 === 'celsius'){
        return  exibirTextoNaTela('p', `A diferença da temperatura de ${temp01} para fahrenheit é de ${celsius}`);
    }else if(temp01 === 'fahrenheit'){
        return exibirTextoNaTela('p', `A diferença da temperatura de ${temp01} para celsius é de ${fahrenheit}`);
    }else{
        return "Escala inválida";
    }
}

Opa Luis.

Tenta envolver esse if que você já tem com outro if, e compara se o campo é vazio para o texto: temp01 == ''", OU || se o valor numérico é NaN com isNaN(x) seria campo vazio para o número, Se for isso exibe Valor inválido ou campo vazio senão else faz os cálculos, veja:

function temp(){
    let temp01 = prompt('Olá, me digita a escala que deseja celsius ou fahrenheit');
    let x = parseInt(prompt("Escolha um valor para ver a diferença entre as temperaturas!"));
    let celsius = ((x * 1.8) + 32);
    let fahrenheit = ((x -32 ) / 1.8);

    if(temp01 == '' || isNaN(x)){
        exibirTextoNaTela('p', `Valor inválido ou campo vazio.`);
    }else{
        if(temp01 === 'celsius'){
            exibirTextoNaTela('p', `A diferença da temperatura de ${temp01} para fahrenheit é de ${celsius}`);
      }else if(temp01 === 'fahrenheit'){
           exibirTextoNaTela('p', `A diferença da temperatura de ${temp01} para celsius é de ${fahrenheit}`);
      }else{
          //return "Escala inválida";
           exibirTextoNaTela('p', `Valor inválida ou campo vazio.`);
  
      }
        
    }
    
}
solução!

Show, vou testar aqui, cheguei a usar o If, mas tinha posto if else, acho que pode ter dado errado por causa disso, e o == ainda estou me acostumando usar, obrigado pela ajuda, assim que treinar aqui aviso se deu certo

Renan o código funcionou, muito obrigado, eu não sabia que poderia formar o código dessa forma, vou utilizar a mesma lógica em outros projetos, gratidão.

Que bom que funcionou certinho. Fico feliz em ajudar. É assim mesmo existem várias formas de resolver um mesmo problema. É testar a lógica do if e ver o resultado e ir ajustando. Uma dica é usar console.log quando for aplicar o if e else, é melhor para ver o resultado.