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

pensamento-gg

Referente ao curso Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD, no capítulo Diretivas e atividade Estilizando com ngClass

por Aécio Felipe de Barros Sampaio
| 121.6k xp | 17 posts

Boa tarde, criei uma classe também para quando o texto for maior que 512 caracteres chamada: pensamento-gg. Gostaria de saber se a lógica está legal assim, ou como pode ser otimizada, segue o print de como ficou e o código (também já alterei o CSS do media queries pra ficar responsivo): 

  larguraPensamento(): string {
    if (this.pensamento.conteudo.length >= 256 && this.pensamento.conteudo.length <= 512){
      return 'pensamento-g';
    } else if (this.pensamento.conteudo.length >= 512){
      return 'pensamento-gg';
    }
    return 'pensamento-p';    
  }

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!
por Larissa Dubiella
| 1333.7k xp | 2813 posts
Alura Scuba Team Monitora Escola Semente | Fórum Ops

Oi, Aécio! Tudo bem por aí?

Legal que você adicionou mais uma possibilidade ao seu projeto :)

Para dar uma melhoradinha na lógica, você pode alterar a ordem de verificação das condições de tamanho e começar pelo maior (pensamento-gg). Assim, não é necessário fazer a verificação de duas condições dentro do primeiro if. Além disso, no seu código, o valor 512 está entrando tanto na primeira condição, quanto na segunda. Essa alteração também resolveria esse problema. Seria algo mais ou menos assim: 

larguraPensamento(): string {
  const length = this.pensamento.conteudo.length;
  if (length >= 512) {
    return 'pensamento-gg';
  } else if (length >= 256) {
    return 'pensamento-g';
  }
  return 'pensamento-p';    
}

Se precisar de uma mãozinha, estou por aqui. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!