Skip to content

Commit 457cf33

Browse files
codeNaitikcodeNaitik
committed
transalate
0 parents  commit 457cf33

File tree

5 files changed

+446
-0
lines changed

5 files changed

+446
-0
lines changed

‎TS.JS

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const fromText = document.querySelector(".from-text"),
2+
toText = document.querySelector(".to-text"),
3+
exchageIcon = document.querySelector(".exchange"),
4+
selectTag = document.querySelectorAll("select"),
5+
icons = document.querySelectorAll(".row i");
6+
(translateBtn = document.querySelector("button")),
7+
selectTag.forEach((tag, id) => {
8+
for (let country_code in countries) {
9+
let selected =
10+
id == 0
11+
? country_code == "en-GB"
12+
? "selected"
13+
: ""
14+
: country_code == "hi-IN"
15+
? "selected"
16+
: "";
17+
let option = `<option ${selected} value="${country_code}">${countries[country_code]}</option>`;
18+
tag.insertAdjacentHTML("beforeend", option);
19+
}
20+
});
21+
22+
exchageIcon.addEventListener("click", () => {
23+
let tempText = fromText.value,
24+
tempLang = selectTag[0].value;
25+
fromText.value = toText.value;
26+
toText.value = tempText;
27+
selectTag[0].value = selectTag[1].value;
28+
selectTag[1].value = tempLang;
29+
});
30+
31+
fromText.addEventListener("keyup", () => {
32+
if (!fromText.value) {
33+
toText.value = "";
34+
}
35+
});
36+
37+
translateBtn.addEventListener("click", () => {
38+
let text = fromText.value.trim(),
39+
translateFrom = selectTag[0].value,
40+
translateTo = selectTag[1].value;
41+
if (!text) return;
42+
toText.setAttribute("placeholder", "Translating...");
43+
let apiUrl = `https://api.mymemory.translated.net/get?q=${text}&langpair=${translateFrom}|${translateTo}`;
44+
fetch(apiUrl)
45+
.then((res) => res.json())
46+
.then((data) => {
47+
toText.value = data.responseData.translatedText;
48+
data.matches.forEach((data) => {
49+
if (data.id === 0) {
50+
toText.value = data.translation;
51+
}
52+
});
53+
toText.setAttribute("placeholder", "Translation");
54+
});
55+
});
56+
57+
icons.forEach((icon) => {
58+
icon.addEventListener("click", ({ target }) => {
59+
if (!fromText.value || !toText.value) return;
60+
if (target.classList.contains("fa-copy")) {
61+
if (target.id == "from") {
62+
navigator.clipboard.writeText(fromText.value);
63+
} else {
64+
navigator.clipboard.writeText(toText.value);
65+
}
66+
} else {
67+
let utterance;
68+
if (target.id == "from") {
69+
utterance = new SpeechSynthesisUtterance(fromText.value);
70+
utterance.lang = selectTag[0].value;
71+
} else {
72+
utterance = new SpeechSynthesisUtterance(toText.value);
73+
utterance.lang = selectTag[1].value;
74+
}
75+
speechSynthesis.speak(utterance);
76+
}
77+
});
78+
});

