Multi Language Website with jQuery 🇬🇧🇹🇭🇨🇳

Let’s make multi language website

Get Ready

A Simple Guide to implement Multi Language into your website. Here is the list of what is in use for this guide.

HTML5
Bootstrap
jQuery
JSON

Create “index.html” with language switch button

“index.html” file that includes Bootstrap, jQuery, and custom script

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi Language</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <style>
        body,html {height: 100%;}
    </style>
</head>
<body>
    <div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center text-center">
            <div class="col-6">
                <h1 id="text" class="float-right mr-3"></h1>
            </div>
            <div class="col-6">
                <div class="row">
                    <a href="#" class="btn btn-info" style="width: 100px;" 
                      id="engBtn" onclick="setLang('en')">English</a>
                </div>
                <div class="row mt-4">
                    <a href="#" class="btn btn-primary" style="width: 100px;" 
                      id="thaiBtn" onclick="setLang('th')">ภาษาไทย</a>
                </div>
                <div class="row mt-4">
                    <a href="#" class="btn btn-danger" style="width: 100px;" 
                      id="thaiBtn" onclick="setLang('ch')">中文</a>
                </div>
            </div>
        </div>   
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>

It will look like this

<Head> where we include Bootstrap

Copy to Clipboard

<body> where we create the <h1> for text and button for each language

Copy to Clipboard

The end of <body> where we include jQuery, Bootstrap Script, and Our Custom Script

Copy to Clipboard

Create JSON files for each language

Create folder call “lang” and create .json file for each language

Code for th.json 🇹🇭

Copy to Clipboard

Code for en.json 🇬🇧

Copy to Clipboard

Code for ch.json 🇨🇳

Copy to Clipboard

Create script.js to handle language switching

“script.js” file

Copy to Clipboard

getLang() function to define a default language and fetch for json file according to selected language.

Copy to Clipboard

setLang(lang) function handle a language change when user click on the buttons – Parameter ‘lang’ define what language to change into.

Copy to Clipboard

English Button will call setLang(‘en’) when clicked.

Copy to Clipboard

Call a getLang() function and apply text into <h1> tag with id=”text” when a webpage is loaded.

Copy to Clipboard

Now your website can say ‘Hello’ in English Thai and Chinese – YAY!

P.S. LocalStorage in javascript is not clear even when user close the program. LocalStorage is connect with the domain name. Therefore, next time the visitor connect to your website the selected language will be there by default.

Multi Language Website with jQuery 🇬🇧🇹🇭🇨🇳

Let’s make multi language website

Get Ready

Create “index.html” with language switch button

It will look like this

<Head> where we include Bootstrap

<body> where we create the <h1> for text and button for each language

The end of <body> where we include jQuery, Bootstrap Script, and Our Custom Script

Create JSON files for each language

Code for th.json 🇹🇭

Code for en.json 🇬🇧

Code for ch.json 🇨🇳

Create script.js to handle language switching

“script.js” file

getLang() function to define a default language and fetch for json file according to selected language.

setLang(lang) function handle a language change when user click on the buttons – Parameter ‘lang’ define what language to change into.

English Button will call setLang(‘en’) when clicked.

Call a getLang() function and apply text into <h1> tag with id=”text” when a webpage is loaded.

Now your website can say ‘Hello’ in English Thai and Chinese – YAY!

Share This Project With Other Creatives!

About the Author: notynote