Navigator language

how to know locale of user.

by Leonardo Lima

HTML

<button class="lang" id="lang" >Click</button>
<div class="form">
    <p>Formulário pt-BR</p>
    <form action="#">
     <label for="nome">Nome: <input type="text"></label><br>
     <label for="nome">Telefone: <input type="text"></label><br>
       <label for="nome">E-mail: <input type="text"></label>
    <input type="submit" value="Enviar">
         </form>
</div>
<!--form2 -->           
  <div class="form2">
    <p>Form en-US</p>
    <form action="#">
     <label for="name">Name: <input type="text"></label><br>
     <label for="phone">Phone: <input type="text"></label><br>
       <label for="email">E-mail: <input type="text"></label>
    <input type="submit" value="Send">
         </form>
</div>

CSS

.form{background:gray;border-radius:10px;}
.form p{margin-left:13px;}
.form>form>label{margin-left:13px;}
.form>form>label>input{margin-bottom:10px;}
/*form2*/
.form2{background:gray;border-radius:10px;}
.form2 p{margin-left:13px;}
.form2>form>label{margin-left:13px;}
.form2>form>label>input{  
    margin-bottom:10px;    
}

JavaScript

//aqui vamos esconder os formularios
$(".form").hide();
$(".form2").hide();

//click do botão vai descobrir o language
$("#lang").on('click',function () {
//variavel, que vai retornar uma string com language preferida do usuario
var lang = navigator.language;
    
//qual local language 
if(lang === 'en-US'){
     //intregamos para o usuário o form correto
        alert("Your language is:"+lang);
        $(".form2").show('slow', function(){});        
    }
   //qual local language
if(lang === 'pt-BR'){
     //intregamos para o usuário o form correto
        alert("Your language is:"+lang);
        $(".form").show('slow', function(){});        
    }
    
});