jaimeagudo/translateToy.html

## translateToy.html
<!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>
	<!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>