Create a language translator program using the Yandex free translation web servi
ID: 3570707 • Letter: C
Question
Create a language translator program using the Yandex free translation web service. You must first register at the Yandex site. Once logged in, you can request an API key for the translation service. Your program should translate from English to your choice of another language. For a more challenging program you could provide a choice of target languages in a drop-down list.
-Name the HTML file translate.html.
-Create translate.js and translate.css files and place them in the js and css folders (note: the design is up to you). Link to these files in translate.html.
-Substitute a + for a space to separate the words to be translated. Use the replace function to do this. ? Use the jQuery getJSON function.
-Use the JSONP example shown in the API documentation.
http://api.yandex.com/translate/doc/dg/concepts/About.xml http://api.yandex.com/translate/doc/dg/reference/getLangs.xml http://api.yandex.com/translate/doc/dg/reference/translate.xml
A sample URL to translate
Explanation / Answer
===========File : translate.html==============
<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
<title>Translate</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="translate.js"></script>
<link rel="stylesheet" type="text/css" href="translate.css" />
</head>
<body>
<h1>Translate English to French</h1>
<div id="english">
<p><input type="text" id="englishText" name="englishText" /></p>
<input type="button" id="submit" value="Translate" />
</div>
<br>
<div id="french">
<p id="frenchText">
</p>
</div>
</body>
</hml>
==================File : translate.js=======================
$( document ).ready(function() {
$('#submit').click(function(){
var data = $('#englishText').val();
data = data.split(' ').join('+'); // replace the space with '+'
var url = "https://translate.yandex.net/api/v1.5/tr.json/translate?key=APIkey&lang=enru&text="+data+"&callback=?";
$.getJSON(url, function(result){
$('#frenchText').append(result);
});
});
});
====================File: translate.css=============
h1{
color: orange;
text-align: center;
}
div{
background: gray;
border: 1px orange solid;
height: 200;
width: 300;
margin-left: auto;
margin-right: auto;
}
#englishText{
min-height: 30;
min-width: 150;
margin-left: auto;
margin-right: auto;
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.