diff --git a/src/plays/language-translater/LanguageTranslater.jsx b/src/plays/language-translater/LanguageTranslater.jsx new file mode 100644 index 0000000000..222a24472e --- /dev/null +++ b/src/plays/language-translater/LanguageTranslater.jsx @@ -0,0 +1,215 @@ +import PlayHeader from 'common/playlists/PlayHeader'; +import './styles.css'; +import { useEffect, useState } from 'react'; +import languages from './Languages'; +import copy from './icons/Copy.svg'; +import sound from './icons/sound_max_fill.svg'; +import { debounce } from 'lodash'; +import switchLang from './icons/Horizontal_top_left_main.svg'; + +// WARNING: Do not change the entry componenet name +function LanguageTranslater(props) { + const [inputText, setInputText] = useState('Hello, How are you?'); // set input text for initial render + const [translatedText, setTranslatedText] = useState(''); + const [sourceLang, setSourceLang] = useState('Autodetect'); // set initial sourceLang to Autodetect + const [targetLang, setTargetLang] = useState('fr'); // set initial targetLang to french + + // used useEffect to translation during initial render + useEffect(() => { + translate(); + }, []); + + // fetching the data from API + const translate = async () => { + try { + const response = await fetch( + `https://api.mymemory.translated.net/get?q=${encodeURIComponent(inputText)}!&langpair=${sourceLang}|${targetLang}` + ); + const data = await response.json(); + setTranslatedText(data.responseData.translatedText); + } catch (err) { + window.alert('Error translating text:', err); + } + }; + + // used debounce for limiting the rate at which the translation function is called + const debouncedTranslate = debounce(translate, 300); + + // function for initializing translation + const handleTranslate = () => { + debouncedTranslate(); + }; + + // function to switch source and target languages + const switchLanguage = () => { + if (sourceLang !== 'Autodetect') { + const temp = sourceLang; + setSourceLang(targetLang); + setTargetLang(temp); + } else { + window.alert('Cannot switch language when source language is Autodetect'); + } + }; + + // clipboard copy function + const handleCopy = (text) => { + navigator.clipboard.writeText(text); + }; + + // text to speech function + const handleListen = async (text, language) => { + try { + const utterence = new SpeechSynthesisUtterance(text); + utterence.language = language; + await window.speechSynthesis.speak(utterence); + } catch (err) { + window.alert(`Listening error: `, err); + } + }; + + return ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+
+
+
+ + + + +
+
+