diff --git a/README.md b/README.md index 3ed6348..cd4db08 100644 --- a/README.md +++ b/README.md @@ -518,6 +518,17 @@ In order to run this project you need: +
  • +
    +Language Translator +

    The Language Translator App is a simple and user-friendly web application that allows users to translate text between various languages. It uses the MyMemory Translation API to fetch translations.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/LanguageTranslator/index.html b/Source-Code/LanguageTranslator/index.html new file mode 100644 index 0000000..2359393 --- /dev/null +++ b/Source-Code/LanguageTranslator/index.html @@ -0,0 +1,82 @@ + + + + + + Language Translator App + + + +
    +

    Language Translator

    +
    + +
    + + + +
    + +
    +
    + + + diff --git a/Source-Code/LanguageTranslator/script.js b/Source-Code/LanguageTranslator/script.js new file mode 100644 index 0000000..ee14549 --- /dev/null +++ b/Source-Code/LanguageTranslator/script.js @@ -0,0 +1,32 @@ +const translateButton = document.getElementById('translateButton'); +const sourceText = document.getElementById('sourceText'); +const translatedText = document.getElementById('translatedText'); +const sourceLang = document.getElementById('sourceLang'); +const targetLang = document.getElementById('targetLang'); + +// Replace with your own API key +const API_URL = 'https://api.mymemory.translated.net/get'; + +translateButton.addEventListener('click', async () => { + const text = sourceText.value.trim(); + const fromLang = sourceLang.value; + const toLang = targetLang.value; + + if (!text) { + alert('Please enter text to translate.'); + return; + } + + try { + const response = await fetch( + `${API_URL}?q=${encodeURIComponent(text)}&langpair=${fromLang}|${toLang}`, + ); + const data = await response.json(); + const translated = data.responseData.translatedText; + + translatedText.value = translated; + } catch (error) { + console.error('Error fetching translation:', error); + alert('Failed to translate. Please try again later.'); + } +}); diff --git a/Source-Code/LanguageTranslator/style.css b/Source-Code/LanguageTranslator/style.css new file mode 100644 index 0000000..1d9b219 --- /dev/null +++ b/Source-Code/LanguageTranslator/style.css @@ -0,0 +1,64 @@ +body { + font-family: Arial, sans-serif; + background-color: #a4bef2; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + text-align: center; + background: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + min-width: 500px; +} + +h1 { + font-size: 24px; + margin-bottom: 20px; +} + +.translator { + display: flex; + flex-direction: column; +} + +textarea { + width: 90%; + height: 100px; + margin: 10px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + resize: none; +} + +.controls { + display: flex; + justify-content: space-around; + align-items: center; +} + +select { + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; +} + +button { + padding: 10px 15px; + background-color: #007bff; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #0056b3; +}