Language Translator
Language Translator
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.translator-container {
width: 90%;
max-width: 600px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
textarea {
width: 100%;
height: 100px;
margin: 10px 0;
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
select {
width: 45%;
padding: 10px;
margin: 10px 2.5%;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background-color: #45a049;
}
async function translateText() {
const inputText = document.getElementById("inputText").value;
const languageFrom = document.getElementById("languageFrom").value;
const languageTo = document.getElementById("languageTo").value;
if (inputText.trim() === "") {
alert("Please enter some text to translate.");
return;
}
const apiURL = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(inputText)}&langpair=${languageFrom}|${languageTo}`;
try {
const response = await fetch(apiURL);
const data = await response.json();
const translatedText = data.responseData.translatedText;
document.getElementById("outputText").value = translatedText;
} catch (error) {
console.error("Error translating text:", error);
alert("An error occurred while translating the text. Please try again.");
}
}
No comments:
Post a Comment