Language Translator Tool with colorful styling and all its features use any free library...

 

Language Translator Tool

English Spanish French German Chinese Russian Arabic Spanish French German Chinese Russian Arabic English

Translated Text:

* { box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #e8f0fe; color: #333; margin: 0; padding: 20px; } .container { max-width: 600px; margin: 0 auto; padding: 20px; border-radius: 8px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #4CAF50; } textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace; margin: 10px 0; resize: none; } select { width: 48%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 1%; } button { display: block; width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #45a049; } .output { margin-top: 20px; } #status { text-align: center; margin-top: 10px; font-weight: bold; } document.getElementById('translate-btn').addEventListener('click', function() { const inputText = document.getElementById('input-text').value; const fromLang = document.getElementById('from-lang').value; const toLang = document.getElementById('to-lang').value; const outputText = document.getElementById('output-text'); const status = document.getElementById('status'); if (!inputText) { status.innerText = "Please enter text to translate."; return; } status.innerText = "Translating..."; outputText.value = ''; fetch('https://libretranslate.com/translate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ q: inputText, source: fromLang, target: toLang, format: "text" }) }) .then(response => response.json()) .then(data => { outputText.value = data.translatedText; status.innerText = "Translation complete!"; }) .catch(err => { console.error(err); status.innerText = "Error during translation."; }); });