‎countries.js

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
const countries = {
2+
"am-ET": "Amharic",
3+
"ar-SA": "Arabic",
4+
"be-BY": "Bielarus",
5+
"bem-ZM": "Bemba",
6+
"bi-VU": "Bislama",
7+
"bjs-BB": "Bajan",
8+
"bn-IN": "Bengali",
9+
"bo-CN": "Tibetan",
10+
"br-FR": "Breton",
11+
"bs-BA": "Bosnian",
12+
"ca-ES": "Catalan",
13+
"cop-EG": "Coptic",
14+
"cs-CZ": "Czech",
15+
"cy-GB": "Welsh",
16+
"da-DK": "Danish",
17+
"dz-BT": "Dzongkha",
18+
"de-DE": "German",
19+
"dv-MV": "Maldivian",
20+
"el-GR": "Greek",
21+
"en-GB": "English",
22+
"es-ES": "Spanish",
23+
"et-EE": "Estonian",
24+
"eu-ES": "Basque",
25+
"fa-IR": "Persian",
26+
"fi-FI": "Finnish",
27+
"fn-FNG": "Fanagalo",
28+
"fo-FO": "Faroese",
29+
"fr-FR": "French",
30+
"gl-ES": "Galician",
31+
"gu-IN": "Gujarati",
32+
"ha-NE": "Hausa",
33+
"he-IL": "Hebrew",
34+
"hi-IN": "Hindi",
35+
"hr-HR": "Croatian",
36+
"hu-HU": "Hungarian",
37+
"id-ID": "Indonesian",
38+
"is-IS": "Icelandic",
39+
"it-IT": "Italian",
40+
"ja-JP": "Japanese",
41+
"kk-KZ": "Kazakh",
42+
"km-KM": "Khmer",
43+
"kn-IN": "Kannada",
44+
"ko-KR": "Korean",
45+
"ku-TR": "Kurdish",
46+
"ky-KG": "Kyrgyz",
47+
"la-VA": "Latin",
48+
"lo-LA": "Lao",
49+
"lv-LV": "Latvian",
50+
"men-SL": "Mende",
51+
"mg-MG": "Malagasy",
52+
"mi-NZ": "Maori",
53+
"ms-MY": "Malay",
54+
"mt-MT": "Maltese",
55+
"my-MM": "Burmese",
56+
"ne-NP": "Nepali",
57+
"niu-NU": "Niuean",
58+
"nl-NL": "Dutch",
59+
"no-NO": "Norwegian",
60+
"ny-MW": "Nyanja",
61+
"ur-PK": "Pakistani",
62+
"pau-PW": "Palauan",
63+
"pa-IN": "Panjabi",
64+
"ps-PK": "Pashto",
65+
"pis-SB": "Pijin",
66+
"pl-PL": "Polish",
67+
"pt-PT": "Portuguese",
68+
"rn-BI": "Kirundi",
69+
"ro-RO": "Romanian",
70+
"ru-RU": "Russian",
71+
"sg-CF": "Sango",
72+
"si-LK": "Sinhala",
73+
"sk-SK": "Slovak",
74+
"sm-WS": "Samoan",
75+
"sn-ZW": "Shona",
76+
"so-SO": "Somali",
77+
"sq-AL": "Albanian",
78+
"sr-RS": "Serbian",
79+
"sv-SE": "Swedish",
80+
"sw-SZ": "Swahili",
81+
"ta-LK": "Tamil",
82+
"te-IN": "Telugu",
83+
"tet-TL": "Tetum",
84+
"tg-TJ": "Tajik",
85+
"th-TH": "Thai",
86+
"ti-TI": "Tigrinya",
87+
"tk-TM": "Turkmen",
88+
"tl-PH": "Tagalog",
89+
"tn-BW": "Tswana",
90+
"to-TO": "Tongan",
91+
"tr-TR": "Turkish",
92+
"uk-UA": "Ukrainian",
93+
"uz-UZ": "Uzbek",
94+
"vi-VN": "Vietnamese",
95+
"wo-SN": "Wolof",
96+
"xh-ZA": "Xhosa",
97+
"yi-YD": "Yiddish",
98+
"zu-ZA": "Zulu",
99+
};

