Demo entry 6356278

asdf

   

Submitted by anonymous on Apr 18, 2017 at 00:07
Language: HTML + Angular2. Code size: 8.1 kB.

<!DOCTYPE html>
<html>
<head>
  <title>Bui Translate</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
  <div id="app">
    <div class="header">
    <h1>Bui Translate <span class="schema" >{{translateSchema}}</span></h1>

    </div>
    <hr>
    <div class="container">
      <div class="translateInput">
        <div class="inputText">
        <textarea v-on:keydown="updateCount" id="translateInput" v-model="input"></textarea>
        <span class="characterCount">{{ characterCount }} / 5000</span>
        </div>
      </div>
      <div class="translateOutput">
        <div class="outputSelect">
        <select id="combobox0"  v-model="languageToTranslateTo">
          <option selected disabled hidden>Select Language</option>
        </select>

           <input v-on:click="translateText" type="submit" value="Translate">
        </div>
        <div class="outputWindow">
          {{ output }}
        </div>
      </div>
    </div>
    <div class="translateHistory">
      <h1>Translate History</h1>
      <hr>
      <div style=" font-family: Arial, Helvetica, sans-serif;" v-html="history" class="historyList">
      </div>
    </div>
  </div>

<style>
#combobox0 {
  width: 75%;
}

.container {
  height: 115px;
}

.translateHistory {
  position: relative;
}

h1 {
  margin-bottom: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

.translateInput {
  float:left;
  width:50%;
 
}

.translateOutput {
  float: left;
  width:50%;
  font-family: Arial, Helvetica, sans-serif;
}

.inputText {
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  display:block;
  min-height: 89px;
}

#translateInput {
  font-family: Arial, Helvetica, sans-serif;
  display:block;
  width: 95%;
  height: 109px;
}

.outputWindow {
  display: block;
  min-height: 89px;
  background-color: lightgray;
}

.inputText span.characterCount {
  bottom: 10px;
  right: 30px;
  font-style: italic;
}

.schema:empty {
  border: none;
}

.schema {
  border: solid;
}

