import React, { useEffect } from "react";
import countries from "./data.js";
const Translate = () => {
useEffect(() => {
const fromText = document.querySelector(".from-text");
const toText = document.querySelector(".to-text");
const exchageIcon = document.querySelector(".exchange");
const selectTag = document.querySelectorAll("select");
const icons = document.querySelectorAll(".row i");
const translateBtn = document.querySelector("button");
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 = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`;
tag.insertAdjacentHTML("beforeend", option);
}
});
exchageIcon.addEventListener("click", () => {
console.log("helo");
let tempText = fromText.value;
let tempLang = selectTag[0].value;
console.log(tempText);
console.log(tempLang);
fromText.value = toText.value;
toText.value = tempText;
selectTag[0].value = selectTag[1].value;
selectTag[1].value = tempLang;
});
fromText.addEventListener("keyup", () => {
if (!fromText.value) {
toText.value = "";
}
});
translateBtn.addEventListener("click", async () => {
let text = fromText.value.trim();
let translateFrom = selectTag[0].value;
let translateTo = selectTag[1].value;
if (!text) return;
toText.setAttribute("placeholder", "Translating...");
try {
const response = await
fetch(`http:
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const translatedText = await response.text();
toText.value = translatedText;
toText.setAttribute("placeholder", "Translation");
} catch (error) {
console.error("Fetch error:", error);
toText.setAttribute("placeholder", "Error in translation");
}
});
icons.forEach((icon) => {
icon.addEventListener("click", ({ target }) => {
if (!fromText.value || !toText.value) return;
if (target.classList.contains("fa-copy")) {
if (target.id === "from") {
navigator.clipboard.writeText(fromText.value);
} else {
navigator.clipboard.writeText(toText.value);
}
} else {
let utterance;
if (target.id === "from") {
utterance = new SpeechSynthesisUtterance(fromText.value);
utterance.lang = selectTag[0].value;
} else {
utterance = new SpeechSynthesisUtterance(toText.value);
utterance.lang = selectTag[1].value;
}
speechSynthesis.speak(utterance);
}
});
});
}, []);
return (
<>
<div className="above-container ">
<img
className="above-container-content"
alt="GeeksforGeeks Logo"
/>
<h1 className="above-container-content">Translate</h1>
</div>
<div className="container">
<div className="wrapper">
<div className="text-input">
<textarea
spellCheck="false"
className="from-text"
placeholder="Enter text"
></textarea>
<textarea
spellCheck="false"
readOnly
disabled
className="to-text"
placeholder="Translation"
></textarea>
</div>
<ul className="controls">
<li className="row from">
<div className="icons">
<i id="from" className="fas fa-volume-up"></i>
<i id="from" className="fas fa-copy"></i>
</div>
<select></select>
</li>
<li className="exchange">
<i className="fas fa-exchange-alt"></i>
</li>
<li className="row to">
<select></select>
<div className="icons">
<i id="to" className="fas fa-volume-up"></i>
<i id="to" className="fas fa-copy"></i>
</div>
</li>
</ul>
</div>
<button>Translate Text</button>
</div>
</>
);
};
export default Translate;