javascriptgoogle-translategoogle-translation-api

API call for each using JS

I am using Google API and JS click outside to convert the first input into targeted language.

I want to convert into multiple language from first input, I have added another Targeted language as URDU.

I need in such a way, when I give input in first box, it gets converted into Spanish as well as Urdu.

let $ = el => document.querySelector(el);

$('#input').addEventListener('keyup', function() {
  var text = this.value;
  doGet(text);
}, false);

function doGet(txt) {
  var sourceText = txt;  
  var sourceLang = 'en';
  var targetLang = $(".targee").value;
    
  var url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" 
            + sourceLang + "&tl=" + targetLang + "&dt=t&q=" + encodeURI(sourceText);
  
  $('.translated').value = 'LOADING...';
  var request = new XMLHttpRequest();
  request.open('GET', url, true);

  request.onload = () => {
    if (request.status >= 200 && request.status < 400) {
      // Success!
      let data = JSON.parse(request.responseText);
      let finaltext = '';
      for (let i = 0; i < data[0].length; i++) {
        finaltext += data[0][i][0];
      }
      $('.translated').value = finaltext;
    }
  };
  request.send();
}
  
h2, h3 {
  margin: 0 auto;
}
.boxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
}
.box {
  width: 40%;
}

textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  margin: 5px auto 20px;
  border-width: 2px;
  resize: none;
  
  &:focus {
    border: 2px solid black;
    outline: none;
  }
}
.btn-row {
  text-align: center;
  margin: 10px auto;
}
  <div class="boxes">
    <div class="box">
      <h2>Input</h2>
      <input id="input">
    </div>
    
    <div class="box">
      <h2>Spanish</h2>
      <input value="es" class="targee">
      <input id="es" class="translated">
    </div>
    
    <div class="box">
      <h2>Urdu</h2>
      <input value="ur" class="targee">
      <input id="ur" class="translated">
    </div>
  
  </div>

Solution

  • If you want to use the google translate API for multi-languages, you can loop the request to the API URL. To avoid errors in data synchronization, you can use Javascript Promise and async function.

    let $ = el => document.querySelector(el);
let $$ = el => document.querySelectorAll(el);

$('#input').addEventListener('keyup', function() {
  var text = this.value;
  doGet(text);
}, false);

async function doGet(txt) {
  var sourceText = txt;  
  var sourceLang = 'en';
  var targetLangs = $$(".targee");
  var request;
  var url; 
  
  for(var j = 0; j < targetLangs.length; j++) {
    url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=" 
            + sourceLang + "&tl=" + targetLangs[j].value + "&dt=t&q=" + encodeURI(sourceText);
    $$('.translated')[j].value = 'LOADING...';
    $$('.translated')[j].value = await translate(url);
  }
}

async function translate(url) {
  return new Promise((resolve, reject) => {
    request = new XMLHttpRequest();
    request.open('GET', url, true);

    request.onload = () => {
      if (request.readyState == 4 && request.status >= 200 && request.status < 400) {
        // Success!
        let data = JSON.parse(request.responseText);
        if(data[0]) {
          let finaltext = '';
          for (let i = 0; i < data[0].length; i++) {
            finaltext += data[0][i][0];
          };
          resolve(finaltext);
        } else {
          resolve('');
        }
      } else {
        // Error!
        reject("error: "+request.statusText);
      }
    };
    request.send();
  });
}
    h2, h3 {
  margin: 0 auto;
}
.boxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  max-width: 1000px;
  margin: 0 auto;
}
.box {
  width: 40%;
}

textarea {
  display: block;
  width: 100%;
  min-height: 160px;
  margin: 5px auto 20px;
  border-width: 2px;
  resize: none;
  
  &:focus {
    border: 2px solid black;
    outline: none;
  }
}
.btn-row {
  text-align: center;
  margin: 10px auto;
}
      <div class="boxes">
    <div class="box">
      <h2>Input</h2>
      <input id="input">
    </div>
    
    <div class="box">
      <h2>Spanish</h2>
      <input value="es" class="targee">
      <input id="es" class="translated">
    </div>
    
    <div class="box">
      <h2>Urdu</h2>
      <input value="ur" class="targee">
      <input id="ur" class="translated">
    </div>
  
  </div>