A simple solution for translating static websites with JS and a data attribute (data-translation)

Basic multilingual support for static pages

These scripts allow people to build static pages with multilingual support without any framework or special libs.

get-script.js

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);
});

lang-en.js

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

lang-es.js

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

multilingual-static-page.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>

translations.js

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);
});