В восьмой день конкурса #100daysofMiva я работал над простой моделью переводчика, которая переводит один язык на другой?
Это JS, это волшебство✨?

? Документация по сценарию языкового переводчика

Обзор

Этот код JavaScript предназначен для создания веселого интерактивного переводчика языка! Он использует API MyMemory для перевода текста между разными языками и позволяет менять языки, копировать переводы или даже произносить текст вслух. ??

Функции

• ? Выбор языка: Пользователи могут выбирать из широкого спектра языков, от амхарского до зулу!
• ? Смена языка: Легко переключайтесь между исходным и целевым языками одним нажатием кнопки.
• ? Преобразование текста в речь: Прослушивание оригинального или переведенного текста на выбранном языке.
• ? Копировать в буфер обмена: Скопируйте исходный или переведенный текст одним щелчком мыши.

Разбивка кода

Языковые данные

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

Этот объект содержит доступные языки и соответствующие им коды стран. Например, «en-GB»: «English» объединяет код языка с его названием.

Динамические раскрывающиеся списки

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

Этот код динамически заполняет раскрывающиеся меню всеми языками, перечисленными в объекте стран. В первом раскрывающемся списке по умолчанию используется английский («en-GB»), а во втором — хинди («hi-IN»).

Языковой обмен

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

Нажатие на значок замены позволяет пользователям менять местами текст и выбранные языки между полями «от» и «куда».

Перевод в реальном времени

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

При нажатии кнопки «Перевести» текст отправляется в API MyMemory, и переведенный текст отображается в поле «В текст». Во время ожидания ответа отображается заполнитель «Перевод...».

Преобразование текста в речь и копирование

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

В этом разделе описаны функции преобразования текста в речь и копирования:

• Речь: воспроизведение текста вслух на выбранном языке.
• Копировать: копирование текста в буфер обмена.

Как это работает

1. Выбрать языки ?: выберите языки из раскрывающихся списков.
2. Введите или вставьте текст ✍️: введите текст, который хотите перевести.
3. Перевести ?: Нажмите кнопку «Перевести» и наблюдайте, как происходит волшебство!
4. Поменять, прослушать или скопировать ???: поменяйте языки, прослушайте перевод или скопируйте текст в буфер обмена.

Зависимости

• MyMemory API: функция перевода обеспечивается API MyMemory. Чтобы все работало, убедитесь, что у вас есть активное подключение к Интернету.

Потенциальные улучшения

• Автоопределение языка: автоматическое определение языка вводимого текста.
• Расширенная обработка ошибок: улучшите реакцию на ошибки перевода или сбои API.
• Несколько переводов: показ альтернативных переводов, если они доступны.

Вот пошаговое описание того, как работает код и что он делает:

Шаг 1. Определение доступных языков

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

• Что он делает: этот объект содержит пары «ключ-значение», где ключом является код языка-страны (например, «en-GB» для английского языка), а значением — название языка (например, «English»). ).
• Цель: эти данные используются для заполнения раскрывающихся списков выбора языка, чтобы пользователи могли выбирать исходный и целевой языки.

Шаг 2: Выбор элементов 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"),

• Что он делает: этот код выбирает различные элементы из HTML-документа и сохраняет их в переменных для удобного доступа в дальнейшем.
  • fromText и toText: текстовые области, где пользователи вводят текст и видят перевод.
  • exchageIcon: значок, используемый для переключения языков и текста.
  • selectTag: раскрывающееся меню для выбора языков.
  • значки: значки функций копирования и речи.
  • TranslateBtn: кнопка, запускающая перевод.

Шаг 3. Заполнение раскрывающихся списков языков

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);
    }
});

• Что он делает: этот цикл проходит через объект стран и добавляет каждый язык в качестве опции в раскрывающиеся списки выбора языка.
  • Если раскрывающийся список является первым (id == 0), по умолчанию выбирается английский («en-GB»).
  • Если раскрывающийся список является вторым (id == 1), по умолчанию выбирается хинди («hi-IN»).

Шаг 4. Смена языка и текста

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;
});

• Что она делает: при нажатии на значок замены эта функция меняет местами текст между текстовыми областями «от» и «до», а также между выбранными языками.
  • tempText временно хранит исходный текст из поля from-text.
  • tempLang временно сохраняет исходный язык из первого раскрывающегося списка.
  • Затем слово «from-text» заменяется на «to-text» и наоборот. Выбранные языки также поменяются местами.

Шаг 5: Очистка переведенного текста

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

• Что она делает: если пользователь удаляет весь текст из поля «из текста», эта функция также автоматически очищает поле «в текст».
• Цель: гарантирует, что если входящий текст очищен, перевод также будет очищен, что предотвращает путаницу.

Шаг 6: Перевод текста

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");
    });
});

• Что она делает: При нажатии кнопки «Перевести» эта функция:
  1. Извлекает текст из поля «from-text».
  2. Определяет выбранные языки из раскрывающихся списков.
  3. Отправляет запрос к API MyMemory с текстом и выбранными языками.
  4. Получает перевод от API и отображает его в поле «в текст».
  5. Обновляет текст-заполнитель во время ожидания перевода, чтобы указать, что процесс продолжается.

Краткое содержание

Скрипт позволяет пользователям переводить текст между разными языками с помощью динамического и интерактивного интерфейса. Пользователи могут выбирать языки, вводить текст, переводить его одним щелчком мыши, менять языки и текст, слышать перевод вслух или копировать его в буфер обмена.

Наслаждайтесь игрой на разных языках и сделайте свой процесс перевода увлекательным и интерактивным! ?? До следующего ?✌?✨

Посмотрите здесь
https://app.marvelly.com.ng/100daysofMiva/day-8/

Исходный код
https://github.com/Marvellye/100daysofMiva/blob/main/Projects/Day_8-Simple_language_translator