‎translate.css

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
/* Import Google Font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
body{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
padding: 0 10px;
14+
min-height: 100vh;
15+
background: #5372F0;
16+
}
17+
.container{
18+
max-width: 690px;
19+
width: 100%;
20+
padding: 30px;
21+
background: #fff;
22+
border-radius: 7px;
23+
box-shadow: 0 10px 20px rgba(0,0,0,0.01);
24+
}
25+
.wrapper{
26+
border-radius: 5px;
27+
border: 1px solid #ccc;
28+
}
29+
.wrapper .text-input{
30+
display: flex;
31+
border-bottom: 1px solid #ccc;
32+
}
33+
.text-input .to-text{
34+
border-radius: 0px;
35+
border-left: 1px solid #ccc;
36+
}
37+
.text-input textarea{
38+
height: 250px;
39+
width: 100%;
40+
border: none;
41+
outline: none;
42+
resize: none;
43+
background: none;
44+
font-size: 18px;
45+
padding: 10px 15px;
46+
border-radius: 5px;
47+
}
48+
.text-input textarea::placeholder{
49+
color: #b7b6b6;
50+
}
51+
.controls, li, .icons, .icons i{
52+
display: flex;
53+
align-items: center;
54+
justify-content: space-between;
55+
}
56+
.controls{
57+
list-style: none;
58+
padding: 12px 15px;
59+
}
60+
.controls .row .icons{
61+
width: 38%;
62+
}
63+
.controls .row .icons i{
64+
width: 50px;
65+
color: #adadad;
66+
font-size: 14px;
67+
cursor: pointer;
68+
transition: transform 0.2s ease;
69+
justify-content: center;
70+
}
71+
.controls .row.from .icons{
72+
padding-right: 15px;
73+
border-right: 1px solid #ccc;
74+
}
75+
.controls .row.to .icons{
76+
padding-left: 15px;
77+
border-left: 1px solid #ccc;
78+
}
79+
.controls .row select{
80+
color: #333;
81+
border: none;
82+
outline: none;
83+
font-size: 18px;
84+
background: none;
85+
padding-left: 5px;
86+
}
87+
.text-input textarea::-webkit-scrollbar{
88+
width: 4px;
89+
}
90+
.controls .row select::-webkit-scrollbar{
91+
width: 8px;
92+
}
93+
.text-input textarea::-webkit-scrollbar-track,
94+
.controls .row select::-webkit-scrollbar-track{
95+
background: #fff;
96+
}
97+
.text-input textarea::-webkit-scrollbar-thumb{
98+
background: #ddd;
99+
border-radius: 8px;
100+
}
101+
.controls .row select::-webkit-scrollbar-thumb{
102+
background: #999;
103+
border-radius: 8px;
104+
border-right: 2px solid #ffffff;
105+
}
106+
.controls .exchange{
107+
color: #adadad;
108+
cursor: pointer;
109+
font-size: 16px;
110+
transition: transform 0.2s ease;
111+
}
112+
.controls i:active{
113+
transform: scale(0.9);
114+
}
115+
.container button{
116+
width: 100%;
117+
padding: 14px;
118+
outline: none;
119+
border: none;
120+
color: #fff;
121+
cursor: pointer;
122+
margin-top: 20px;
123+
font-size: 17px;
124+
border-radius: 5px;
125+
background-color: #5372F0;
126+
}
127+
@media (max-width: 660px){
128+
.container{
129+
padding: 20px;
130+
}
131+
.wrapper .text-input{
132+
flex-direction: column;
133+
}
134+
.text-input .to-text{
135+
border-left: 0px;
136+
border-top: 1px solid #ccc;
137+
}
138+
.text-input textarea{
139+
height: 200px;
140+
}
141+
.controls .row .icons{
142+
display: none;
143+
}
144+
.container button{
145+
padding: 13px;
146+
font-size: 16px;
147+
}
148+
.controls .row select{
149+
font-size: 16px;
150+
}
151+
.controls .exchange{
152+
font-size: 14px;
153+
}
154+
}

‎translate.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<link rel="stylesheet" href="translate.css">
9+
10+
11+
12+
<!-- CSS only -->
13+
<!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
14+
15+
<!-- Font Awesome CDN Link for Icons -->
16+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
17+
18+
<title>Translate app</title>
19+
</head>
20+
<body>
21+
<div class="container">
22+
<div class="wrapper">
23+
<div class="text-input">
24+
<textarea spellcheck="false" class="from-text" placeholder="Enter text"></textarea>
25+
<textarea spellcheck="false" readonly disabled class="to-text" placeholder="Translation"></textarea>
26+
</div>
27+
<ul class="controls">
28+
<li class="row from">
29+
<div class="icons">
30+
<i id="from" class="fas fa-volume-up"></i>
31+
<i id="from" class="fas fa-copy"></i>
32+
</div>
33+
<select>
34+
35+
</select>
36+
</li>
37+
38+
39+
<li class="exchange"><i class="fas fa-exchange-alt"></i></li>
40+
41+
42+
<li class="row to">
43+
<select>
44+
45+
</select>
46+
<div class="icons">
47+
<i id="from" class="fas fa-volume-up"></i>
48+
<i id="from" class="fas fa-copy"></i>
49+
</div>
50+
</li>
51+
52+
53+
</ul>
54+
</div>
55+
<button>Translate Text</button>
56+
</div>
57+
<script src="countries.js"></script>
58+
<script src="TS.JS"></script>
59+
</body>
60+
</html>

0 commit comments

Comments
 (0)