Dia 8 do desafio de codificação #100daysofMiva e trabalhei em um modelo de tradutor simples que traduz um idioma para outro?
É JS, é mágico✨?

? Documentação de script do tradutor de idiomas

Visão geral

Este código JavaScript foi projetado para criar um tradutor de linguagem divertido e interativo! Ele utiliza a API MyMemory para traduzir texto entre diferentes idiomas e permite trocar idiomas, copiar traduções ou até mesmo falar o texto em voz alta. ??

Características

• ? Seleção de idioma: Os usuários podem escolher entre uma ampla variedade de idiomas, desde amárico até zulu!
• ? Troca de idioma: Troque facilmente entre os idiomas de origem e de destino com o clique de um botão.
• ? Text-to-Speech: Ouça o texto original ou traduzido no idioma selecionado.
• ? Copiar para a área de transferência: Copie o texto original ou traduzido com um único clique.

Detalhamento do código

Dados de idioma

const countries = { /*...*/ } 

Este objeto contém os idiomas disponíveis e seus respectivos códigos de país. Por exemplo, "en-GB": "English" associa o código do idioma ao seu nome.

Menus suspensos dinâmicos

selectTag.forEach((tag, id) => {
    /*...*/
});

Este código preenche dinamicamente os menus suspensos com todos os idiomas listados no objeto de países. O primeiro menu suspenso é padronizado em inglês ("en-GB") e o segundo em hindi ("hi-IN").

Troca de idioma

exchageIcon.addEventListener("click", () => {
    /*...*/
});

Clicar no ícone de troca permite aos usuários trocar o texto e os idiomas selecionados entre os campos "de" e "para".

Tradução em tempo real

translateBtn.addEventListener("click", () => {
    /*...*/
});

Quando o botão "Traduzir" é clicado, o texto é enviado para a API MyMemory e o texto traduzido é exibido no campo "para texto". Enquanto aguarda a resposta, um espaço reservado "Traduzindo..." é mostrado.

Conversão de texto para fala e cópia

icons.forEach(icon => {
    /*...*/
});

Esta seção trata das funcionalidades de conversão de texto em fala e cópia:

• Fala: Reproduz o texto em voz alta no idioma selecionado.
• Copiar: Copia o texto para a área de transferência.

Como funciona

1. Selecionar idiomas ?: Escolha seus idiomas nos menus suspensos.
2. Digite ou cole texto ✍️: Insira o texto que deseja traduzir.
3. Traduzir ?: Clique no botão "Traduzir" e veja a mágica acontecer!
4. Trocar, ouvir ou copiar ???: troque de idioma, ouça a tradução ou copie o texto para sua área de transferência.

Dependências

• API MyMemory: A funcionalidade de tradução é fornecida pela API MyMemory. Certifique-se de ter uma conexão ativa com a Internet para que funcione.

Melhorias potenciais

• Detecção automática de idioma: detecta automaticamente o idioma do texto de entrada.
• Tratamento avançado de erros: melhore a resposta para erros de tradução ou falhas de API.
• Múltiplas traduções: mostre traduções alternativas quando disponíveis.

Aqui está um detalhamento passo a passo de como o código funciona e o que ele faz:

Etapa 1: Definindo os idiomas disponíveis

const countries = { /*...*/ }

• O que faz: Este objeto contém pares de valores-chave onde a chave é um código de idioma-país (como "en-GB" para inglês) e o valor é o nome do idioma (como "Inglês" ).
• Objetivo: esses dados são usados ​​para preencher os menus suspensos de seleção de idioma para que os usuários possam escolher seus idiomas de origem e de destino.

Etapa 2: Seleção de elementos DOM

const fromText = document.querySelector(".from-text"),
      toText = document.querySelector(".to-text"),
      exchageIcon = document.querySelector(".exchange"),
      selectTag = document.querySelectorAll("select"),
      icons = document.querySelectorAll(".row i");
      translateBtn = document.querySelector("button"),

