Language Translator Tool
Creating a simple language translator tool using the MyMemory translation service involves using their public API. Below is a complete implementation using HTML, CSS, and JavaScript that doesn’t require an API key. This tool will allow users to input text, select languages, and get translations.
HTML
```html
Language Translator Tool
```
### CSS (styles.css)
```css
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
}
h1 {
color: #4A90E2;
}
textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #4A90E2;
border-radius: 4px;
resize: none;
}
.controls {
display: flex;
justify-content: space-between;
}
select {
padding: 10px;
border: 1px solid #4A90E2;
border-radius: 4px;
margin: 10px 0;
flex: 1;
margin-right: 10px;
}
button {
background-color: #4A90E2;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #357ABD;
}
.output {
margin-top: 20px;
padding: 10px;
border: 1px solid #4A90E2;
border-radius: 4px;
background-color: #f7f9fc;
}
```
JavaScript (script.js)
```javascript
const translateButton = document.getElementById('translateButton');
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');
const fromLanguage = document.getElementById('fromLanguage');
const toLanguage = document.getElementById('toLanguage');
translateButton.addEventListener('click', () => {
const text = inputText.value;
const fromLang = fromLanguage.value;
const toLang = toLanguage.value;
if (!text) {
outputText.textContent = 'Please enter text to translate.';
return;
}
fetch(`https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${fromLang}|${toLang}`)
.then(response => response.json())
.then(data => {
if (data.responseData.translatedText) {
outputText.textContent = data.responseData.translatedText;
} else {
outputText.textContent = 'Translation failed. Please try again.';
}
})
.catch(error => {
console.error('Error:', error);
outputText.textContent = 'An error occurred. Please try again later.';
});
});
```
How It Works
1. **HTML**: Sets up the structure with a text area for input, language selection dropdowns, and a button to trigger translation.
2. **CSS**: Styles the interface to be colorful and responsive.
3. **JavaScript**: Handles the translation logic by making a request to the MyMemory API, processes the response, and updates the UI with the translated text.
Usage
1. Copy the HTML, CSS, and JavaScript code into their respective files.
2. Open the HTML file in a web browser.
3. Enter the text to be translated, select the source and target languages, and click "Translate" to see the result.
This implementation provides a basic language translation tool that can be easily expanded with additional features like error handling, improved styling, or support for more languages.
Comments
Post a Comment