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 →

For Videos Join Our Youtube Channel: Join Now

Feedback

Send your Feedback to [email protected]

Help Others, Please Share

Learn Latest Tutorials

Splunk

SPSS

Swagger

Transact-SQL

Tumblr

ReactJS

Regex

Reinforcement Learning

R Programming

RxJS

React Native

Python Design Patterns

Python Pillow

Python Turtle

Keras

Preparation

Aptitude

Reasoning

Verbal Ability

Interview Questions

Company Questions

Trending Technologies

Artificial Intelligence

AWS

Selenium

Cloud Computing

Hadoop

ReactJS

Data Science

Angular 7

Blockchain

Git

Machine Learning

DevOps

B.Tech / MCA

DBMS

Data Structures

DAA

Operating System

Computer Network

Compiler Design

Computer Organization

Discrete Mathematics

Ethical Hacking

Computer Graphics

Software Engineering

Web Technology

Cyber Security

Automata

C Programming

C++

Java

.Net

Python

Programs

Control System

Data Mining

Data Warehouse

Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.

Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry

Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week

^{Like/Subscribe us for latest updates or newsletter}