.inputText span {
  position: absolute; 
  display: block;
  color: #999;
}
</style>

  <script>
    new Vue({
      el: '#app',
      data: {
        input: '',
        languageToTranslateTo: '',
        languageToTranslateFrom: '',
        output: '',
        characterCount: '',
        translateSchema: '',
        history: '',
        count: 0
      },
      methods: {
        formSubmit(e) {
          	e.preventDefault();
        },
        translateText: function() {
      this.$http.get('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20170410T004703Z.9d0af1944588318a.8e9b69831c6001cca8a86b3b13a432ab83b313af&lang=' 
      + this.languageToTranslateTo 
      + '&text=' + this.input ).then((response) => {
        this.output = response.body.text[0];
        this.translateSchema = response.body.lang;
        this.updateHistory();
        this.count++;
      });
    },
      updateCount: function() {
        this.characterCount = this.input.length;
        //console.log(this.characterCount);
       },
       switch: function() {
         this.input = this.output;
       },
       updateHistory: function() { 
         this.$nextTick(function(){
            var mostRecent = this.count + ") " + this.input + " --> " + "<b>" + this.output + "</b>" + " [Schema: " + this.translateSchema +"]" + "<br /><hr>";
            this.history += mostRecent;
            console.log(this.history);
         });
       }
      }
    })

    var languagesJSON = `[ { "Language": "Azerbaijan", "Code": "az" },
  { "Language": "Albanian", "Code": "sq" },
  { "Language": "Amharic", "Code": "am" },
  { "Language": "English", "Code": "en" },
  { "Language": "Arabic", "Code": "ar" },
  { "Language": "Armenian", "Code": "hy" },
  { "Language": "Afrikaans", "Code": "af" },
  { "Language": "Basque", "Code": "eu" },
  { "Language": "Bashkir", "Code": "ba" },
  { "Language": "Belarusian", "Code": "be" },
  { "Language": "Bengali", "Code": "bn" },
  { "Language": "Bulgarian", "Code": "bg" },
  { "Language": "Bosnian", "Code": "bs" },
  { "Language": "Welsh", "Code": "cy" },
  { "Language": "Hungarian", "Code": "hu" },
  { "Language": "Vietnamese", "Code": "vi" },
  { "Language": "Haitian (Creole)", "Code": "ht" },
  { "Language": "Galician", "Code": "gl" },
  { "Language": "Dutch", "Code": "nl" },
  { "Language": "Hill Mari", "Code": "mrj" },
  { "Language": "Greek", "Code": "el" },
  { "Language": "Georgian", "Code": "ka" },
  { "Language": "Gujarati", "Code": "gu" },
  { "Language": "Danish", "Code": "da" },
  { "Language": "Hebrew", "Code": "he" },
  { "Language": "Yiddish", "Code": "yi" },
  { "Language": "Indonesian", "Code": "id" },
  { "Language": "Irish", "Code": "ga" },
  { "Language": "Italian", "Code": "it" },
  { "Language": "Icelandic", "Code": "is" },
  { "Language": "Spanish", "Code": "es" },
  { "Language": "Kazakh", "Code": "kk" },
  { "Language": "Kannada", "Code": "kn" },
  { "Language": "Catalan", "Code": "ca" },
  { "Language": "Kyrgyz", "Code": "ky" },
  { "Language": "Chinese", "Code": "zh" },
  { "Language": "Korean", "Code": "ko" },
  { "Language": "Xhosa", "Code": "xh" },
  { "Language": "Latin", "Code": "la" },
  { "Language": "Latvian", "Code": "lv" },
  { "Language": "Lithuanian", "Code": "lt" },
  { "Language": "Luxembourgish", "Code": "lb" },
  { "Language": "Malagasy", "Code": "mg" },
  { "Language": "Malay", "Code": "ms" },
  { "Language": "Malayalam", "Code": "ml" },
  { "Language": "Maltese", "Code": "mt" },
  { "Language": "Macedonian", "Code": "mk" },
  { "Language": "Maori", "Code": "mi" },
  { "Language": "Marathi", "Code": "mr" },
  { "Language": "Mari", "Code": "mhr" },
  { "Language": "Mongolian", "Code": "mn" },
  { "Language": "German", "Code": "de" },
  { "Language": "Nepali", "Code": "ne" },
  { "Language": "Norwegian", "Code": "no" },
  { "Language": "Punjabi", "Code": "pa" },
  { "Language": "Papiamento", "Code": "pap" },
  { "Language": "Persian", "Code": "fa" },
  { "Language": "Polish", "Code": "pl" },
  { "Language": "Portuguese", "Code": "pt" },
  { "Language": "Romanian", "Code": "ro" },
  { "Language": "Russian", "Code": "ru" },
  { "Language": "Cebuano", "Code": "ceb" },
  { "Language": "Serbian", "Code": "sr" },
  { "Language": "Sinhala", "Code": "si" },
  { "Language": "Slovakian", "Code": "sk" },
  { "Language": "Slovenian", "Code": "sl" },
  { "Language": "Swahili", "Code": "sw" },
  { "Language": "Sundanese", "Code": "su" },
  { "Language": "Tajik", "Code": "tg" },
  { "Language": "Thai", "Code": "th" },
  { "Language": "Tagalog", "Code": "tl" },
  { "Language": "Tamil", "Code": "ta" },
  { "Language": "Tatar", "Code": "tt" },
  { "Language": "Telugu", "Code": "te" },
  { "Language": "Turkish", "Code": "tr" },
  { "Language": "Udmurt", "Code": "udm" },
  { "Language": "Uzbek", "Code": "uz" },
  { "Language": "Ukrainian", "Code": "uk" },
  { "Language": "Urdu", "Code": "ur" },
  { "Language": "Finnish", "Code": "fi" },
  { "Language": "French", "Code": "fr" },
  { "Language": "Hindi", "Code": "hi" },
  { "Language": "Croatian", "Code": "hr" },
  { "Language": "Czech", "Code": "cs" },
  { "Language": "Swedish", "Code": "sv" },
  { "Language": "Scottish", "Code": "gd" },
  { "Language": "Estonian", "Code": "et" },
  { "Language": "Esperanto", "Code": "eo" },
  { "Language": "Javanese", "Code": "jv" },
  { "Language": "Japanese", "Code": "ja" } ]`;

$($.parseJSON(languagesJSON)).map(function () {
    return $('<option>').val(this.Code).text(this.Language).appendTo('#combobox');
});

$($.parseJSON(languagesJSON)).map(function () {
    return $('<option>').val(this.Code).text(this.Language).appendTo('#combobox0');
});
  </script>
</body>
</html>

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).