• O que faz: Este código seleciona vários elementos do documento HTML e os armazena em variáveis ​​para fácil acesso posterior.
  • fromText e toText: áreas de texto onde os usuários inserem texto e veem a tradução.
  • exchageIcon: O ícone usado para trocar idiomas e texto.
  • selectTag: os menus suspensos para seleção de idiomas.
  • ícones: ícones para funções de cópia e fala.
  • translateBtn: O botão que aciona a tradução.

Etapa 3: Preencher menus suspensos de idiomas

selectTag.forEach((tag, id) => {
    for (let country_code in countries) {
        let selected = id == 0 ? country_code == "en-GB" ? "selected" : "" : country_code == "hi-IN" ? "selected" : "";
        let option = `${countries[country_code]}`;
        tag.insertAdjacentHTML("beforeend", option);
    }
});

• O que faz: Este loop percorre o objeto de países e adiciona cada idioma como uma opção nos menus suspensos de seleção de idioma.
  • Se o menu suspenso for o primeiro (id == 0), o inglês ("en-GB") será selecionado por padrão.
  • Se o menu suspenso for o segundo (id == 1), Hindi ("hi-IN") será selecionado por padrão.

Etapa 4: Troca de idiomas e texto

exchageIcon.addEventListener("click", () => {
    let tempText = fromText.value,
        tempLang = selectTag[0].value;
    fromText.value = toText.value;
    toText.value = tempText;
    selectTag[0].value = selectTag[1].value;
    selectTag[1].value = tempLang;
});

• O que faz: Quando o ícone de troca é clicado, esta função troca o texto entre as áreas de texto "de" e "para", bem como os idiomas selecionados.
  • tempText retém temporariamente o texto original do campo "from-text".
  • tempLang mantém temporariamente o idioma original do primeiro menu suspenso.
  • O "from-text" é então substituído pelo "to-text" e vice-versa. Os idiomas selecionados também são trocados.

Etapa 5: Limpando o texto traduzido

fromText.addEventListener("keyup", () => {
    if(!fromText.value) {
        toText.value = "";
    }
});

• O que faz: Se o usuário excluir todo o texto do campo "do texto", esta função também limpará automaticamente o campo "para o texto".
• Finalidade: Garante que se o texto de entrada for limpo, a tradução também será limpa, evitando confusão.

Etapa 6: Tradução de texto

translateBtn.addEventListener("click", () => {
    let text = fromText.value.trim(),
        translateFrom = selectTag[0].value,
        translateTo = selectTag[1].value;
    if(!text) return;
    toText.setAttribute("placeholder", "Translating...");
    let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
    fetch(apiUrl).then(res => res.json()).then(data => {
        toText.value = data.responseData.translatedText;
        data.matches.forEach(data => {
            if(data.id === 0) {
                toText.value = data.translation;
            }
        });
        toText.setAttribute("placeholder", "Translation");
    });
});

• O que faz: Quando o botão "Traduzir" é clicado, esta função:
  1. Extrai o texto do campo "do texto".
  2. Identifica os idiomas selecionados nos menus suspensos.
  3. Envia uma solicitação para a API MyMemory com o texto e os idiomas selecionados.
  4. Recebe a tradução da API e a exibe no campo "to-text".
  5. Atualiza o texto do espaço reservado enquanto aguarda a tradução para indicar que o processo está em andamento.

Resumo

O script permite aos usuários traduzir textos entre diferentes idiomas com uma interface dinâmica e interativa. Os usuários podem selecionar idiomas, digitar seu texto, traduzi-lo com um clique, trocar idiomas e texto, ouvir a tradução falada em voz alta ou copiá-la para a área de transferência.

Divirta-se brincando com diferentes idiomas e torne sua jornada de tradução divertida e interativa! ?? Até o próximo ?✌?✨

Confira aqui
https://app.marvelly.com.ng/100daysofMiva/day-8/

Código fonte
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_language_translator