How to create multilingual static pages without frameworks
Tags: javascript, html, multilingual, json
Published: 2022-08-11 12:25:00

From time to time, we have the experience of building websites without frameworks like Angular, Vue.js, or React. Perhaps, for fun, we are new or we just want something extremely simple.

In my case, I started building my [personal website](https://github.com/FANMixco/federiconavarrete) several years ago. In those days, I didn't know Angular, and it was a little bit messy to support everything I needed. I didn't consider myself a front-end developer. It was more like my hobby.

Something important in my case was to add multilingual support since I speak English and Spanish fluently. This was a little bit messy since I couldn't find any good library or solution. After several attempts, I came up with the following pieces of code that can simplify your life also.

I have two files, one for English and one for Spanish, where I store the translations in JSONs as constants. _If you wonder why I don't store only the JSONs, I had several issues consuming the files later. I got several errors, and most solutions were for Node.js only._

**lang-en.js**

```javascript
const translations = {
    "telephone": "Telephone",
    "email": "Email",
    "contactMe": "Contact me"
};
```

**lang-es.js**

```javascript
const translations = {
    "telephone": "Teléfono",
    "email": "Email",
    "contactMe": "Contáctame"
};
```

The following script is for reading the scripts:

**get-script.js**

```javascript
const getScript = url => new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.async = true;
  
    script.onerror = reject;
  
    script.onload = script.onreadystatechange = function() {
      const loadState = this.readyState;
  
      if (loadState && loadState !== 'loaded' && loadState !== 'complete') return;
  
      script.onload = script.onreadystatechange = null;
  
      resolve();
    }
  
    document.head.appendChild(script);
});
```

And the last script is for setting the values in your HTML:

**translations.js**

```javascript
let lang = 'en';

let nLang = (navigator.languages
    ? navigator.languages[0]
    : (navigator.language || navigator.userLanguage)).split('-')[0];

let supportedLang = ['en', 'es'];

lang = supportedLang.includes(nLang) ? nLang : lang;

getScript(`lang-${lang}.js`)
.then(() => {
    document.querySelectorAll('[data-translation]').forEach(item => {
        item.innerHTML = translations[`${item.dataset.translation}`];
    });
})
.catch((e) => {
  console.error(e);
});
```

So, how do you consume and configure your HTML? You define a **data-* attribute** called **data-translation** with the value you expect from the "JSON" like this:

```html
<script src="get-script.js"></script>
<script src="translations.js"></script>

<p data-translation="contactMe"></p>
<p data-translation="telephone"></p>
<p data-translation="email"></p>
```

And that's all. Now, you can create your static multilingual pages without frameworks.

### Follow me on:

|  Personal  |  LinkedIn  |YouTube|Instagram|Cyber Prophets|Sharing Your Stories|
|:----------|:----------|:------------:|:------------:|:------------:|:------------:|
|[![Personal](https://raw.githubusercontent.com/FANMixco/federiconavarrete/master/img/favicons/favicon.png)](https://federiconavarrete.com)|[![LinkedIn](https://i.stack.imgur.com/idQWu.png)](https://www.linkedin.com/in/federiconavarrete)|[![YouTube](https://i.stack.imgur.com/CFPMR.png)](https://youtube.com/c/FedericoNavarrete)|[![Instagram](https://i.stack.imgur.com/PIfqY.png)](https://www.instagram.com/federico_the_consultant)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/cyber-prophets)|[![RedCircle Podcast](https://i.stack.imgur.com/4XICF.png)](https://redcircle.com/shows/sharing-your-stories)|

[![sponsor me](https://raw.githubusercontent.com/FANMixco/Xamarin-SearchBar/master/bmc-rezr5vpd.gif)](https://www.buymeacoffee.com/fanmixco)