Language Translation

by Ben Clayton

HTML

<div class="h1">
Hello World
</div>

<div class="body">
This is a dirty demo of how the elements could be cloned front end.
</div>


<div class="h1 fre">
Bonjour le monde
</div>

<div class="body fre">
Ceci est une démo sale de la façon dont les éléments pourraient être clonés en frontal.
</div>

CSS

.h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

.body {
  margin-bottom: 10px;
}

.fre {
  color: rgb(100,130,150);
}

JavaScript

$(document).ready(function() {

  $(".translate-eng-fre").each(function() {

    var $el = $(this);
    var $tran = $el.clone();
    $tran.addClass("fre");
    $tran.html(callAPI($el.html()));
    $tran.insertAfter($el)

  })



  /* DUMMY Call to API to translate */
  function callAPI(str) {
    str = str.replace(/\n/g, '');
    if (str == 'Hello World') return 'Bonjour le monde'
    if (str == 'This is a dirty demo of how the elements could be cloned front end.') return 'Ceci est une démo sale de la façon dont les éléments pourraient être clonés en frontal.'

  }

})