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;