Created
May 1, 2016 11:29
-
-
Save jaimeagudo/3acf4f23fc2a98d5cefa10ba7af5440b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head lang="en"> | |
<meta charset="UTF-8"> | |
<title>JS Test</title> | |
</head> | |
<body> | |
<div class="main-pane"> | |
<h2>Word Translator</h2> | |
<p> | |
Welcome! This is a word translation tool. You provide the source words and the words that they | |
should be translated to, and the website does the rest! The translator already knows some words, | |
but it's important to remember that any words you teach it will be forgotten when the page is | |
refreshed. | |
</p> | |
<div> | |
Source word: <input type="text" id="source-word" placeholder="party"/> | |
Translation word: <input type="text" id="translation-word" placeholder="fiesta"> | |
<input type="button" id="learn-translate" value="Learn Translation!"/> | |
</div> | |
<h4>Translator</h4> | |
<p> | |
You can enter a sentence into the textbox below in order to use the known | |
translations to translate a sentence. | |
</p> | |
<textarea name="translate-box" id="translate-box" cols="50" rows="10" placeholder="Enter the sentence to translate here!"></textarea> | |
<p><span id="translation-result">And your translation will appear here!</span></p> | |
</div> | |
<div class="dictionary-pane"> | |
<h2>Known Translations:</h2> | |
<p> | |
These are all the words I know! | |
They're in the form of "known word" -> "translation" in the list below. | |
</p> | |
<p>Hint: click on the "remove" link next a known to remove a known translation</p> | |
<ul id="known-translations"></ul> | |
</div> | |
</body> | |
<style type="text/css"> | |
.main-pane { | |
float: left; | |
width: 75%; | |
} | |
.dictionary-pane { | |
float: right; | |
width: 25%; | |
} | |
</style> | |
<script type="application/javascript"> | |
"use strict"; | |
function translateText(response) { | |
document.getElementById("translation-result").innerHTML += "<br>" + response.data.translations[0].translatedText; | |
} | |
(function(){ | |
// YOUR CODE GOES HERE, we need translateText in the global scope and we don't need jQuery | |
document.getElementById("translate-box").addEventListener("blur", function(){ | |
var YOUR_API_KEY="PLEASE go to https://console.cloud.google.com/start and get one ;)" | |
var newScript = document.createElement('script'); | |
newScript.type = 'text/javascript'; | |
var sourceText = escape(document.getElementById("translate-box").innerHTML); | |
// WARNING: Your API key will be visible in the page source. | |
// To prevent misuse, restrict your key to designated domains or use a | |
// proxy to hide your key. | |
var src = 'https://www.googleapis.com/language/translate/v2?key=' + YOUR_API_KEY + '&source=en&target=es&callback=translateText&q=' + sourceText; | |
newScript.src = src; | |
document.getElementsByTagName('head')[0].appendChild(newScript); | |
} ) | |
})(); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please, http://youmightnotneedjquery.com/ 😄