Skip to content

Commit 1e4a64a

Browse files
NaeuCodeNaeuCode
committed
Adding-Day-#8
1 parent c67cd73 commit 1e4a64a

File tree

7 files changed

+471
-0
lines changed

7 files changed

+471
-0
lines changed

‎Day #8 - Translator App/README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Day #08
2+
3+
### Translator App
4+
In this tutorial ([Open in Youtube](https://youtu.be/bphltwf_Wpk)), I am gonna showing to you how to code a translator app with javascript. in this tutorial also we use a translate api and we get data from api and this code is also responsive❗️
5+
in this video we have a google translate clone 😁
6+
7+
# Screenshot
8+
Here we have project screenshot :
9+
10+
![screenshot](screenshot.png)

‎Day #8 - Translator App/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+
}

‎Day #8 - Translator App/index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<!--------------- Icon Scout --------------->
7+
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
8+
<!----------------- CSS --------------->
9+
<link rel="stylesheet" href="style.css">
10+
<title>Day #8 - Translator App | NaeuCode </title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="wrapper">
15+
16+
<ul class="controls">
17+
18+
<li class="row from">
19+
<select></select>
20+
<div class="icons">
21+
<i id="form" class="uil uil-volume"></i>
22+
<i id="form" class="uil uil-copy"></i>
23+
</div>
24+
</li>
25+
26+
<li class="exchange"><i class="uil uil-exchange-alt"></i></li>
27+
28+
<li class="row to">
29+
<select></select>
30+
<div class="icons">
31+
<i id="form"class="uil uil-volume"></i>
32+
<i id="form" class="uil uil-copy" ></i>
33+
</div>
34+
</li>
35+
</ul>
36+
37+
<div class="text-input">
38+
<textarea spellcheck="false" class="from-text" placeholder="Enter text" ></textarea>
39+
40+
<div class="space"></div>
41+
42+
<textarea spellcheck="false" readonly disabled class="to-text" placeholder="Translation" ></textarea>
43+
44+
</div>
45+
46+
</div>
47+
<button class="btn">Translate Text</button>
48+
49+
</div>
50+
51+
52+
<!--------------- Js -------------->
53+
<script src="countries.js"></script>
54+
<script src="script.js"></script>
55+
</body>
56+
</html>

‎Day #8 - Translator App/screenshot.png‎

91.6 KB
Loading

‎Day #8 - Translator App/script.js‎

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

0 commit comments

Comments
 (0)