Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Estilizar conteúdo da função

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Execute códigos diferentes dependendo da condição e atividade Trabalhando com condições

por Guilherme Martins Barradas
| 22.1k xp | 4 posts
Aprendiz em Desenvolvimento de Sistemas

Queria estilizar as mensagens que irão vir na função mostra() de dentro da condicional. Queria que, se fosse superior, viesse verde. Inferior, vermelho. Similar, amarelo. Porém, tentei passar a tag <span></span> e <style></style> e não obtive sucesso. Tem algum jeito de eu estilizar com CSS inline? 

<meta charset="UTF-8">

<script>
    function pulaLinha() {

        document.write("<br>");
        document.write("<br>");
    }

    function mostra(frase) {

        document.write(frase);
        pulaLinha();
    }

    var vitorias = parseInt(prompt("Escreva o número de vitórias: "));
    var empates = parseInt(prompt("Escreva o número de empates: "));

    var pontos = vitorias * 3 + empates

    mostra("A pontuação do seu time é: " + pontos);


    if (pontos > 27) {
        mostra("Desempenho superior ao da última temporada")
    } else if (pontos < 27) {
        mostra("Desempenho inferior ao da última temporada")
    } else if (pontos == 27) {
        mostra("Desempenho similar ao da última temporada")
    }

</script>
1 resposta
solução!
por Guilherme Henrique
| 733.8k xp | 2109 posts
Instrutor

Oi Guilherme

Você pode fazer sim a implementação com o CSS inline, uma solução seria adicionar um parâmetro a mais e passar quando chamar a função mostra, assim:

<meta charset="UTF-8" />

<script>
  function pulaLinha() {
    document.write('<br>');
    document.write('<br>');
  }

  function mostra(frase, cor) {
    document.write(`<span style="color: ${cor}" >${frase}</span>`);
    pulaLinha();
  }

  var vitorias = parseInt(prompt('Escreva o número de vitórias: '));
  var empates = parseInt(prompt('Escreva o número de empates: '));

  var pontos = vitorias * 3 + empates;

  mostra('A pontuação do seu time é: ' + pontos);

  if (pontos > 27) {
    mostra('Desempenho superior ao da última temporada', 'green');
  } else if (pontos < 27) {
    mostra('Desempenho inferior ao da última temporada', 'red');
  } else if (pontos == 27) {
    mostra('Desempenho similar ao da última temporada', 'yellow');
  }
</script>

Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.