Language Translation with JavaScript

In this article, we will learn how to translate a text in multiple languages by using javascript.

Following are the examples of language translation with javascript.

Example 1:

<! DOCTYPE html> 
<html> 
<head>
  <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" />
  <link href = "https://fonts.googleapis.com/css?family=News+Cycle:400,700" rel = "stylesheet">
</head>
<style>
        <meta http-equiv = "Content-Type" 
            content = "text/html; charset=UTF-8" /> 
        <title> Example of Language Translation with JavaScript </title> 
        <meta name = "description"/> 
        <meta content = "width=800, initial-scale=1" 
        name = "viewport" /> 
<script src = 
"https://code.jquery.com/jquery-3.5.1.min.js"> 
        </script>              
        <script src = 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>         
<style> 
h2 { 
  margin-top: 40px; 
  text-transform: none; 
  font-size: 1.75em; 
  font-weight: bold; 
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
  color: white;  
  letter-spacing: -0.005em;  
  word-spacing: 1px; 
  letter-spacing: none; 
  text-align: center; 
} 
h4 { 
  margin-top: 40px; 
  text-transform: none; 
  font-size: 1.75em; 
  font-weight: bold; 
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 
  color: #999;  
  letter-spacing: -0.005em;  
  word-spacing: 1px; 
  letter-spacing: none; 
  text-align: center; 
  color: white; 
} 
body {
  margin: 0;
  padding: 0;
  color: #444444;
  font-family: 'News Cycle', sans-serif;
}
 
.translate_wrapper {
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 20px;
  font-size: 16px;
  background: #fff; 
  border-radius: 4px;
}
 
.current_lang {
  cursor: pointer;
  text-transform: uppercase;
  overflow: hidden;
}
 
.lang {
    padding: 10px 15px;
}
 
.lang.selected {
  display: none;
}
 
.lang img {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}
.lang span.lang-txt {
display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
}
.lang span.lang-txt {
   position: relative;
  top: -1px;
  font-weight: 700;
}
 
.lang img {
  width: 20px;
  margin-left: 0;
}
.lang span span {
  color: #999;
  font-weight: 400;
}
.lang span.fa {
  font-size: 12px;
  position: relative;
  top: -1px;
  margin-left: 3px;
}
.more_lang {
  transform: translateY(-20px);
  opacity: 0;
  cursor: pointer;
  display: none;
   -webkit-transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
    transition: all .3s cubic-bezier(.25, 1.15, .35, 1.15);
}
 
.translate_wrapper.active .more_lang {
  display: block;
}
.more_lang.active {
  opacity: 1;
   transform: translateY(-0px);
}
.more_lang .lang:hover {
  background: #5766b2;
  color: #fff;
}
.more_lang .lang:hover span {
  color: #fff;
}
.translate_wrapper:hover {
  box-shadow: rgba(0,0,0,0.2) 0 5px 15px; 
  -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
            -moz-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -o-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -ms-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
  }
.translate_wrapper.active {
  box-shadow: rgba(0,0,0,0.2) 0 5px 15px; 
  -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
            -moz-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -o-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -ms-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
  }
.content a:hover {
  box-shadow: rgba(0,0,0,0.2) 0 5px 15px; 
  -webkit-transition: all 0.3s cubic-bezier(0,.99,.44,.99);
            -moz-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -o-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            -ms-transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
            transition:  all 0.3s cubic-bezier(0,.99,.44,.99);
  }
.translate_wrapper.active .lang {
  border-bottom: 1px solid #eaeaea;
}
.content {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border-radius: 2px;
  padding: 20px;
  -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box; 
  text-align: center;
}
.content h1,
.content h2,
.content p {
  margin: 0;
}
.content p {
   line-height: 22px;
  text-align: left;
  margin-top: 15px;
}
.content div.ct-img {
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto 10px;
}
.content div img {
  height: 100%;
  position: relative;
  left: -30px;
}
.content a {
  padding: 8px 15px 10px;
   border-radius: 4px;
  background: #5766b2;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-top: 25px;
  position: relative;
  overflow: hidden;
}
.content a:active {
  transform: scale(0.9);
   -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
}
 
body[dir="rtl"] .translate_wrapper {
  right: 20px;
  left: auto;
}
body[dir="rtl"] .lang span.fa {
  margin-right: 3px;
  margin-left: 0;
}
body[dir="rtl"] .lang .lang-txt {
  margin-right: 5px;
  margin-left: 0;
}
body[dir="rtl"] .content div img {
  left: auto;
  right: -30px;
}
body[dir="rtl"] .content p {
  text-align: right;
}
body[dir="rtl"] .lang span span {
  float: left;
  margin-right: 5px;
}
 
