Skip to content

Commit c4e9f1c

Browse files
Shubhamjain287Shubhamjain287
authored
Merge pull request #43 from ankitjhagithub21/new_branch
added language-translator app
2 parents ab5ac52 + 6b30063 commit c4e9f1c

4 files changed

Lines changed: 226 additions & 0 deletions

File tree

‎Web Devlopment Project/Language Translator/index.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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+
<title>Language Translator</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
9+
<link rel="stylesheet" href="style.css">
10+
11+
</head>
12+
<body>
13+
<div class="container">
14+
15+
<div class="row">
16+
<p class="fs-4 text-center">Language Translator</p>
17+
<div class="col-lg-6">
18+
<select class="form-select" aria-label="Default select example" id="translate-from">
19+
20+
<option value="en">English</option>
21+
<option value="hi-In">Hindi</option>
22+
<option value="urd">Urdu</option>
23+
</select>
24+
</div>
25+
<div class="col-lg-6">
26+
<select class="form-select" aria-label="Default select example" id="translate-to">
27+
28+
<option value="hi-In">Hindi</option>
29+
30+
<option value="urd">Urdu</option>
31+
<option value="en">English</option>
32+
</select>
33+
</div>
34+
</div>
35+
<p class="text-center my-3 fs-5 text-danger" id="alert"></p>
36+
<div class="row my-3">
37+
<div class="col-lg-6">
38+
<div class="buttons">
39+
<i class="fa-solid fa-copy" id="left-copy"></i>
40+
<i class="fa-solid fa-microphone" id="left-micro"></i>
41+
</div>
42+
<textarea id="left-area" cols="30" rows="6" class="form-control" placeholder="Enter text to translate"></textarea>
43+
</div>
44+
<div class="col-lg-6">
45+
<div class="buttons">
46+
<i class="fa-solid fa-copy" id="right-copy"></i>
47+
<i class="fa-solid fa-microphone" id="right-micro"></i>
48+
</div>
49+
<textarea id="right-area" cols="30" rows="6" class="form-control" placeholder="Translated Text Show Here.."></textarea>
50+
51+
</div>
52+
53+
</div>
54+
<div class="d-flex align-items-center justify-content-center gap-2">
55+
<button class="btn btn-success" id="translate-btn">Translate</button>
56+
<button class="btn btn-danger" id="clear-btn">Clear</button>
57+
58+
</div>
59+
</div>
60+
61+
<script src="script.js"></script>
62+
</body>
63+
</html>

