Skip to content

Commit 0c86bbb

Browse files
tajulafreentajulafreen
committed
Add a project
1 parent efec664 commit 0c86bbb

File tree

3 files changed

+173
-5
lines changed

3 files changed

+173
-5
lines changed

‎Source-Code/LanguageTranslator/index.html

+76-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,82 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Document</title>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Language Translator App</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
89
<body>
9-
10+
<div class="container">
11+
<h1>Language Translator</h1>
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">English</option>
17+
<option value="es">Spanish</option>
18+
<option value="fr">French</option>
19+
<option value="de">German</option>
20+
<option value="it">Italian</option>
21+
<option value="ja">Japanese</option>
22+
<option value="ko">Korean</option>
23+
<option value="pt">Portuguese</option>
24+
<option value="ru">Russian</option>
25+
<option value="zh-CN">Chinese (Simplified)</option>
26+
<option value="zh-TW">Chinese (Traditional)</option>
27+
<option value="vi">Vietnamese</option>
28+
<option value="ar">Arabic</option>
29+
<option value="bn">Bengali</option>
30+
<option value="hi">Hindi</option>
31+
<option value="ms">Malay</option>
32+
<option value="th">Thai</option>
33+
<option value="tr">Turkish</option>
34+
<option value="ur">Urdu</option>
35+
<option value="fil">Filipino</option>
36+
<option value="id">Indonesian</option>
37+
<option value="pl">Polish</option>
38+
<option value="uk">Ukrainian</option>
39+
<option value="cs">Czech</option>
40+
<option value="hu">Hungarian</option>
41+
<option value="ro">Romanian</option>
42+
<option value="sv">Swedish</option>
43+
<option value="te">Telugu</option>
44+
</select>
45+
<button id="translateButton">Translate</button>
46+
<select id="targetLang">
47+
<option value="en">English</option>
48+
<option value="es">Spanish</option>
49+
<option value="fr">French</option>
50+
<option value="de">German</option>
51+
<option value="it">Italian</option>
52+
<option value="ja">Japanese</option>
53+
<option value="ko">Korean</option>
54+
<option value="pt">Portuguese</option>
55+
<option value="ru">Russian</option>
56+
<option value="zh-CN">Chinese (Simplified)</option>
57+
<option value="zh-TW">Chinese (Traditional)</option>
58+
<option value="vi">Vietnamese</option>
59+
<option value="ar">Arabic</option>
60+
<option value="bn">Bengali</option>
61+
<option value="hi">Hindi</option>
62+
<option value="ms">Malay</option>
63+
<option value="th">Thai</option>
64+
<option value="tr">Turkish</option>
65+
<option value="ur">Urdu</option>
66+
<option value="fil">Filipino</option>
67+
<option value="id">Indonesian</option>
68+
<option value="pl">Polish</option>
69+
<option value="uk">Ukrainian</option>
70+
<option value="cs">Czech</option>
71+
<option value="hu">Hungarian</option>
72+
<option value="ro">Romanian</option>
73+
<option value="sv">Swedish</option>
74+
<option value="te">Telugu</option>
75+
</select>
76+
</div>
77+
<textarea id="translatedText" placeholder="Translated text" readonly></textarea>
78+
</div>
79+
</div>
80+
<script src="script.js"></script>
1081
</body>
11-
</html>
82+
</html>

‎Source-Code/LanguageTranslator/script.js

+32
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

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
}
65+

0 commit comments

Comments
 (0)