I am creating a language translator using google APIs and I want to add auto language switch. If I type hindi in the box it should automatically transalated to english and if I type english it should transalted to hindi.
—– code below is my js file —————-
const dropdowns = document.querySelectorAll(".dropdown-container"),
inputLanguageDropdown = document.querySelector("#input-language"),
outputLanguageDropdown = document.querySelector("#output-language");
function populateDropdown(dropdown, options) {
dropdown.querySelector("ul").innerHTML = "";
options.forEach((option) => {
const li = document.createElement("li");
const title = option.name + " (" + option.native + ")";
li.innerHTML = title;
li.dataset.value = option.code;
li.classList.add("option");
dropdown.querySelector("ul").appendChild(li);
});
}
populateDropdown(inputLanguageDropdown, languages);
populateDropdown(outputLanguageDropdown, languages);
dropdowns.forEach((dropdown) => {
dropdown.addEventListener("click", (e) => {
dropdown.classList.toggle("active");
});
dropdown.querySelectorAll(".option").forEach((item) => {
item.addEventListener("click", (e) => {
//remove active class from current dropdowns
dropdown.querySelectorAll(".option").forEach((item) => {
item.classList.remove("active");
});
item.classList.add("active");
const selected = dropdown.querySelector(".selected");
selected.innerHTML = item.innerHTML;
selected.dataset.value = item.dataset.value;
translate();
});
});
});
document.addEventListener("click", (e) => {
dropdowns.forEach((dropdown) => {
if (!dropdown.contains(e.target)) {
dropdown.classList.remove("active");
}
});
});
const swapBtn = document.querySelector(".swap-position"),
inputLanguage = inputLanguageDropdown.querySelector(".selected"),
outputLanguage = outputLanguageDropdown.querySelector(".selected"),
inputTextElem = document.querySelector("#input-text"),
outputTextElem = document.querySelector("#output-text");
swapBtn.addEventListener("click", (e) => {
const temp = inputLanguage.innerHTML;
inputLanguage.innerHTML = outputLanguage.innerHTML;
outputLanguage.innerHTML = temp;
const tempValue = inputLanguage.dataset.value;
inputLanguage.dataset.value = outputLanguage.dataset.value;
outputLanguage.dataset.value = tempValue;
//swap text
const tempInputText = inputTextElem.value;
inputTextElem.value = outputTextElem.value;
outputTextElem.value = tempInputText;
translate();
});
function translate() {
const inputText = inputTextElem.value;
const inputLanguage =
inputLanguageDropdown.querySelector(".selected").dataset.value;
const outputLanguage =
outputLanguageDropdown.querySelector(".selected").dataset.value;
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${inputLanguage}&tl=${outputLanguage}&dt=t&q=${encodeURI(
inputText
)}`;
fetch(url)
.then((response) => response.json())
.then((json) => {
console.log(json);
outputTextElem.value = json[0].map((item) => item[0]).join("");
})
.catch((error) => {
console.log(error);
});
}
inputTextElem.addEventListener("input", (e) => {
//limit input to 5000 characters
if (inputTextElem.value.length > 5000) {
inputTextElem.value = inputTextElem.value.slice(0, 5000);
}
translate();
});
const uploadDocument = document.querySelector("#upload-document"),
uploadTitle = document.querySelector("#upload-title");
uploadDocument.addEventListener("change", (e) => {
const file = e.target.files[0];
if (
file.type === "application/pdf" ||
file.type === "text/plain" ||
file.type === "application/msword" ||
file.type ===
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
) {
uploadTitle.innerHTML = file.name;
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (e) => {
inputTextElem.value = e.target.result;
translate();
};
} else {
alert("Please upload a valid file");
}
});
const downloadBtn = document.querySelector("#download-btn");
downloadBtn.addEventListener("click", (e) => {
const outputText = outputTextElem.value;
const outputLanguage =
outputLanguageDropdown.querySelector(".selected").dataset.value;
if (outputText) {
const blob = new Blob([outputText], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.download = `translated-to-${outputLanguage}.txt`;
a.href = url;
a.click();
}
});
const darkModeCheckbox = document.getElementById("dark-mode-btn");
darkModeCheckbox.addEventListener("change", () => {
document.body.classList.toggle("dark");
});
const inputChars = document.querySelector("#input-chars");
inputTextElem.addEventListener("input", (e) => {
inputChars.innerHTML = inputTextElem.value.length;
});
I tried switch statement but it didn’t worked well