</style>
<body>
<h2> Example </h2>
<h4> Language Translation with JavaScript </h4>
<div class = "translate_wrapper">
  <div class = "current_lang">
    <div class = "lang">
      <img src = "https://image.flaticon.com/icons/svg/299/299722.svg">
      <span class = "lang-txt"> EN </span>
      <span class = "fa fa-chevron-down chevron"> </span>
    </div>
  </div> 
  <div class = "more_lang">
    <div class = "lang" data-value = 'cn'>
      <img src = "https://image.flaticon.com/icons/svg/299/299914.svg">
      <span class = "lang-txt"> 简体中文 </span>     
    </div>
    <div class = "lang selected" data-value = 'en'>
   <img src = "https://image.flaticon.com/icons/svg/299/299722.svg">
      <span class = "lang-txt"> English <span> (US) </span> </span>     
    </div>
     <div class = "lang" data-value = 'de'>
      <img src = "https://image.flaticon.com/icons/svg/299/299786.svg">
      <span class = "lang-txt"> Deutsch </span>     
    </div>
    <div class = "lang" data-value = 'es'>
      <img src = "https://image.flaticon.com/icons/svg/299/299820.svg">
      <span class = "lang-txt"> Español </span>     
    </div> 
    <div class = "lang" data-value = 'fr'>
      <img src = "https://image.flaticon.com/icons/svg/299/299753.svg">
      <span class = "lang-txt"> Français </span>     
    </div>
    <div class = "lang" data-value = "pt">
      <img src = "https://image.flaticon.com/icons/svg/299/299693.svg">
      <span class = "lang-txt"> Português <span> (BR) </span> </span>     
    </div>   
  </div>
 </div>
<div class = "content">
  <div class = "ct-img">
    <img src = "https://traceyrickard.co.uk/wp-content/uploads/2015/09/lizard-765x510.jpg">
  </div>
  <div class = "ct-txt">
    <h1> </h1>
    <p> </p>
    <a href = "#"> <span> Link </span> </a>
  </div>
</div>
<script>
var tnum = 'en';
 
$(document).ready(function(){
 
  $(document).click( function(e) {
       $('.translate_wrapper, .more_lang').removeClass('active');    
  });
 
  $('.translate_wrapper .current_lang').click(function(e){   
    e.stopPropagation();
    $(this).parent().toggleClass('active');
   
    setTimeout(function(){
      $('.more_lang').toggleClass('active');
    }, 5);
  });
    translate(tnum);
  $('.more_lang .lang').click(function(){
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.more_lang').removeClass('active'); 
    var img = $(this).find('img').attr('src');   
    var lang = $(this).attr('data-value');
    var tnum = lang;
    translate(tnum);
   
    $('.current_lang .lang-txt').text(lang);
    $('.current_lang img').attr('src', img);
   
    if(lang == 'ar'){
      $('body').attr('dir', 'rtl');
    }else{
      $('body').attr('dir', 'ltr');
    }
   
  });
});
function translate(tnum){
  $('h1').text(trans[0][tnum]);
  $('p').text(trans[1][tnum]);
  $('.content a span').text(trans[2][tnum]);
}
var trans = [
  {
    en : 'hello',
    pt : 'Camaleão',
    es : 'Camaleón',
    fr : 'Caméléon',
    de : 'Chamäleon',
    cn : '变色龙',
    ar : 'حرباء'
  },{
    en : ' A tongue far longer than its body, shooting out to snatch insects in a fraction of a second. Telescopic-vision eyes that swivel independently in domed turrets. Feet with toes fused into mitten-like pincers. Horns sprouting from brow and snout.',
    pt : 'Por uma infinidade de características anatômicas, o camaleão tem poucos rivais. Uma língua muito mais longa do que o seu corpo, disparando para pegar insetos em uma fração de segundo. Olhos de visão telescópica que giram de forma independente em torres com abóbadas. Uma aba de pele que circunda o pescoço como uma barriga de renda em um nobre isabelino.'
    de: 'Wegen der schieren Breite der anatomischen Besonderheiten hat das Chamäleon wenige Rivalen. Eine Zunge, die viel länger ist als ihr Körper und in einem Bruchteil einer Sekunde Insekten erjagt. Teleskopische Augen, die unabhängig voneinander in Kuppeltürmen schwenken. ',
    cn: '由于极其奇特的解剖特征，变色龙几乎没有对手。一只比它的身体长得多的舌头，在几分之一秒内射出来抓住昆。棘手的鼻饰。在伊丽莎白的优雅的伊丽莎白时代，像皮带一样绕着脖子的皮瓣',
ar : 'لمجرداتساعالميزاتالتشريحيةفظيع، والحرباءلديهامنافسيهقليلة. اللسانأطولبكثيرمنجسمه، واطلاقالنارلانتزاعالحشراتفيجزءصغيرمنالثانية. عيونالرؤيةتلسكوبيةالتيقطببشكلمستقلفيالأبراجالقبة. قدممعأصابعتنصهرفيوسط-- مثلبينكرز. هورنز،تبرعم، من، الحواجب، أيضا، سنوت. نوبلالحليالأنفية. جلدرفرفتحلقالرقبةمثلالرباطروفعلىإليزابيثيةأنيقة.'

  },{
    en : 'See More',
    pt : 'Saiba mais',
    es : 'Más información',
    fr : 'En savoir plus',
    de : 'Weitere Infos',
    cn : '查看更多',
    ar : 'مشاهدةالمزيد'
  }, 
];
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of language translator with javascript.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>  
<html>  
<head>
  <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet" />
  <link href = "https://fonts.googleapis.com/css?family=News+Cycle:400,700" rel = "stylesheet">
