यह Online Typing Tool विशेष रूप से उन लोगों के लिए सहायक है जो अपने Website पर Blog और लेख विशेष रूप से अपनी स्थानीय Language में लिखते हैं। उदाहरण के लिए: हिंदी, मराठी, गुजराती, बंगाली, नेपाली, उर्दू, तमिल, कन्नड़ आदि। English To Hindi Typing Google Tool >>
हम लगभग सभी भारतीय भाषाओं में Typing का समर्थन करते हैं। यह Online HIndi Typing Tool Google Translation और ट्रांसलेशन सिस्टम की शक्ति का उपयोग करता है। इसे बनाने के लिए आप को Html, CSS and Javascript का आना चाहिए ।
इसे English to Multi Translation Keyword का Source Code मैने नीचे दिया है। आप भी अपने व अन्य भाषाओं को Convert / Translate वाला Tool बनाकर घर बैठे पैसे कमा सकते हो। सिर्फ आप के पास Hosting और Domain हो चाहिए।
Download Hindi To English Translation keyboard Source Code Tool
इसे Code को Copy करके File को सेव करले Index.html नाम से औऱ Hosting पर जाकर Public_html Folder मैं आकर upload कर लें। इसे आप लोगो Website / App बना सकते हो। इससे पहले मैने आपके लिए Convert kg to lbs Tool बनाया था।
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title> Online Multilanguage Typing Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f9;
}
.container {
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
width: 90%;
}
.container h1 {
text-align: center;
margin-bottom: 20px;
}
select, textarea {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
resize: vertical;
}
.output {
margin-top: 20px;
padding: 10px;
background: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
min-height: 50px;
}
.stats {
margin-top: 10px;
font-size: 14px;
color: #555;
}
button {
margin-top: 10px;
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class=”container”>
<h1>Online Multi Language Typing Tool</h1>
<h4>Select Language</h4>
<select id=”languageSelect” onchange=”updateLanguage()”>
<option value=”hi”>Hindi</option>
<option value=”ta”>Tamil</option>
<option value=”te”>Telugu</option>
<option value=”kn”>Kannada</option>
<option value=”ml”>Malayalam</option>
<option value=”gu”>Gujarati</option>
<option value=”mr”>Marathi</option>
<option value=”bn”>Bengali</option>
<option value=”fr”>French</option>
<option value=”es”>Spanish</option>
<option value=”de”>German</option>
</select>
<h4>Typing Text Enter:</h4>
<textarea id=”englishInput” placeholder=”Type in English…” oninput=”translateText()”></textarea>
<textarea id=”translationOutput” placeholder=”Translated text will appear here…” readonly></textarea>
<h3> Meaning and Defination Explain</h3>
<textarea id=”meaningOutput” placeholder=”Explanation or meaning will appear here…” readonly></textarea>
<div class=”stats” id=”statsLabel”>Words: 0 | Characters: 0</div>
<button onclick=”copyText()”>Copy Text</button>
</div>
<script>
let languageCode = ‘hi’; // Default language is Hindi
function updateLanguage() {
languageCode = document.getElementById(‘languageSelect’).value;
translateText();
}
function translateText() {
const inputText = document.getElementById(‘englishInput’).value;
const translationOutput = document.getElementById(‘translationOutput’);
const meaningOutput = document.getElementById(‘meaningOutput’);
const statsLabel = document.getElementById(‘statsLabel’);
// Update word and character count
const words = inputText.trim() ? inputText.trim().split(/\s+/).length : 0;
const characters = inputText.length;
statsLabel.textContent = `Words: ${words} | Characters: ${characters}`;
if (!inputText.trim()) {
translationOutput.value = ”;
meaningOutput.value = ”;
return;
}
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=${languageCode}&dt=t&dt=bd&q=${encodeURIComponent(inputText)}`;
fetch(url)
.then(response => response.json())
.then(data => {
if (data && data[0]) {
const translatedText = data[0].map(item => item[0]).join(”);
translationOutput.value = translatedText;
// Handle meanings or definitions if available
if (data[1]) {
const meaningText = data[1].map(entry => `${entry[0]}: ${entry[1].join(‘, ‘)}`).join(‘\n’);
meaningOutput.value = meaningText;
} else {
meaningOutput.value = ‘No explanation available.’;
}
} else {
translationOutput.value = ‘Translation failed. Please try again.’;
meaningOutput.value = ”;
}
})
.catch(error => {
translationOutput.value = ‘An error occurred while translating the text.’;
meaningOutput.value = ”;
console.error(‘Error:’, error);
});
}
function copyText() {
const translationOutput = document.getElementById(‘translationOutput’);
const text = translationOutput.value;
if (text.trim()) {
navigator.clipboard.writeText(text).then(() => {
alert(‘Text copied to clipboard!’);
}).catch(err => {
alert(‘Failed to copy text: ‘ + err);
});
} else {
alert(‘No text to copy!’);
}
}
</script>
</body>
</html>
1 thought on “English To Hindi Typing Translation keyboard Source Code”