<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Translation App</title>
</head>
<body>
<h1>Translation App</h1>
<label for="inputText">Enter text in Spanish:</label>
<textarea id="inputText" rows="4" cols="50"></textarea><br>
<button onclick="translateText()">Translate</button>
<p id="outputText">Translated text will appear here.</p>
<script>
function translateText() {
var inputText = document.getElementById('inputText').value;
var apiUrl = 'https://api.mymemory.translated.net/get?q=' + encodeURIComponent(inputText) + '&langpair=es|fr';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
var translatedText = data.responseData.translatedText || 'Translation not available';
document.getElementById('outputText').innerText = 'Translated: ' + translatedText;
})
.catch(error => {
console.error('Error fetching translation:', error);
});
}
</script>
</body>
</html>
Comments
Post a Comment