</head>
<style>
        <meta http-equiv = "Content-Type"  
            content = "text/html; charset=UTF-8" />  
        <title> Example of Language Translation with JavaScript </title>  
        <meta name = "description"/>  
        <meta content = "width=800, initial-scale=1"  
        name = "viewport" />  
<script src =  
"https://code.jquery.com/jquery-3.5.1.min.js">  
        </script>               
        <script src =  
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>          
<style>  
h2 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: white;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
}  
h4 {  
  margin-top: 40px;  
  text-transform: none;  
  font-size: 1.75em;  
  font-weight: bold;  
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;  
  color: #999;   
  letter-spacing: -0.005em;   
  word-spacing: 1px;  
  letter-spacing: none;  
  text-align: center;  
  color: white;  
}  

@import url("https://fonts.googleapis.com/css?family=Asap&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+SC&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
  background-color: #eeeeee;
  color: #303030;
  font-family: "Asap", sans-serif;
}
body {
  height: 100%;
  overflow: hidden;
  background-color: #eeeeee;
  color: #303030;
  font-family: "Asap", sans-serif;
}

.demo {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.lang {
  margin: 0 auto;
}

.button_lang {
  cursor: pointer;
  display: inline-block;
  padding: 0.25em 0em;
  border-radius: 10px;
  width: 5em;
  transition: 0.25s ease;
}

.button_lang:hover {
  background: #b5d6b2;
  transition: 0.25s ease;
}

.current_lang {
  background: #b5d6b2;
}

.translation {
  text-align: center;
  margin: 0.5em;
}

.english {
  font-family: "Asap", sans-serif;
}

.chinese {
  font-family: "Noto Sans SC", sans-serif;
  font-size: 1.5em;
}

.japanese {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2em;
}
</style>
<body>
<h2> Example </h2>
<h4> Language Translation with JavaScript </h4>
<div class="demo">
  <div>
    <table class="lang">
      <tr>
        <td class="tdlang">
          <span id="en" class="button_lang current_lang">EN</span>
        </td>
        <td class="tdlang"> <span id="cn" class= "button_lang"> 中文 </span> </td>
        <td class="tdlang"> <span id="jp" class= "button_lang"> 日本語  </span> </td>
      </tr>
    </table>
    <div class="translation english" id="translate">
   Hello, 
 The text here will change
    </div>
  </div>
</div>var english = document.getElementById("en"),
  japanese = document.getElementById("jp"),
  chinese = document.getElementById("cn"),
  change_text = document.getElementById("translate");
english.addEventListener("click", function() {
    change(english, japanese, chinese);
  }, false
);
japanese.addEventListener("click", function() {
    change(japanese, english, chinese);
  }, false
);

chinese.addEventListener("click", function() {
    change(chinese, english, japanese);
  }, false
);

function change(lang_on, lang_off1, lang_off2) {
  if (!lang_on.classList.contains("current_lang")) {
    
    lang_on.classList.add("current_lang");
    lang_off1.classList.remove("current_lang");
    lang_off2.classList.remove("current_lang");
  }

  if (lang_on.innerHTML == "EN") {
    change_text.classList.add("english");
    change_text.classList.remove("chinese");
    change_text.classList.remove("japanese");
    change_text.innerHTML = "The text here will change";
  }  
  else if (lang_on.innerHTML == "??") {
    change_text.classList.add("chinese");
    change_text.classList.remove("english");
    change_text.classList.remove("japanese");
    change_text.innerHTML = "这里的文字会改变;"
  }
  
  else if (lang_on.innerHTML == "???") {
    change_text.classList.add("japanese");
    change_text.classList.remove("english");
    change_text.classList.remove("chinese");
    change_text.innerHTML = "ここの文字は変わります; "
  }
}
</script>
</body>
</html>

Explanation:

In the above example, we have created an example of language translator with javascript.

Output:

Following is the output of this example.

Next TopicjQuery Animated Border Plugin

← prev next →