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 →