Skip to content

Commit 1ecae28

Browse files
tajulafreentajulafreen
authored
Merge pull request #49 from tajulafreen/Language_Translator
50Projects-HTML-CSS-JavaScript : Language translator
2 parents ed7b713 + 511b689 commit 1ecae28

File tree

4 files changed

+189
-0
lines changed

4 files changed

+189
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -518,6 +518,17 @@ In order to run this project you need:
518518
details>
519519
li>
520520

521+
<li>
522+
<details>
523+
<summary>Language Translatorsummary>
524+
<p>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.p>
525+
<ul>
526+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/LanguageTranslator/">Live Demoa>li>
527+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/LanguageTranslator">Sourcea>li>
528+
ul>
529+
details>
530+
li>
531+
521532
ol>
522533

523534
<p align="right">(<a href="#readme-top">back to topa>)p>

‎Source-Code/LanguageTranslator/index.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Language Translator Apptitle>
7+
<link rel="stylesheet" href="style.css">
8+
head>
9+
<body>
10+
<div class="container">
11+
<h1>Language Translatorh1>
12+
<div class="translator">
13+
<textarea id="sourceText" placeholder="Enter text here">textarea>
14+
<div class="controls">
15+
<select id="sourceLang">
16+
<option value="en">Englishoption>
17+
<option value="es">Spanishoption>
18+
<option value="fr">Frenchoption>
19+
<option value="de">Germanoption>
20+
<option value="it">Italianoption>
21+
<option value="ja">Japaneseoption>
22+
<option value="ko">Koreanoption>
23+
<option value="pt">Portugueseoption>
24+
<option value="ru">Russianoption>
25+
<option value="zh-CN">Chinese (Simplified)option>
26+
<option value="zh-TW">Chinese (Traditional)option>
27+
<option value="vi">Vietnameseoption>
28+
<option value="ar">Arabicoption>
29+
<option value="bn">Bengalioption>
30+
<option value="hi">Hindioption>
31+
<option value="ms">Malayoption>
32+
<option value="th">Thaioption>
33+
<option value="tr">Turkishoption>
34+
<option value="ur">Urduoption>
35+
<option value="fil">Filipinooption>
36+
<option value="id">Indonesianoption>
37+
<option value="pl">Polishoption>
38+
<option value="uk">Ukrainianoption>
39+
<option value="cs">Czechoption>
40+
<option value="hu">Hungarianoption>
41+
<option value="ro">Romanianoption>
42+
<option value="sv">Swedishoption>
43+
<option value="te">Teluguoption>
44+
select>
45+
<button id="translateButton">Translatebutton>
46+
<select id="targetLang">
47+
<option value="en">Englishoption>
48+
<option value="es">Spanishoption>
49+
<option value="fr">Frenchoption>
50+
<option value="de">Germanoption>
51+
<option value="it">Italianoption>
52+
<option value="ja">Japaneseoption>
53+
<option value="ko">Koreanoption>
54+
<option value="pt">Portugueseoption>
55+
<option value="ru">Russianoption>
56+
<option value="zh-CN">Chinese (Simplified)option>
57+
<option value="zh-TW">Chinese (Traditional)option>
58+
<option value="vi">Vietnameseoption>
59+
<option value="ar">Arabicoption>
60+
<option value="bn">Bengalioption>
61+
<option value="hi">Hindioption>
62+
<option value="ms">Malayoption>
63+
<option value="th">Thaioption>
64+
<option value="tr">Turkishoption>
65+
<option value="ur">Urduoption>
66+
<option value="fil">Filipinooption>
67+
<option value="id">Indonesianoption>
68+
<option value="pl">Polishoption>
69+
<option value="uk">Ukrainianoption>
70+
<option value="cs">Czechoption>
71+
<option value="hu">Hungarianoption>
72+
<option value="ro">Romanianoption>
73+
<option value="sv">Swedishoption>
74+
<option value="te">Teluguoption>
75+
select>
76+
div>
77+
<textarea id="translatedText" placeholder="Translated text" readonly>textarea>
78+
div>
79+
div>
80+
<script src="script.js">script>
81+
body>
82+
html>

‎Source-Code/LanguageTranslator/script.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const translateButton = document.getElementById('translateButton');
2+
const sourceText = document.getElementById('sourceText');
3+
const translatedText = document.getElementById('translatedText');
4+
const sourceLang = document.getElementById('sourceLang');
5+
const targetLang = document.getElementById('targetLang');
6+
7+
// Replace with your own API key
8+
const API_URL = 'https://api.mymemory.translated.net/get';
9+
10+
translateButton.addEventListener('click', async () => {
11+
const text = sourceText.value.trim();
12+
const fromLang = sourceLang.value;
13+
const toLang = targetLang.value;
14+
15+
if (!text) {
16+
alert('Please enter text to translate.');
17+
return;
18+
}
19+
20+
try {
21+
const response = await fetch(
22+
`${API_URL}?q=${encodeURIComponent(text)}&langpair=${fromLang}|${toLang}`,
23+
);
24+
const data = await response.json();
25+
const translated = data.responseData.translatedText;
26+
27+
translatedText.value = translated;
28+
} catch (error) {
29+
console.error('Error fetching translation:', error);
30+
alert('Failed to translate. Please try again later.');
31+
}
32+
});

‎Source-Code/LanguageTranslator/style.css

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #a4bef2;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
}
11+
12+
.container {
13+
text-align: center;
14+
background: white;
15+
padding: 20px;
16+
border-radius: 10px;
17+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
18+
min-width: 500px;
19+
}
20+
21+
h1 {
22+
font-size: 24px;
23+
margin-bottom: 20px;
24+
}
25+
26+
.translator {
27+
display: flex;
28+
flex-direction: column;
29+
}
30+
31+
textarea {
32+
width: 90%;
33+
height: 100px;
34+
margin: 10px;
35+
padding: 10px;
36+
border: 1px solid #ccc;
37+
border-radius: 5px;
38+
resize: none;
39+
}
40+
41+
.controls {
42+
display: flex;
43+
justify-content: space-around;
44+
align-items: center;
45+
}
46+
47+
select {
48+
padding: 10px;
49+
border-radius: 5px;
50+
border: 1px solid #ccc;
51+
}
52+
53+
button {
54+
padding: 10px 15px;
55+
background-color: #007bff;
56+
color: white;
57+
border: none;
58+
border-radius: 5px;
59+
cursor: pointer;
60+
}
61+
62+
button:hover {
63+
background-color: #0056b3;
64+
}

0 commit comments

Comments
 (0)