‎Web Devlopment Project/Language Translator/readme.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
# Language Translator
2+
3+
This is a basic web application that allows users to translate text from one language to another. It's built using HTML, CSS, and JavaScript and utilizes the MyMemory Translation API for language translation.
4+
5+
![image](https://github.com/ankitjhagithub21/Web-Devlopment-Projects/assets/91364014/700c73af-de68-44a5-9ab3-53c3147827c9)
6+
7+
8+
## Features
9+
10+
- Select the source and target languages for translation.
11+
- Enter the text to be translated.
12+
- Click the "Translate" button to get the translation.
13+
- Click the "Clear" button to clear the textarea.
14+
- You can copy the text by clicking on copy icon.
15+
16+
17+
## How to Use
18+
19+
1. Clone the repository to your local machine.
20+
21+
2. Open the `index.html` file in a web browser to run the application.
22+
23+
3. Choose the source and target languages from the dropdown menus.
24+
25+
4. Enter the text you want to translate into the textarea.
26+
27+
5. Click the "Translate" button to get the translation.
28+
29+
## Languages
30+
31+
You can select from a variety of languages for translation. The current options include English, Hindi, and Urdu. You can easily expand the list by adding more languages to the dropdown menus in the HTML.
32+
33+
## Live On
34+
('''https://language-translator-23.netlify.app/''')
35+
36+
## Credits
37+
38+
- [MyMemory Translation API](https://mymemory.translated.net/doc/spec.php): Used for language translation.
39+
40+
## License
41+
42+
This project is open-source and available under the [MIT License](LICENSE).

‎Web Devlopment Project/Language Translator/script.js‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
const leftArea = document.getElementById('left-area')
2+
const rightArea = document.getElementById('right-area')
3+
const translateBtn = document.getElementById('translate-btn')
4+
const clearBtn = document.getElementById('clear-btn')
5+
const leftCopyBtn = document.getElementById('left-copy')
6+
const rightCopyBtn = document.getElementById('right-copy')
7+
const alertMsg = document.getElementById('alert')
8+
const leftMicro = document.getElementById('left-micro')
9+
const rightMicro = document.getElementById('right-micro')
10+
let speech = new SpeechSynthesisUtterance()
11+
12+
13+
translateBtn.addEventListener('click', () => {
14+
const translateTo = document.getElementById('translate-to')
15+
const translateFrom = document.getElementById('translate-from')
16+
if (leftArea.value == "") {
17+
alert("Textarea is empty")
18+
} else {
19+
if(translateFrom.value===translateTo.value){
20+
alert("Same language in both")
21+
}else{
22+
translate(leftArea.value, translateFrom.value, translateTo.value)
23+
}
24+
25+
}
26+
})
27+
28+
const translate = async (word, translateFrom, translateTo) => {
29+
const res = await fetch(`https://api.mymemory.translated.net/get?q=${word}&langpair=${translateFrom}|${translateTo}`)
30+
const data = await res.json()
31+
32+
rightArea.value = data.responseData.translatedText
33+
}
34+
35+
36+
clearBtn.addEventListener('click', () => {
37+
leftArea.value = ""
38+
rightArea.value = ""
39+
})
40+
41+
leftCopyBtn.addEventListener('click',()=>{
42+
if(leftArea.value==""){
43+
alertMsg.innerHTML = "textarea is empty"
44+
}else{
45+
navigator.clipboard.writeText(leftArea.value);
46+
alertMsg.innerHTML = "text Copied"
47+
}
48+
hideAlert()
49+
})
50+
51+
rightCopyBtn.addEventListener('click',()=>{
52+
if(rightArea.value==""){
53+
alertMsg.innerHTML = "textarea is empty !!"
54+
55+
}else{
56+
navigator.clipboard.writeText(rightArea.value);
57+
alertMsg.innerHTML = "text Copied."
58+
}
59+
hideAlert()
60+
})
61+
62+
const hideAlert = () =>{
63+
setTimeout(()=>{
64+
alertMsg.innerHTML=""
65+
},1500);
66+
}
67+
68+
leftMicro.addEventListener('click',()=>{
69+
if(leftArea.value==""){
70+
alertMsg.innerHTML ="Noting to speak"
71+
hideAlert()
72+
}else{
73+
speech.text = leftArea.value;
74+
window.speechSynthesis.speak(speech)
75+
}
76+
})
77+
78+
rightMicro.addEventListener('click',()=>{
79+
if(rightArea.value==""){
80+
alertMsg.innerHTML ="Noting to speak"
81+
hideAlert()
82+
}else{
83+
speech.text = rightArea.value;
84+
window.speechSynthesis.speak(speech)
85+
}
86+
})

‎Web Devlopment Project/Language Translator/style.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
body{
3+
min-height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
background: linear-gradient(45deg,#010758,#490d61);
8+
9+
color: whitesmoke;
10+
}
11+
12+
.col-lg-6{
13+
position: relative;
14+
}
15+
16+
.buttons{
17+
position: absolute;
18+
bottom:10px;
19+
right: 20px;
20+
}
21+
i{
22+
23+
24+
margin: 5px;
25+
font-size: 20px;
26+
cursor: pointer;
27+
color: rgb(20, 128, 201);
28+
}
29+
30+
@media (max-width:968px) {
31+
.col-lg-6{
32+
margin-top: 20px;
33+
}
34+
35+
}

0 commit comments

Comments
 (0)