Language Translator
Language Translator
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: linear-gradient(135deg, #ff4081, #00e5ff);
border-radius: 10px;
width: 90%;
max-width: 600px;
padding: 20px;
text-align: center;
}
.title {
font-size: 2rem;
color: white;
margin-bottom: 20px;
}
.input-container, .output-container {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 1rem;
color: #333;
}
textarea:focus {
outline: none;
border-color: #00e5ff;
}
select {
width: 100%;
padding: 10px;
border-radius: 5px;
margin-top: 10px;
font-size: 1rem;
background-color: white;
color: #333;
border: 1px solid #ddd;
}
button {
padding: 10px 20px;
background-color: #00e5ff;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #ff4081;
}
footer {
margin-top: 20px;
color: white;
font-size: 0.8rem;
}
document.getElementById('translateBtn').addEventListener('click', async function() {
const sourceText = document.getElementById('sourceText').value;
const sourceLang = document.getElementById('sourceLang').value;
const targetLang = document.getElementById('targetLang').value;
if (!sourceText.trim()) {
alert("Please enter some text to translate.");
return;
}
const url = 'https://libretranslate.de/translate';
const requestBody = {
q: sourceText,
source: sourceLang,
target: targetLang,
format: 'text'
};
try {
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestBody)
});
if (response.ok) {
const data = await response.json();
document.getElementById('translatedText').value = data.translatedText;
} else {
alert("Error in translation. Please try again later.");
}
} catch (error) {
alert("Error connecting to the translation service.");
console.error(error);
}
});
