Spaces:
Running
Running
File size: 2,915 Bytes
038b679 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Translator Test</title>
</head>
<body>
<style>
.textAreas {
display: flex;
}
textarea {
padding: 10px;
margin-right: 10px;
}
.dropdown {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
appearance: none;
/* Remove default arrow */
-moz-appearance: none;
/* Firefox */
-webkit-appearance: none;
}
.dropdown:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.dropdown option {
padding: 10px;
}
</style>
<h1 id="word">Google Translator Test</h1>
<script src="https://cdn.statically.io/gh/vidya-hub/open-google-translator/main/dist/bundle.js"></script>
<div class="dropdown-container">
<select id="languageDropdown" class="dropdown">
<option value="">-- Select Language --</option>
</select>
</div>
<br />
<br />
<div class="textAreas">
<textarea id="textToTranslate" placeholder="Enter text to translate" onchange="" cols="40" rows="5"></textarea>
<textarea id="textToDisplay" placeholder="Translated Text" onchange="" cols="40" rows="5"></textarea>
</div>
<script>
const languages = openGoogleTranslator.supportedLanguages();
var dropdown = document.getElementById("languageDropdown");
for (const code in languages) {
if (languages.hasOwnProperty(code)) {
var option = document.createElement("option");
option.value = code;
option.text = languages[code];
dropdown.appendChild(option);
}
}
async function testTranslation() {
var textToTranslate = document.getElementById("textToTranslate");
var textToDisplay = document.getElementById("textToDisplay");
var dropdown = document.getElementById("languageDropdown");
var selectedLanguageCode = dropdown.value;
var enteredText = textToTranslate.value;
var sentenceToTranslate = [enteredText];
var translatedData = await openGoogleTranslator.TranslateLanguageData({
fromLanguage: "en",
toLanguage:
selectedLanguageCode.length == 0 ? "en" : selectedLanguageCode,
listOfWordsToTranslate: sentenceToTranslate,
});
textToDisplay.value = translatedData[0]["translation"];
console.log(translatedData[0]["translation"]);
}
</script>
<br />
<br />
<button id="trnButton" style="
padding: 10px 20px;
font-size: 16px;
border-radius: 8px;
background-color: #3498db;
color: #fff;
border: none;
cursor: pointer;
" onclick="testTranslation()">
Translate
</button>
</body>
</html> |