Entrar Ainda não tem acesso?
2
respostas

[Projeto] Criar versão para selecionar idioma

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos

por Estudante
| 219k xp | 131 posts

Depois de alguns meses em terminar esses quatro cursos de HTML com CSS para montar um currículo, gostaria de repetir o meu projeto, porém com opção de mudar todo o texto para inglês ou português. Tive algumas ideias para isso depois de continuar minha formação em HTML básico: https://cursos.alura.com.br/course/html-css-responsividade-mobile-first. Posso fazer com que um botão no header remova o texto e português para aparecer o texto em inglês. Estive fazendo isso nessas últimas horas como treinamento de HTML e CSS. Fiquei com algumas dúvidas sobre a melhor maneira de se fazer. Desejarei mostrar meu desenvolvimento nesse fórum aos instrutores interessados.

Existe uma maneira mais fácil de fazer uma alternância entre idiomas do que ocultar/aparecer pedaços do código para cada texto em português e inglês? Por exemplo:


.cabecalho__english:not(:checked) ~ .cabecalho > .cabecalho__menu > .cabecalho__menu__link > .cabecalho__menu-port,

.cabecalho__english:not(:checked) ~ .apresentacao > .apresentacao__conteudo > .apresentacao__conteudo__titulo > .apresentacao__conteudo__titulo-port,

.cabecalho__english:not(:checked) ~ .apresentacao > .apresentacao__conteudo > .apresentacao__conteudo__texto > .apresentacao__conteudo__texto-port,

.cabecalho__english:not(:checked) ~ .apresentacao > .apresentacao__conteudo > .apresentacao__links > .apresentacao__links_subtitulo > .apresentacao__links_subtitulo-port,

.cabecalho__english:not(:checked) ~ .rodape > p > .rodape-port
{
    display: none;
}

.cabecalho__english:checked ~  .cabecalho > .cabecalho__menu > .cabecalho__menu__link > .cabecalho__menu-eng,

.cabecalho__english:checked ~ .apresentacao > .apresentacao__conteudo > .apresentacao__conteudo__titulo > .apresentacao__conteudo__titulo-eng,

.cabecalho__english:checked ~ .apresentacao > .apresentacao__conteudo > .apresentacao__conteudo__description > .apresentacao__conteudo__description-eng,

.cabecalho__english:checked ~ .apresentacao > .apresentacao__conteudo > .apresentacao__links > .apresentacao__links_subtitulo > .apresentacao__links_subtitle-eng,

.cabecalho__english:checked ~ .rodape > p > .rodape-eng  {
    display: none;
}

Usei pseudoclasses :not(:checked) e :checked para ocultar ou aparecer pedaços do texto ao clicar na checkbox cabecalho__english. Contudo, não gostaria de usar tantos seletores para fazer isso. Esse é o link da fonte do projeto: https://github.com/andradeSerafim/curriculo .

2 respostas
por Estudante
| 219k xp | 131 posts

Eu realizei uma versão do curso na qual eu fiz meu currículo na qual eu posso alternar entre dois idiomas: https://andradeserafim.github.io/curriculo/ Gostaria de algumas sugestões sobre qual maneira poderia fazer melhor.

por Maria Eduarda Gonçalves Furlan
| 1938.8k xp | 6655 posts
Instrutor Monitora de Fórum | Alura

Olá, Akhenaton! Tudo bem?

A abordagem que você utilizou com as pseudo-classes :not(:checked) e :checked é uma forma válida de ocultar ou exibir os elementos de acordo com a seleção do idioma. Essa solução funciona bem para o propósito pretendido e é uma ótima maneira de aprender e praticar o uso de pseudo-classes em CSS. No entanto, se você deseja explorar outras linguagens ou tornar o código mais flexível para futuras atualizações, uma abordagem usando JavaScript e classes pode ser uma alternativa interessante.

Por exemplo, você pode utilizar o seguinte código em JavaScript para adicionar e remover a classe .hidden dos elementos que deseja ocultar ou exibir, dependendo da seleção do idioma:

<input type="checkbox" id="toggle-language" class="cabecalho__english">

<div class="cabecalho">
  <div class="cabecalho__menu">
    <a href="#" class="cabecalho__menu__link cabecalho__menu-port">Português</a>
    <a href="#" class="cabecalho__menu__link cabecalho__menu-eng hidden">English</a>
  </div>
</div>

<script>
  const toggleLanguage = document.getElementById('toggle-language');
  const englishElements = document.querySelectorAll('.cabecalho__menu-eng');

  toggleLanguage.addEventListener('change', function() {
    englishElements.forEach(function(element) {
      element.classList.toggle('hidden');
    });
  });
</script>

Nesse exemplo, utilizamos JavaScript para adicionar a classe .hidden aos elementos com a classe .cabecalho__menu-eng quando o checkbox toggle-language não está marcado, e removemos essa classe quando o checkbox está marcado.

Essa abordagem permite que você adicione ou remova elementos sem precisar alterar o CSS, apenas manipulando as classes com JavaScript.

Espero ter ajudado.

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