Simple Translator app(English to Urdu)
index.html
1
<html>2
<head>3
<title>AI Translator App</title>4
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">5
</head>6
<body>7
<div class="container mt-5">8
<h1 class="text-center mb-4">AI Translator App</h1>9
<div class="row justify-content-center">10
<div class="col-6">11
<div class="mb-3">12
<label for="englishText" class="form-label">Enter English Text:</label>13
<input type="text" class="form-control" id="englishText" placeholder="Type English text here...">14
</div>15
<button class="btn btn-primary" onclick="translateText()">Translate</button>16
</div>17
</div>18
<div class="row mt-4 justify-content-center">19
<div class="col-6">20
<div class="mb-3">21
<label for="urduTranslation" class="form-label">Urdu Translation:</label>22
<input class="form-control" id="urduTranslation" rows="3" readonly />23
</div>24
</div>25
</div>26
</div>27
28
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>29
<script>30
function translateText() {31
const englishText = document.getElementById('englishText').value;32
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=ur&dt=t&q=${encodeURI(englishText)}`;33
34
fetch(url)35
.then(response => response.json())36
.then(data => {37
const urduTranslation = data[0][0][0];38
document.getElementById('urduTranslation').value = urduTranslation;39
})40
.catch(error => console.error('Error:', error));41
}42
</script>43
</body>44
</html>styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
